echarts 生成 迁徙图_Echarts地图的迁徙图
1
2
3
4
5
6
echarts中国地图7
8 .centerItem {9 width: 856px;10 height: 640px;11 background-color: #003077;12 margin: 110px auto 0auto;13 }14
15
16
17
18
19
20
21
22
23
24
25
26
27
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: fromCoord93 }, {94 coord: toCoord95 }]);96 }97 }98 returnres;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: series227 };228 //使用制定的配置项和数据显示图表
229 mapBoxEchart.setOption(mapBoxOption);230 //echart图表自适应
231 window.addEventListener("resize", function() {232 mapBoxEchart.resize();233 });234
235
236
237
238