echarts学习之——电力迁徙图（一）

时间：2017-01-11 15:48:06 阅读：993 评论：0 收藏：0 [点我收藏+]

标签：container tle gen title null normal div 图标 symbols

今天主要就是在搞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>