echarts學習之——電力遷徙圖

本文轉載自查看原文 2017-01-11 15:30 13579 遷徙圖/ echarts/ 自定義地圖/ 模擬城市電力輸送

今天主要就是在搞echarts，我們都知道他為我們提供了豐富的api方法，使我們能夠迅速的搭建圖標。同時他里面還有許多的案例，

其中就有這么一個國內航線模擬遷徙的地圖，如下所示：

而我們通常因為各種需求原因，不想要全國地圖，而單單想要一個省，或一個市的地圖，進行類似模擬遷徙的效果，就比如我接下來要做的這個效果圖：

首先第一個案例中的demo代碼我就不說了，可以到http://gallery.echartsjs.com/editor.html?c=xSyn_h87Sg 進行下載

接下來的步驟為：

3.這一步可以生成js 也可以生成json 兩種方式引用的方法見下面的example.(我這邊使用的是生成js)

這樣就會自動生成並下載好一個js或是json格式的文件，將其導入到你的項目之中。

4.在編輯器中創建一個html文件

將剛剛生成的js或json導入進去（這里我僅演示js的方式）

注意：要先引入echart.min.js

5:不多說了，整個地圖的代碼如下：

  1 <!DOCTYPE html>
  2 <html style="height: 100%">
  3 <head>
  4     <meta charset="utf-8">
  5     <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
  6     <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  7     <title>供電圖</title>
  8     <link rel="stylesheet" type="text/css" href="../css/api.css" />
  9 </head>
 10 <body style="height: 100%; margin: 0 auto">
 11 <div id="container" style="height: 100%"></div>
 12 <script src="../script/echarts.min.js"></script>
 13 <script src="../script/NingBo.js"></script>
 14 <script type="text/javascript">
 15     var dom = document.getElementById("container");
 16     var myChart = echarts.init(dom);
 17     var app = {};
 18     option = null;
 19     var geoCoordMap = {
 20         '寧波市區':[121.55,29.88],
 21         '北侖區': [121.92000,29.848355],
 22         '慈溪市':[121.3,30.23],
 23         '奉化市':[121.32327,29.58],
 24         '寧海縣':[121.433654,29.303559],
 25         '象山縣':[121.810224,29.41238],
 26         '余姚市':[121.15,30.03],
 27         '鎮海區':[121.64,30.05],
 28         '鄞州區':[121.644648,29.70591]
 29         };
 30 
 31     var BJData = [
 32         [{
 33             name: '寧波市區'
 34         }, {
 35             name: '北侖區',
 36             value: 10
 37         }],
 38         [{
 39             name: '北侖區'
 40         }, {
 41             name: '慈溪市',
 42             value: 15
 43         }],
 44         [{
 45             name: '慈溪市'
 46         }, {
 47             name: '奉化市',
 48             value:15
 49         }],
 50         [{
 51             name: '奉化市'
 52         }, {
 53             name: '寧海縣',
 54             value:15
 55         }],
 56         [{
 57             name: '寧海縣'
 58         }, {
 59             name: '象山縣',
 60             value: 15
 61         }],
 62         [{
 63             name: '象山縣'
 64         }, {
 65             name: '余姚市',
 66             value: 20
 67         }],
 68         [{
 69             name: '余姚市'
 70         }, {
 71             name: '鎮海區',
 72             value: 15
 73         }],
 74         [{
 75             name: '鎮海區'
 76         }, {
 77             name: '鄞州區',
 78             value:15
 79         }],
 80         [{
 81             name: '鄞州區'
 82         }, {
 83             name: '寧波市區',
 84             value: 15
 85         }]
 86     ];
 87 
 88 
 89 //自定義圖標路徑
 90     var iconPath = 'image://light_icon.png';
 91 
 92     var convertData = function(data) {
 93         var res = [];
 94         for (var i = 0; i < data.length; i++) {
 95             var dataItem = data[i];
 96             var fromCoord = geoCoordMap[dataItem[0].name];
 97             var toCoord = geoCoordMap[dataItem[1].name];
 98             if (fromCoord && toCoord) {
 99                 res.push({
100                     fromName: dataItem[0].name,
101                     toName: dataItem[1].name,
102                     coords: [fromCoord, toCoord]
103                 });
104             }
105         }
106         return res;
107     };
108 
109     var color = ['#a6c84c','#F10900','#00A0E9'];
110     var series = [];
111     [
112         ['', BJData]
113     ].forEach(function(item, i) {
114         series.push({
115             name: item[0],
116             type: 'lines',
117             zlevel: 1,
118             //是否顯示圖標尾部效果
119             effect: {
120                 show: true,
121                 period: 6,
122                 trailLength: 0.6,
123                 color: '#FDF9AC',
124                 symbolSize: 2
125             },
126             lineStyle: {
127                 normal: {
128                     color: color[i+3],
129                     width: 0,
130                     curveness: 0.2
131                 }
132             },
133             data: convertData(item[1])
134         }, {
135             name: item[0],
136             type: 'lines',
137             zlevel: 2,
138             effect: {
139                 show: true,
140                 period: 6,
141                 trailLength:0,
142 //              symbol: planePath,
143 //                symbol: 'arrow',
144                 //自定義圖標
145                 symbol:iconPath,
146                 symbolSize: 10
147             },
148             lineStyle: {
149                 normal: {
150                     color: color[i+1],
151                     width: 1,
152                     opacity: 0.4,
153                     curveness: 0.2
154                 }
155             },
156             data: convertData(item[1])
157         }, {
158             name: item[0],
159             type: 'effectScatter',
160             coordinateSystem: 'geo',
161             zlevel: 2,
162             rippleEffect: {
163                 brushType: 'stroke'
164             },
165             label: {
166                 normal: {
167                     show: true,
168                     position: 'right',
169                     formatter: '{b}'
170                 }
171             },
172             symbolSize: function(val) {
173                 return val[2] / 8;
174             },
175             itemStyle: {
176                 normal: {
177                     color: color[i]
178                 }
179             },
180             data: item[1].map(function(dataItem) {
181                 return {
182                     name: dataItem[1].name,
183                     value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
184                 };
185             })
186         });
187     });
188 
189     option = {
190         //網頁背景部分
191         backgroundColor: '#89C3DB',
192         title: {
193             text: '浙江寧波供電路線',
194             subtext: '數據虛構',
195             left: 'center',
196             textStyle: {
197                 color: '#fff'
198             }
199         },
200         tooltip: {
201             trigger: 'item'
202         },
203         legend: {
204             orient: 'vertical',
205             top: 'bottom',
206             left: 'right',
207             data: [],
208             textStyle: {
209                 color: '#fff'
210             },
211             selectedMode: 'single'
212         },
213         geo: {
214             //
215             map: 'ningbo',
216             label: {
217                 emphasis: {
218                     show: true
219                 }
220             },
221             roam: true,
222             itemStyle: {
223                 normal: {
224                     areaColor: '#008a49',
225                     borderColor: '#4b9673'
226                 },
227                 emphasis: {
228                     areaColor: '#119859'
229                 }
230             }
231         },
232         series: series
233     };
234     if (option && typeof option === "object") {
235         myChart.setOption(option, true);
236     }
237 </script>
238 </body>
239 </html>

View Code

6.關於一些自定義圖標的修改，建議去http://www.iconfont.cn/ 中尋找

比如我的那個閃電圖標就是在這個

Iconfont-阿里巴巴矢量圖標庫

找到的！

這個是echarts中修改自定義圖標的詳細方法！

希望對新手能有所幫助！

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 echarts遷徙圖 echarts地圖遷徙圖 Echarts地圖的遷徙圖 echarts--遷徙圖特性簡介 echarts3 遷徙圖遷入遷出 openlayers6結合echarts4實現遷徙圖 Echarts4+EchartsGL 3D遷徙圖（附源碼） leaflet 結合 Echarts4 實現遷徙圖(附源碼下載) echarts地圖遷徙圖（根據數據設置線的顏色） echarts-遷徙圖地點圖標顏色修改