码迷,mamicode.com
首页 > 其他好文 > 详细

雷达图

时间:2018-06-16 21:09:02      阅读:157      评论:0      收藏:0      [点我收藏+]

标签:.com   actual   tool   销售   meta   tom   ext   asc   使用   

1.程序

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>ECharts</title>
 6     <!-- 引入 echarts.js -->
 7     <script src="../echarts.min.js"></script>
 8 </head>
 9 <body>
10     <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
11 <div id="main" style="width: 900px;height:600px;"></div>
12 <script type="text/javascript">
13         // 基于准备好的dom,初始化echarts实例
14 var myChart = echarts.init(document.getElementById(main));
15 
16 // 指定图表的配置项和数据
17 option = {
18     title: {
19         text: 基础雷达图
20     },
21     tooltip: {},
22     legend: {
23         data: [预算分配(Allocated Budget), 实际开销(Actual Spending)]
24     },
25     radar: {
26         // shape: ‘circle‘,
27         indicator: [
28            { name: 销售(sales), max: 6500},
29            { name: 管理(Administration), max: 16000},
30            { name: 信息技术(Information Techology), max: 30000},
31            { name: 客服(Customer Support), max: 38000},
32            { name: 研发(Development), max: 52000},
33            { name: 市场(Marketing), max: 25000}
34         ]
35     },
36     series: [{
37         name: 预算 vs 开销(Budget vs spending),
38         type: radar,
39         // areaStyle: {normal: {}},
40         data : [
41             {
42                 value : [4300, 10000, 28000, 35000, 50000, 19000],
43                 name : 预算分配(Allocated Budget)
44             },
45              {
46                 value : [5000, 14000, 28000, 31000, 42000, 21000],
47                 name : 实际开销(Actual Spending)
48             }
49         ]
50     }]
51 };
52 // 使用刚指定的配置项和数据显示图表。
53 myChart.setOption(option);
54 </script>
55 </body>
56 </html>

 

2.效果

  技术分享图片

 

雷达图

标签:.com   actual   tool   销售   meta   tom   ext   asc   使用   

原文地址:https://www.cnblogs.com/juncaoit/p/9191365.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!