关于echarts的那些事（地图标点，折线图，饼图）

前记：离上一篇博客的发布已经过去两个月了，这期间总想写点什么，却怎么都写不出来，一直拖到了现在。现在的感觉，不是像这期间一样，想好好整理一番，写一篇好博客，却写不出来。事实发现，随心就好，较好的博客，需要深入的技术，现在能力还不够，只能把所遇到的问题写出来，整理一下就好。周五了，一天过去了一半，利用闲下来的时间，把这些天遇到的问题整理一下吧。

一、地图标点（以青岛地图为例）

　　地图标点有两种方法（两种地图的展现方式）

　　准备工作：

　下载echarts文件。（下载地址：http://echarts.baidu.com/download.html）

　　注意：建议下载完整包，不要自己构建。因为地图要跟冒泡图结合，有些需要东西，自己也不清楚，下个完整包就可以了。

青岛地图下载（下载地址：http://ecomfe.github.io/echarts-map-tool/ 可以自己构建全国各省市地图）

上图给出两种构建地图的方法，特别注意的是引入json数据的时候，使用chrome打开的时候需要搭配跨域环境，请参考以前写的文章 http://www.cnblogs.com/wlpower/p/6370377.html，强调一点，如果方案一实现不了，可以根据这个方法：

版本号49之后的chrome跨域设置
chrome的版本升到49之后，跨域设置比以前严格了，在打开命令上加--disable-web-security之后还需要给出新的用户个人信息的目录。众所周知chrome是需要用gmail地址登录的浏览器，登录后就会生成一个存储个人信息的目录，保存用户的收藏、历史记录等个人信息。49版本之后，如果设置chrome浏览器为支持跨域模式，需要指定出一个个人信息目录，而不能使用默认的目录，估计是chrome浏览器怕用户勿使用跨域模式泄露自己的个人信息（主要是cookie，很多网站的登录token信息都是保存在cookie里）。
具体做法为：
1.在电脑上新建一个目录，例如：C:MyChromeDevUserData
2.在属性页面中的目标输入框里加上 --disable-web-security --user-data-dir=C:MyChromeDevUserData，--user-data-dir的值就是刚才新建的目录。
3.点击应用和确定后关闭属性页面，并打开chrome浏览器。
再次打开chrome，发现有“--disable-web-security”相关的提示，说明chrome又能正常跨域工作了。

标点坐标数据

　　如果是少数标点，可以到百度地图ApI坐标拾取器查找。

　　如果是很多个，比如这些：

要是有坐标文件，就很方便，要是没有，只能一个一个找，四千八百多个坐标，我跟我另个同事找了好几天。。。

然后就是Excel表格数据转变成我们需要的格式：

有多种方法，一是：网上有在线Excel转换json格式，可以自动转换，只是坐标数据转换不是所需要的格式。另外的呢，可以跟后端沟通，把Excel上传数据库，然后以json格式传出来。（这些数据困扰了我一天多。。。）

准备工作已经好了，接下来开始页面内容：

  1 <!DOCTYPE html>
  2 <html style="height: 100%">
  3    <head>
  4       <meta charset="utf-8">
  5       <script type="text/javascript" src="js/echarts.min.js"></script>
  6       <script type="text/javascript" src="js/qingdao.js"></script>
  7       <script type="text/javascript" src="js/mpda.js"></script>
  8       <script type="text/javascript" src="js/geo.js"></script>
  9        <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
 10    </head>
 11    <body style="height: 100%; margin: 0">
 12       <div id="main" style="height: 800px"></div>
 13       <br>
 14       <script type="text/javascript">
 15         var chart = echarts.init(document.getElementById('main'));
 16 
 17         //因为数据比较多，这里只是举例参考
 18          var data = [
 19             {"name":"青岛威达体育用品有限公司","value":"1000.00"},
 20             {"name":"青岛万福食品有限公司","value":"1804.76"},
 21             {"name":"青岛帅潮实业有限公司","value":"3000.00"},
 22             {"name":"青岛市琴岛电器有限公司","value":"1200.00"},
 23             {"name":"青岛普天电器有限公司","value":"6000.00"},
 24             {"name":"青岛龙兴机械有限公司","value":"200.00"},
 25             {"name":"青岛理研电线电缆有限公司","value":"1000.00"},
 26             {"name":"青岛胶南瑞源纸业有限公司","value":"500.00"},
 27             {"name":"青岛胶南惠丰机械有限公司","value":"100.00"},
 28             {"name":"青岛佳春机械有限公司","value":"500.00"}
 29         ];
 30         var geoCoordMap =  {
 31                    '青岛威达体育用品有限公司':[120.442145,36.353304],
 32                   '青岛万福食品有限公司':[120.501856,36.862275],
 33                   '青岛帅潮实业有限公司':[120.402697,36.218331],
 34                   '青岛市琴岛电器有限公司':[120.500757,36.417052],
 35                   '青岛普天电器有限公司':[120.083109,36.295657],
 36                   '青岛龙兴机械有限公司':[119.778027,36.997143],
 37                   '青岛理研电线电缆有限公司':[120.510292,36.309673],
 38                   '青岛胶南瑞源纸业有限公司':[120.02328,35.890329],
 39                   '青岛胶南惠丰机械有限公司':[119.918591,35.918377],
 40                   '青岛佳春机械有限公司':[120.010518,36.063161]
 41               }
 42 
 43         //获取数据和坐标
 44         var convertData= function (data) {
 45             var res = [];
 46             for (var i = 0; i < data.length; i++) {
 47               
 48                 var geoCoord = geoCoordMap[data[i].name];
 49                
 50                 if (geoCoord) {
 51                     res.push({
 52                         name: data[i].name,
 53                         value: geoCoord.concat(data[i].value)
 54                     });
 55                     
 56                 }
 57             }
 58             return res;
 59         };
 60 
 61         var option = {
 62             backgroundColor: '#404a59',
 63             title: {
 64                 text: '青岛市企业分布',
 65                 left: 'center',
 66                 textStyle: {
 67                     color: '#fff'
 68                 }
 69             },
 70             //提示框
 71             tooltip : {
 72                 trigger: 'item',
 73                 formatter: function (params) { //添加数字,否则为坐标
 74                                                //console.log(params.value)
 75                     return params.name+'<br>'+'注册资本'+''+':'+''+params.value[2]+''+'万元'
 76                     
 77                 },
 78                 padding:[
 79                     5,  // 上
 80                     10, // 右
 81                     5,  // 下
 82                     10, // 左
 83                 ],
 84                 textStyle:{
 85                   color: '#fff',
 86                   fontSize:'13'
 87                 }
 88             },
 89            //图例组件
 90             legend: {
 91                 orient: 'horizontal',
 92                 //相等于left 、top、bottom、right
 93                 y: 'bottom',
 94                 x:'right',
 95                 //这里的数据名称要和series中的name名称一样，否则不显示
 96                 data:['规上企业'],
 97                 textStyle: {
 98                     color: '#fff'
 99                 }
100             },
101 
102             //地图
103             geo: {
104                 map: 'qingdao',
105                 label: {
106                     emphasis: {
107                         show: false
108                     }
109                 },
110                 roam: true,
111                 itemStyle: {
112                     //正常状态下
113                     normal: {
114                         areaColor: '#323c48',
115                         borderColor: '#111'
116                     },
117                     //选定某一区域下 相当于 hover
118                     emphasis: {
119                         areaColor: '#2a333d'
120                         
121                     }
122 
123                 },
124                z:1 
125             },
126             //这里数据中主要是冒泡图数据
127             series : [{
128                     name: '规上企业',
129                     type: 'scatter',
130                     coordinateSystem: 'geo',
131                     //标点的大小
132                     data: convertData(data),
133                     symbolSize: function (val) {
134                         return val[2] / 30000;  //也可以根据这里的数值更改大小  val[2] / x  x越小，标点越大
135                     },
136                     label: {
137                         normal: {
138                             formatter: '{b}',
139                             position: 'right',
140                             show: false  //根据需求可以更改标点标签是否显示
141                         },
142                         emphasis: {
143                             show: true
144                         }
145                     },
146                     itemStyle: {
147                         normal: {
148                             color: '#ddb926'
149                         }
150                     }
151                 },
152                 {
153                     name:'上规企业',
154                     type: 'effectScatter',
155                     coordinateSystem: 'geo',
156                     data: convertData(data.sort(function (a, b) {   //这里是多个数据比较大小
157                         return b.value - a.value;
158                     }).slice(0,1000)),  //slice里面的数可以是0 ，意思是全部显示  0,1000 意思是显示这组数据中最大前1000组
159                     symbolSize: function (val) {
160                         return val[2] / 30000;
161                     },
162 
163                     showEffectOn: 'render',
164                     rippleEffect: {
165                         brushType: 'stroke'
166                     },
167                     hoverAnimation: true,
168                     label: {
169                         normal: {
170                             formatter: '{b}',
171                             position: 'right',
172                             show: false
173                         },
174                         emphasis: {
175                             show: true
176                         }
177                     },
178                     itemStyle: {
179                         normal: {
180                             color: '#f4e925',
181                             shadowBlur: 10,
182                             shadowColor: '#333'
183                         }
184                     }
185                    
186                 }
187 
188             ]
189         };
190 
191         chart.setOption(option);
192     </script>
193     </body>
194 </html>

效果图如下：

具体的echarts配置请参考echarts文档：http://echarts.baidu.com/option.html#title

另一种地图标点可以试着做一下哦！

二、折线图

折线图的准备工作只是下载echarts文件。

以下是代码：

  1         option = {
  2             //这里如果不想用echart自动配置的颜色，可以设定一下
  3             color: ['#2ec7c9', '#b7a3de', '#5ab1ef', '#febd87'],
  4 
  5             tooltip: {
  6                 //触发类型
  7                 trigger: 'axis'
  8             },
  9             legend: {
 10                 data:['交易额','交易笔数','卡均交易额','卡均交易笔数'],
 11                 top:"3%"
 12             },
 13             grid: {
 14                
 15                 left: '3%',
 16                 right: '4%',
 17                 bottom: '10%',
 18                 containLabel: true
 19               
 20             },
 21             toolbox: {
 22                 feature: {
 23                   dataView:{
 24                     iconStyle:{
 25                       normal:{
 26                         borderColor:'#d87f3f'
 27                       }
 28                     }
 29                   },
 30                   restore:{
 31                     iconStyle:{
 32                       normal:{
 33                         borderColor:'#2a95ff'
 34                       }
 35                     }
 36                   },
 37                  
 38                   magicType: {
 39                       type: ['line', 'bar'],
 40                       iconStyle:{
 41                       normal:{
 42                         borderColor:'#54c954'
 43                       }
 44                     }
 45                   },
 46                   //保存图片
 47                   saveAsImage: {
 48                     iconStyle:{
 49                       normal:{
 50                         borderColor:'#4b0082'
 51                       }
 52                     }
 53                   }
 54                 },
 55                right:'6%',
 56                top:'3%'
 57             },
 58             xAxis: {
 59                 type: 'category',
 60                 boundaryGap: false,
 61                 axisLine:{
 62                   show:true,
 63                   //可以给坐标轴设定颜色
 64                   lineStyle:{
 65                     color:"#008acd",
 66                     2,
 67                     type:'solid'
 68                   }
 69                 },
 70 
 71                 data: ['周一','周二','周三','周四','周五','周六','周日']
 72             },
 73             yAxis: {
 74                 type: 'value',
 75                  axisLine:{
 76                   show:true,
 77                   lineStyle:{
 78                     color:"#008acd",
 79                     2,
 80                     type:'solid'
 81                   }
 82                 },
 83             },
 84             series: [
 85                 {
 86                     name:'交易额',
 87                     type:'line',
 88                     stack: '总量',
 89                     data:[120, 132, 101, 134, 90, 230, 210]
 90                 },
 91                 {
 92                     name:'交易笔数',
 93                     type:'line',
 94                     stack: '总量',
 95                     data:[220, 182, 191, 234, 290, 330, 310]
 96                 },
 97                 {
 98                     name:'卡均交易额',
 99                     type:'line',
100                     stack: '总量',
101                     data:[150, 232, 201, 154, 190, 330, 410]
102                 },
103                 {
104                     name:'卡均交易笔数',
105                     type:'line',
106                     stack: '总量',
107                     data:[320, 332, 301, 334, 390, 330, 320]
108                 }
109             ]
110         };

值得注意以下：如果想要图表自适应，跟bootstrap连用，千万别忘了这句话：

window.onresize = function(){
          myChart.resize();
        }

三、饼图

给出这张设计图，难点应该是外面的圈了吧！

这里问了echarts是群里的大神，然后看了配置文档，做了出来，（思想是做了两个饼图，大的是饼图中的圆形图）贴出代码：

 1  option = {
 2             color :['#2ec7c9','#b6a2de','#5ab1ef','#ffb980','#d87a80','#8d98b3','#e5cf0d','#97b552','#95706d','#dc69aa','#07a2a4'],
 3             title : {
 4                 text: '交易额前10位卡产品',
 5                 subtext: '单位：万',
 6                 x:'center'
 7             },
 8             tooltip : {
 9                 trigger: 'item',
10                 formatter: "{a} <br/>{b} : {c} ({d}%)"
11             },
12           
13             series : [
14                 {
15                     name: '',
16                     type: 'pie',
17                     radius : '60%',
18                     center: ['50%', '50%'],
19                     data:[
20                         {value:335, name:'卡1'},
21                         {value:310, name:'卡2'},
22                         {value:234, name:'卡3'},
23                         {value:135, name:'卡4'},
24                         {value:1548, name:'卡5'},
25                         {value:335, name:'卡6'},
26                         {value:111, name:'卡7'},
27                         {value:222, name:'卡8'},
28                         {value:135, name:'卡9'},
29                         {value:321, name:'卡10'},
30                         {value:135, name:'其他'},
31                     ],
32                     itemStyle: {
33                         emphasis: {
34                             shadowBlur: 10,
35                             shadowOffsetX: 0,
36                             shadowColor: 'rgba(0, 0, 0, 0.5)'
37                         }
38                     },
39                     markArea:{
40                       itemStyle:{
41                         normal:{
42                           
43                           borderColor:'#000',
44                           borderType:'solid'
45                         }
46                       }
47                     }
48                 },
49                 {
50        
51                   type: 'pie',
52                   //因为是需要圆形，所以提示框之类的都不显示
53                    tooltip: {
54                       show: false
55                   },
56                   hoverAnimation: false, //鼠标移入变大
57                   radius: ['65%', '65.5%'], //圆心空出的大小
58                   itemStyle: {
59                       normal: {
60                           label: {
61                               show: false,
62                               position: 'outside'
63                           },
64                           labelLine: {
65                               show: false,
66                               length: 100,
67                               smooth: 0.5
68                           },
69                           borderWidth: 5,
70                           shadowBlur: 40
71                          
72                           
73                       }
74                   },
75                   data: [{
76                       value: 0
77                      
78                   }]
79               }
80             ]
81         };

echarts图表很有趣，对数据可视化感兴趣的可以体验体验，看着一些大神做出来的图表，佩服的五体投地。贴张图分享下~

　　网址：http://gallery.echartsjs.com/explore.html#sort=rank~timeframe=all~author=all

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　5.5 星期五【完】

相关阅读:
代码改变世界，随手写了点代码解决了一个小学生级别的作业题，编程要从娃娃抓起
 智和信通实现信创国产化适配助力信创生态智能运维体系建设
 智和信通赋能国产信创建设IT智能监控运维体系
 北京智和信通智慧档案馆网络监控运维解决方案
 图书馆网络运维监控安全态势感知方案-智和信通
 广播电视网络运维安全态势感知解决方案
 北京智和信通荣膺2020智能运维星耀榜最具影响力企业
 直播新规出台！如何用技术管住乱打赏的「熊孩子」？
是什么让你在赛博空间更好看？
Niu Talk 数据科学系列论坛：明晚，我们聊聊大数据与开源
原文地址：https://www.cnblogs.com/wlpower/p/6813501.html