雷达图 - 爱码网

该雷达图是依赖于Echarts框架的。

 1 <!DOCTYPE html>
 2 <head>
 3     <meta charset="utf-8">
 4     <title>ECharts</title>
 5     <script src="js/jquery-2.1.3.js" type="text/javascript" charset="utf-8"></script>  // 需要引入echarts文件
 6     <style type="text/css">
 7         html,
 8         body {
 9             width: 100%;
10             height: 100%;
11         }
12     </style>
13 </head>
14 
15 <body>
16     <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
17     <div id="main" style="width:495px; height:250px;margin: 100px auto;"></div>
18     <!-- ECharts单文件引入 -->
19     <script src="js/echarts-all.js" type="text/javascript" charset="utf-8"></script>
20     <script type="text/javascript">
21         var option = { //可以去官网上根据每个案例不同的option去写各种图形
22             title: {   //标题
23                 text: \'OP系统点击量\'
24             },
25             tooltip: {   //提示框，鼠标悬浮交互时的信息提示
26                 show:true,
27                 trigger: \'axis\'
28             },
29             legend: {    //图例，每个图表最多仅有一个图例
30                 x: \'center\',
31                 data: [\'ESOP系统\', \'VGOP系统\']
32             },
33             polar: [{    //极坐标 
34                 indicator: [{text: \'计划部\',max: 100}, 
35                             {text: \'市场部\',max: 100},
36                             {text: \'政企客户部\',max: 100},
37                             {text: \'客户服务部\',max: 100},
38                             {text: \'铁通公司\',max: 100},
39                             {text: \'其他\',max: 100}
40                            ],
41                 radius: 100,      
42                 startAngle: 120   // 改变雷达图的旋转度数
43             }],
44             
45             series: [{         // 驱动图表生成的数据内容数组，数组中每一项为一个系列的选项及数据
46                 name: \'总点击量\',
47                 type: \'radar\',
48                 itemStyle: {//图形样式，可设置图表内图形的默认样式和强调样式（悬浮时样式）：
49                     normal: {
50                         areaStyle: {
51                             type: \'default\'
52                         }
53                     }
54                 },
55                 data: [{
56                     value: [],      //外部加载，也可以通过ajax去加载外部数据。
57                     name: \'\'       
58                 }, {
59                     value: [78,98,90,94,98,37],
60                     name: \'VGOP系统\'
61                 }]
62             }]
63         };
64         $(function() {
65             option.series[0].data[0].value=[12,32,34,53,53,65];  // 加载数据到data中
66             option.series[0].data[0].name =\'ESOP系统\';

67             var myChart = echarts.init(document.getElementById(\'main\'));  
68             myChart.setOption(option, true);   //为echarts对象加载数据
69         });
70     </script>
71 </body>