zoukankan      html  css  js  c++  java
  • Echarts 简单报表系列四:雷达图

    代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
      <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
        <div id="main" style=" 600px;height:400px;"></div>
        <!-- 引入echarts.js -->
        <script src="https://cdn.bootcss.com/echarts/4.0.2/echarts.js"></script>
        <script>
        //获取容器的id并赋值给变量myChart
        var myChart = echarts.init(document.getElementById('main'));
        /*用来配置参数*/
        var option = {
                 radar :{
                            indicator : [
                                {text : '个人情况
    满分15', max  : 15},
                                {text : '信用记录
    满分35', max  : 35},
                                {text : '经济实力
    满分30', max  : 30},
                                {text : '稳定情况
    满分15', max  : 15},
                                {text : '贷款情况
    满分25', max  : 25},
                                {text : '工作情况
    满分30', max  : 30},
                                {text : '家庭情况
    满分15', max  : 15},
                                {text : '保障情况
    满分15', max  : 15}
                                
                            ],
                            radius : 130,
                            splitNumber : 10,
                            axisTick : {
                                show : true
                            }
                        }
                    ,
                 series : 
                        {
                            type: 'radar',
                            data : [
                                {
                                    value : [10,22,20,10,16,15,10,12,15],
                                    label: {
                                        normal: {
                                            show: true
                                        }
                                    }
                                }
                            ]
                        }
                };
         /*调用option生成图表*/
        myChart.setOption(option)
        </script>
    </body>
    </html>

    显示效果:

  • 相关阅读:
    PHP面向对象之原型(trait)
    PHP面向对象之命名空间
    Javascript中的Copy()函数
    六、unique_lock取代lock_guard
    五、互斥量
    四、创建和等待多个线程
    三、线程传参
    二、线程的启动与结束 join与detach
    HTTP:常见状态码
    HTTP:简述URL、URN和URI
  • 原文地址:https://www.cnblogs.com/huanghongbo/p/9060150.html
Copyright © 2011-2022 走看看