带有飞线的地图

        1.最近两个项目交替进行着，终于得空巴拉扒拉。直接上图：

        有没有觉得这个地图有点炫酷的感觉呢？哈哈……不得不相信，压力之下还是能出好的产品的。上面是我们使用echarts中很多种map插件组合在一起的的效果，

1.带有飞线；

2.飞线的终点有指示圈；

3.鼠标移动在省份那会有提示框....

完整代码附上仅供参考：

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <meta charset="utf-8">
  5     <title>带有飞线的地图</title>
  6     <script type="text/javascript" src="/static/js/jquery.min.js"></script>
  7     <!-- 引入 echarts.js -->
  8     <script src="/static/js/echarts/echarts.js"></script>
  9     <script src="/static/js/echarts/china.js"></script>
 10     <script src="/static/js/echarts/layer/layer.js"></script>
 11 </head>
 12 <body>
 13     <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
 14     
 15 <div id="main" style="width:100%; height:1000px;"></div>
 16     <script type="text/javascript">
 17         // 基于准备好的dom，初始化echarts实例
 18         var chart = echarts.init(document.getElementById('main'));
 19 
 20          var series = [];//地图展现数据
 21         //24个省市经度纬度
 22         var geoCoordMap = {
 23             '陕西': [109.503789, 35.860026],
 24             '西安': [108.946466, 34.347269],
 25             '甘肃': [103.832478, 36.065465],
 26             '兰州': [103.84044, 36.067321],
 27             '新疆': [87.633473, 43.799238],
 28             '乌鲁木齐': [87.62444, 43.830763],
 29             '内蒙古': [111.772606, 40.823156],
 30             '包头': [109.846544, 40.662929],
 31             '青海': [101.786462, 36.627159],
 32             '西宁': [101.78443, 36.623393],
 33             '宁夏': [106.265605, 38.476878],
 34             '银川': [106.258602, 38.487834],
 35             '四川': [104.073467, 30.577543],
 36             '成都': [104.081534, 30.655822],
 37             '重庆': [106.558434, 29.568996],
 38             '西藏': [91.124342, 29.652894],
 39             '拉萨': [91.120789, 29.65005],
 40             '云南': [101.592952, 24.864213],
 41             '昆明': [102.852448, 24.873998],
 42             '贵州': [106.714476, 26.60403],
 43             '贵阳': [106.636577, 26.653325],
 44             '广西': [108.924274, 23.552255],
 45             '南宁': [108.373451, 22.822607],
 46             '山西': [112.515496, 37.866566],
 47             '太原': [112.534919, 37.873219],
 48             '河南': [101.556307, 34.51139],
 49             '郑州': [113.631419, 34.753439],
 50             '湖北': [112.410562, 31.209316],
 51             '武汉': [114.311582, 30.598467],
 52             '湖南': [111.720664, 27.695864],
 53             '长沙': [112.945473, 28.234889],
 54             '江西': [115.676082, 27.757258],
 55             '南昌': [115.864589, 28.689455],
 56             '安徽': [117.33054, 31.734294],
 57             '合肥': [117.233443, 31.826578],
 58             '上海': [121.480539, 31.235929],
 59             '浙江': [120.159533, 30.271548],
 60             '杭州': [120.215503, 30.253087],
 61             '广东': [113.394818, 23.408004],
 62             '广州': [113.271431, 23.135336],
 63             '北京': [116.413384, 39.910925],
 64             '天津': [117.209523, 39.093668],
 65             '河北': [117.220297, 39.173149],
 66             '唐山': [118.186459, 39.636584],
 67         };
 68         var fromdata = '西安';//默认飞线原点
 69         //初始化飞线数据
 70         var XAData = [
 71             [{name: '西安'}, {name: '乌鲁木齐'}],
 72             [{name: '西安'}, {name: '西宁'}],
 73             [{name: '西安'}, {name: '兰州'}],
 74             [{name: '西安'}, {name: '银川'}],
 75             [{name: '西安'}, {name: '包头'}],
 76             [{name: '西安'}, {name: '太原'}],
 77             [{name: '西安'}, {name: '拉萨'}],
 78             [{name: '西安'}, {name: '成都'}],
 79             [{name: '西安'}, {name: '重庆'}],
 80             [{name: '西安'}, {name: '昆明'}],
 81             [{name: '西安'}, {name: '贵阳'}],
 82             [{name: '西安'}, {name: '广州'}],
 83             [{name: '西安'}, {name: '长沙'}],
 84         ];
 85 
 86         var convertData1 = function (data) {
 87             let res = [];
 88             for (let i = 0; i < data.length; i++) {
 89                 let dataItem = data[i];
 90                 let fromCoord = geoCoordMap[dataItem[0].name];
 91                 let toCoord = geoCoordMap[dataItem[1].name];
 92                 if (fromCoord && toCoord) {
 93                     res.push({
 94                         fromName: dataItem[0].name, toName: dataItem[1].name, coords: [fromCoord, toCoord]
 95                     });
 96                 }
 97             }
 98             return res;
 99         };
100 
101         var convertData2 = function (data) {
102             let res = [];
103             for (var i = 0; i < data.length; i++) {
104                 var geoCoord = geoCoordMap[data[i].name];
105                 if (geoCoord) {
106                     res.push({
107                         name: data[i].name,
108                         value: geoCoord.concat(data[i].value)
109                     });
110                 }
111             }
112             return res;
113         };
114         $.post('/dbapi/price/getfinalprice', {}, function (result) {
115             var resultdatas = [];
116             for (var item of result) {
117                 var obj = {
118                     name: item.city,
119                     value: '<br/>'
120                 };
121                 for (var data of item.datas) {
122                     obj.value += data.tradname + "&emsp;价格" + data.price + "&emsp;" + (!isNaN(data.rise) ? (Number(data.rise) == 0 ? '--' : (Number(data.rise) > 0 ? "<span style='color:red'>涨跌" + data.rise + "</span>" : "<span style='color:green'>涨跌" + data.rise + "</span>")) : '--') + '<br/>';
123                 }
124                 resultdatas.push(obj);
125             }
126             [[fromdata, XAData]].forEach(function (item, i) {
127                 series.push({
128                         name: '西安',
129                         type: 'scatter',
130                         zlevel: 20,
131                         color: '#f00',
132                         coordinateSystem: 'geo',
133                         symbolSize: 10,
134                         itemStyle: {
135                             normal: {color: '#f00'}
136                         },
137                         data: convertData2(resultdatas)
138                     },
139                     {
140                         type: 'lines',
141                         zlevel: 15,
142                         effect: {
143                             show: true, period: 4, trailLength: 0, symbol: 'arrow', symbolSize: 7,
144                         },
145                         lineStyle: {
146                             normal: {width: 1.2, opacity: 0.6, curveness: 0.2, color: '#F19000'}
147                         },
148                         data: convertData1(item[1])
149                     },
150                     //出发点
151                     {
152                         type: 'effectScatter',
153                         coordinateSystem: 'geo',
154                         zlevel: 15,
155                         rippleEffect: {
156                             period: 4, brushType: 'stroke', scale: 4
157                         },
158                         symbol: 'circle',
159                         symbolSize: function (val) {
160                             return 4 + val[2] / 10;
161                         },
162                         itemStyle: {
163                             normal: {show: false}
164                         },
165                         tooltip: {
166                             show: false,
167                         },
168                         data: [{
169                             name: fromdata, value: geoCoordMap[item[0]].concat([100]),
170                         }],
171                     },
172                         /*到达点*/
173                     {
174                         type: 'effectScatter',
175                         coordinateSystem: 'geo',
176                         rippleEffect: {
177                             period: 4, brushType: 'stroke', scale: 4
178                         },
179                         zlevel: 15,
180                         label: {
181                             normal: {
182                                 show: false
183                             }
184                         },
185                         tooltip: {
186                             show: false,
187                         },
188                         symbol: 'circle',
189                         symbolSize: 15,
190                         itemStyle: {
191                             normal: {
192                                 color: '#F19000'
193                             }
194                         },
195                         data: item[1].map(function (dataItem) {
196                             return {
197                                 name: dataItem[1].name,
198                                 value: geoCoordMap[dataItem[1].name].concat([dataItem[1].name]),
199                                 tooltip: {
200                                     formatter: dataItem[0].name + "--" + dataItem[1].name + "：" + dataItem[1].value
201                                 }
202                             };
203                         }),
204                     });
205             });
206 
207             option = {
208                 backgroundColor:"#123456",
209                 color: ['#fc5353', '#f4fc6c', '#e68b55', '#9a68ff', '#ff60c5'],
210                 visualMap: {
211                     min: 1000,
212                     max: 5000,
213                     calculable: true,
214                     right: '32%',
215                     bottom: '6%',
216                     zlevel: 10,
217                     textStyle: {
218                         color: '#fff'
219                     }
220                 },
221                 tooltip: {
222                     trigger: 'item',
223                     formatter: function (params) {
224                         if (params.value) {
225                             return params.name + ' : ' + params.value[2];
226                         } else {
227                             return params.name;
228                         }
229                     }
230                 },
231                 legend: {
232                     orient: 'horizontal',
233                     left: '27%',
234                     top: '5%',
235                     data: ['高线'],
236                     textStyle: {
237                         color: '#ffffff'
238                     },
239                     icon: 'circle'
240                 },
241                 geo: {
242                     map: 'china',
243                     zlevel: 10,
244                     layoutCenter: ['48%', '43%'],
245                     roam: true,
246                     layoutSize: "100%",
247                     zoom: 1.08,
248                     label: {
249                         normal: {
250                             show: true,//地图上的省份名称是否显示
251                             textStyle:{
252                                 fontSize:12,
253                                 color: '#43D0D6'
254                             }
255                         },
256                         emphasis: {
257                             show: true
258                         }
259                     },
260                     itemStyle: {
261                         normal: {
262                             color: '#062031',
263                             borderWidth: 1.1,
264                             borderColor: '#43D0D6'
265                         },
266                         emphasis: {
267                             areaColor: '#43D0D6'
268                         }
269                     }
270                 },
271                 series: series
272             };
273             chart.setOption(option);
274             chart.on('click', function (params) {
275                alert('这是地图点击事件~~~');
276             });
277         });
278     </script>
279 </body>

       其实echarts的官网文档相对来说很友好了，从自己刚入门就接触到现在陆陆续续的使用，很多时候还是可以完美的解决工作中遇到的问题。下篇就来扒拉扒拉关于折线图的那些事……

posted @ 2018-03-29 15:28  郑叶叶  阅读(7304)  评论(3)  编辑  收藏  举报