關於echarts的那些事（地圖標點，折線圖，餅圖）

時間 2019-11-17

標籤關於 echarts 那些地圖標點折線餅圖简体版

原文原文鏈接

前記：離上一篇博客的發佈已通過去兩個月了，這期間總想寫點什麼，卻怎麼都寫不出來，一直拖到了如今。如今的感受，不是像這期間同樣，想好好整理一番，寫一篇好博客，卻寫不出來。事實發現，隨心就好，較好的博客，須要深刻的技術，如今能力還不夠，只能把所遇到的問題寫出來，整理一下就好。週五了，一天過去了一半，利用閒下來的時間，把這些天遇到的問題整理一下吧。javascript

1、地圖標點（以青島地圖爲例）html

　　地圖標點有兩種方法（兩種地圖的展示方式）java

　　準備工做：jquery

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

　　注意：建議下載完整包，不要本身構建。由於地圖要跟冒泡圖結合，有些須要東西，本身也不清楚，下個完整包就能夠了。git

青島地圖下載（下載地址：http://ecomfe.github.io/echarts-map-tool/ 能夠本身構建全國各省市地圖）

上圖給出兩種構建地圖的方法，特別注意的是引入json數據的時候，使用chrome打開的時候須要搭配跨域環境，請參考之前寫的文章 http://www.cnblogs.com/wlpower/p/6370377.html，強調一點，若是方案一實現不了，能夠根據這個方法：github

版本號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又能正常跨域工做了。web

標點座標數據

　　若是是少數標點，能夠到百度地圖ApI座標拾取器查找。chrome

　　若是是不少個，好比這些：數據庫

要是有座標文件，就很方便，要是沒有，只能一個一個找，四千八百多個座標，我跟我另個同事找了好幾天。。。json

而後就是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

另外一種地圖標點能夠試着作一下哦！

2、折線圖

折線圖的準備工做只是下載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                     width: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                     width: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();
        }

3、餅圖

給出這張設計圖，難點應該是外面的圈了吧！

這裏問了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 星期五【完】

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。