Tip: 在 ECharts 3 中不再建议在地图类型的图表使用 markLine 和 markPoint。如果要实现点数据或者线数据的可视化，可以使用在地理坐标系组件上的散点图和线图。
本来要画地图感觉很水，结果查了资料发现这么件事，
1 import geoCoordMap from '../../../../common/js/geoCoordMap'; // 各个地理位置的 经纬度 js 文件
import china from '../../../../common/js/china'; // 被 echarts 额外分出来的 一个 中国地理 js 文件没有这两个文件还写不了了。o(╥﹏╥)o
converData() 函数用来 通过名称获取 城市的 经纬度
1 converData (data) { 2 let res = [] 3 for (let i = 0; i < data.length; i ++) { 4 let dataItem = data[i] 5 // 获取 来去 地址的 经纬度 6 let fromCoord = this.geoCoord[dataItem[0].name] 7 let toCoord = this.geoCoord[dataItem[1].name] 8 // debugger; 9 if (fromCoord && toCoord) { 10 res.push({ 11 fromName: dataItem[0].name, 12 toName: dataItem[1].name, 13 coords: [fromCoord, toCoord] 14 }) 15 } 16 } 17 return res 18 }, 19 getScatter (data) { 20 let _self = this 21 let scatter = [] 22 // 获取目的地和 出发地 的 名称 和 经纬度，用来 作为点 的数据 23 scatter = data.map(function(dataItem) { 24 return { 25 name: dataItem[1].name, 26 value: _self.geoCoord[dataItem[1].name] 27 } 28 }) 29 scatter.push({ 30 name: data[0][0].name, 31 value: _self.geoCoord[data[0][0].name] 32 }) 33 return scatter 34 }, 35 drawMap() { 36 let _self = this; 37 let SHData = [ 38 [{name:'上海'},{name:'北京'}], 39 [{name:'上海'},{name:'杭州'}], 40 [{name:'上海'},{name:'舟山'}] 41 ]; 42 let planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z'; 43 44 let option = { 45 title: { 46 text: '迁移情况', 47 textStyle: { 48 fontStyle:'normal', 49 fontSize: 14, 50 }, 51 backgroundColor: '#fff' 52 }, 53 geo: { // 使用地图 作为 图表的 坐标 54 center: [121.4648,31.2891], 55 zoom: 6, // 放大 倍数 56 name: '全国', 57 type: 'map', 58 roam: true, // 鼠标缩放和 平移漫游 59 map: 'china', 60 itemStyle:{ 61 normal:{ 62 borderColor:'white', 63 borderWidth: 3, 64 areaColor: '#c6d9f1' 65 }, 66 emphasis: { 67 areaColor: '#4089d3' 68 } 69 }, 70 }, 71 series: [{ 72 name: '用户行程', 73 type: 'lines', // 飞行的路径线 74 zlevel: 1, 75 effect: { // 尾迹特效 需要单独 放在一个层 76 show: true, 77 period: 6, // 动画时间 78 trailLength: 0.7, // 特效尾迹的长度 79 color: '#fff', 80 symbolSize: 3 81 }, 82 lineStyle: { 83 normal: { 84 color: '#3f73a8', 85 width: 0, 86 curveness: 0.2 // 边的 曲度 87 } 88 }, 89 data: _self.converData(SHData) 90 }, { 91 name: '用户行程', 92 type: 'lines', // 飞机飞行路线的运行效果 93 zlevel: 2, 94 symbolSize: 10, 95 effect: { 96 show: true, 97 period: 6, 98 trailLength: 0, 99 symbol: planePath, 100 symbolSize: 15, 101 }, 102 lineStyle: { 103 normal: { 104 color: '#3f73a8', 105 width: 4, 106 opacity: 0.6, 107 curveness: 0.2 108 } 109 }, 110 data: _self.converData(SHData) 111 }, { 112 name: '用户行程', 113 type: 'effectScatter', // 行程目标地点的 标注 114 coordinateSystem: 'geo', // 使用的坐标系 115 zlevel: 3, 116 rippleEffect: { // 涟漪特效相关配置 117 brushType: 'stoke' 118 }, 119 label: { 120 normal: { 121 show: true, 122 position: 'right', 123 formatter: '{b}' 124 } 125 }, 126 symbolSize: 10, 127 itemStyle: { 128 normal: { 129 color: '#3f73a8' 130 } 131 }, 132 data: _self.getScatter(SHData) 133 }] 134 } 135 this.map.setOption(option); 136 }
效果图：
