来源于 https://blog.csdn.net/qq_36275889/article/details/83383150
要：终于要开始实现迁徙图了，不过一开始我也是一脸懵。不知道如何下手。在Echarts中查看了好多的案例，终于实现了迁徙效果，但还有个需求还没实现，就是出发点是红色的光圈。目前我的字体颜色和圆圈颜色值是一样，考虑这接下来能不能弄成字体颜色和圆圈颜色不一样。好啦回到迁徙图吧
实现：
1、仔细看了下Echarts中的相关API，写个test文件。
2、在网上查阅大量资料，其中有篇文章写的很详细（参考文章来源: echarts3 迁徙图 迁入迁出）
3、在Echarts的案例上在线修改看效果，如下图所示（当时修改的案例地址，不知道现在还有用吗在线修改的案例）
4、好啦，我把详细代码上传吧
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <title>echarts中国地图</title> 7 <style> 8 .centerItem { 9 width: 856px; 10 height: 640px; 11 background-color: #003077; 12 margin: 110px auto 0 auto; 13 } 14 </style> 15 </head> 16 17 <body> 18 <!-- 中国地图展示 --> 19 <div id="mapBox" class="centerItem"></div> 20 21 <!-- 引入相关文件 --> 22 <script src="js/jquery-3.2.1.min.js"></script> 23 <!-- 引入 ECharts 文件 --> 24 <script src="js/echarts.js"></script> 25 <script src="js/china.js"></script> 26 27 <script> 28 // 基于准备好的dom，初始化echarts实例 29 var mapBoxEchart = echarts.init(document.getElementById(\'mapBox\')); 30 var geoCoordMap = { //可以在地图上显示的城市的坐标信息 31 \'安徽省铜陵\': [117.81154, 30.945515], 32 \'长春\': [125.8154, 44.2584], 33 \'长沙\': [113.0823, 28.2568], 34 \'贵阳\': [106.6992, 26.7682], 35 \'杨凌\': [109.1162, 34.2004], 36 \'深圳\': [114.5435, 22.5439], 37 \'济南\': [117.1582, 36.8701], 38 \'海口\': [110.3893, 19.8516], 39 \'沈阳\': [123.1238, 42.1216], 40 \'武汉\': [114.3896, 30.6628], 41 \'红安\': [114.23, 31.1], 42 \'昆明\': [102.9199, 25.4663], 43 \'杭州\': [119.5313, 29.8773], 44 \'成都\': [103.9526, 30.7617], 45 \'拉萨\': [91.1865, 30.1465], 46 \'天津\': [117.4219, 39.4189], 47 \'合肥\': [117.29, 32.0581], 48 \'呼和浩特\': [111.4124, 40.4901], 49 \'哈尔滨\': [127.9688, 45.368], 50 \'北京\': [116.4551, 40.2539], 51 \'南京\': [118.8062, 31.9208], 52 \'南宁\': [108.479, 23.1152], 53 \'南昌\': [116.0046, 28.6633], 54 \'乌鲁木齐\': [87.9236, 43.5883], 55 \'上海\': [121.4648, 31.2891], 56 \'三亚\': [109.5000, 18.2000] 57 }; 58 var HFData = [ // 数据中name的城市名称必须与geoCoordMap中城市名称一致, 不然关联不上，合肥到各地区的线路 59 [{name: \'合肥\'}, {name: \'长春\',value: 66}], 60 [{name: \'合肥\'}, {name: \'长沙\',value: 66}], 61 [{name: \'合肥\'}, {name: \'贵阳\',value: 66}], 62 [{name: \'合肥\'}, {name: \'杨凌\',value: 66}], 63 [{name: \'合肥\'}, {name: \'深圳\',value: 66}], 64 [{name: \'合肥\'}, {name: \'济南\',value: 66}], 65 [{name: \'合肥\'}, { name: \'海口\',value: 66}], 66 [{name: \'合肥\'}, {name: \'沈阳\',value: 66}], 67 [{name: \'合肥\'}, {name: \'武汉\',value: 66}], 68 [{name: \'合肥\'}, {name: \'昆明\',value: 66}], 69 [{name: \'合肥\'}, {name: \'合肥\',value: 118}], 70 [{name: \'合肥\'}, {name: \'杭州\',value: 66}], 71 [{name: \'合肥\'}, {name: \'成都\',value: 66}], 72 [{name: \'合肥\'}, {name: \'拉萨\',value: 66}], 73 [{name: \'合肥\'}, {name: \'天津\',value: 66}], 74 [{name: \'合肥\'}, {name: \'呼和浩特\',value: 66}], 75 [{name: \'合肥\'}, {name: \'哈尔滨\',value: 66}], 76 [{name: \'合肥\'}, {name: \'北京\',value: 66}], 77 [{name: \'合肥\'}, {name: \'南宁\',value: 66}], 78 [{name: \'合肥\'}, {name: \'南昌\',value: 66}], 79 [{name: \'合肥\'}, {name: \'乌鲁木齐\',value: 66}], 80 [{name: \'合肥\'}, {name: \'上海\',value: 66}] 81 ]; 82 var planePath = \'arrow\'; // 箭头的svg 83 // push进去线路开始-结束地点-经纬度 84 var convertData = function(data) { 85 var res = []; 86 for (var i = 0; i < data.length; i++) { 87 var dataItem = data[i]; 88 var fromCoord = geoCoordMap[dataItem[0].name]; 89 var toCoord = geoCoordMap[dataItem[1].name]; 90 if (fromCoord && toCoord) { 91 res.push([{ 92 coord: fromCoord 93 }, { 94 coord: toCoord 95 }]); 96 } 97 } 98 return res; 99 }; 100 var color = [\'#fff\', \'#FFFFA8\', \'#46bee9\']; //圆圈和字的颜色，线的颜色，箭头颜色 101 // 数据 102 var series = []; 103 // 遍历由合肥到其他城市的线路 104 [ 105 [\'合肥\', HFData] 106 ].forEach(function(item, i) { 107 // 配置 108 series.push({ 109 // 系列名称，用于tooltip的显示 110 name: item[0], 111 type: \'lines\', 112 zlevel: 1, // 用于 Canvas 分层，不同zlevel值的图形会放置在不同的 Canvas 中 113 // effect出发到目的地 的白色尾巴线条 114 // 线特效的配置 115 effect: { 116 show: true, 117 period: 6, // 特效动画的时间，单位为 s 118 trailLength: 0.1, // 特效尾迹的长度。取从 0 到 1 的值，数值越大尾迹越长 119 color: \'#46bee9\', // 移动箭头颜色 120 symbol: planePath, 121 symbolSize: 6 // 特效标记的大小 122 }, 123 // lineStyle出发到目的地 的线条颜色 124 lineStyle: { 125 normal: { 126 color: color[i], 127 width: 0, 128 curveness: 0.2 //幅度 129 } 130 }, 131 data: convertData(item[1]) //开始到结束数据 132 }, { 133 //出发地信息 134 name: item[0], 135 type: \'lines\', 136 zlevel: 2, 137 effect: { 138 show: true, 139 period: 6, 140 trailLength: 0, 141 symbol: planePath, 142 symbolSize: 6 143 }, 144 lineStyle: { 145 normal: { 146 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ 147 offset: 0, 148 color: \'#FFFFA8\' // 出发 149 }, { 150 offset: 1, 151 color: \'#58B3CC \' // 结束 颜色 152 }], false), 153 width: 1.5, 154 opacity: 0.4, 155 curveness: 0.2 156 } 157 }, 158 data: convertData(item[1]) 159 }, { 160 // 目的地信息 161 name: item[0], 162 type: \'effectScatter\', 163 coordinateSystem: \'geo\', 164 zlevel: 2, 165 rippleEffect: { 166 brushType: \'stroke\' 167 }, 168 label: { 169 normal: { 170 show: true, 171 position: \'right\', 172 formatter: \'{b}\' 173 } 174 }, 175 symbolSize: function(val) { 176 return val[2] / 8; 177 }, 178 itemStyle: { 179 normal: { 180 color: color[i] 181 } 182 }, 183 data: item[1].map(function(dataItem) { 184 return { 185 name: dataItem[1].name, 186 value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value]) 187 }; 188 }) 189 }); 190 }); 191 192 // 指定相关的配置项和数据 193 var mapBoxOption = { 194 geo: { 195 map: \'china\', 196 roam: false, // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 \'scale\' 或者 \'move\'。设置成 true 为都开启 197 aspectScale: 0.75, 198 zoom: 1.20, 199 label: { 200 normal: { 201 show: false, 202 textStyle: { 203 color: \'#00a0c9\' 204 } 205 }, 206 emphasis: { // 对应的鼠标悬浮效果 207 show: false, 208 textStyle: { 209 color: "#00a0c9" 210 } 211 } 212 }, 213 itemStyle: { 214 normal: { 215 areaColor: \'#0083ce\', 216 borderColor: \'#0066ba\' 217 }, 218 emphasis: { 219 borderWidth: 0, 220 borderColor: \'#0066ba\', 221 areaColor: "#0494e1", 222 shadowColor: \'rgba(0, 0, 0, 0.5)\' 223 } 224 } 225 }, 226 series: series 227 }; 228 // 使用制定的配置项和数据显示图表 229 mapBoxEchart.setOption(mapBoxOption); 230 // echart图表自适应 231 window.addEventListener("resize", function() { 232 mapBoxEchart.resize(); 233 }); 234 </script> 235 236 </body> 237 238 </html>