// var uploadedDataURL = "/public/data/410000_city.json"; var uploadedDataURL = "https://geo.datav.aliyun.com/areas/bound/410000_full.json"; var myChart = echarts.init(document.getElementById('henan-map')); $.get(uploadedDataURL, function(geoJson) { echarts.registerMap('河南', geoJson); var allData = { "citys": [{ "name": "郑州市", "value": [113.665412,34.757975], "symbolSize": 3, "itemStyle": { "normal": { "color": "#04b9ff" } } }, { "name": "洛阳市", "value": [112.434468,34.663041], "symbolSize": 1, "itemStyle": { "normal": { "color": "#04b9ff" } } }, { "name": "新乡市", "value": [113.883991,35.302616], "symbolSize": 1, "itemStyle": { "normal": { "color": "#04b9ff" } } }, { "name": "开封市", "value": [114.341447,34.797049], "symbolSize": 1, "itemStyle": { "normal": { "color": "#04b9ff" } } }, { "name": "南阳市", "value": [112.540918,32.999082], "symbolSize": 1, "itemStyle": { "normal": { "color": "#04b9ff" } } }, { "name": "鹤壁市", "value": [114.295444,35.748236], "symbolSize": 1, "itemStyle": { "normal": { "color": "#04b9ff" } } }, { "name": "濮阳市", "value": [115.041299,35.768234], "symbolSize": 1, "itemStyle": { "normal": { "color": "#04b9ff" } } }, { "name": "驻马店市", "value": [114.024736,32.980169], "symbolSize": 1, "itemStyle": { "normal": { "color": "#04b9ff" } } } ], "moveLines": [{ "fromName": "郑州市", "toName": "洛阳市", "coords": [ [113.665412,34.757975], [112.434468,34.663041] ] }, { "fromName": "郑州市", "toName": "新乡市", "coords": [ [113.665412,34.757975], [113.883991,35.302616] ] }, { "fromName": "郑州市", "toName": "开封市", "coords": [ [113.665412,34.757975], [114.341447,34.797049] ] }, { "fromName": "郑州市", "toName": "南阳市", "coords": [ [113.665412,34.757975], [112.540918,32.999082] ] }, { "fromName": "郑州市", "toName": "鹤壁市", "coords": [ [113.665412,34.757975], [114.295444,35.748236] ] }, { "fromName": "郑州市", "toName": "濮阳市", "coords": [ [113.665412,34.757975], [115.041299,35.768234] ] }, { "fromName": "郑州市", "toName": "驻马店市", "coords": [ [113.665412,34.757975], [114.024736,32.980169] ] } ] }; option = { backgroundColor:'rgba(128, 128, 128, 0.1)', //rgba设置透明度0.1 title: { text: '', left: 'center', textStyle: { color: '#fff' } }, legend: { show: false, orient: 'vertical', top: 'auto', left: 'right', data: ['地点', '线路'], textStyle: { color: '#fff' } }, geo: { map: '河南', label: { emphasis: { show: false, textStyle: { color: '#fff', } } }, roam: true, itemStyle: { normal: { borderColor: 'rgba(147, 235, 248, 1)', borderWidth: 1, areaColor: { type: 'radial', x: 0.5, y: 0.5, r: 0.8, colorStops: [{ offset: 0, color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色 }, { offset: 1, color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色 }], globalCoord: false // 缺省为 false }, shadowColor: 'rgba(128, 217, 248, 1)', // shadowColor: 'rgba(255, 255, 255, 1)', shadowOffsetX: -2, shadowOffsetY: 2, shadowBlur: 10 }, emphasis: { areaColor: '#389BB7', borderWidth: 0 } } }, series: [{ name: '地点', type: 'effectScatter', coordinateSystem: 'geo', zlevel: 1, rippleEffect: { brushType: 'stroke', period: 7, scale: 26 }, label: { normal: { show: true, position: 'right', formatter: '{b}', textStyle:{ fontSize: 14, color: '#fff' } }, emphasis: { show: true, position: 'right', formatter: '{b}' } }, symbolSize: 2, showEffectOn: 'render', itemStyle: { normal: { color: '#04b9ff', shadowBlur: 10, shadowColor: '#04b9ff' } }, data: allData.citys }, { name: '线路', type: 'lines', coordinateSystem: 'geo', zlevel: 2, large: true, effect: { show: true, period: 4, //箭头指向速度,值越小速度越快 trailLength: 0.02, //特效尾迹长度[0,1]值越大,尾迹越长重 symbol: 'arrow', //箭头图标 symbolSize: 5, //图标大小 }, lineStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#04b9ff' }, { offset: 1, color: '#04b9ff' }], false), width: 1, //尾迹线条宽度 opacity: 1, //尾迹线条透明度 curveness: .3 //尾迹线条曲直度 } }, data: allData.moveLines }] }; myChart.setOption(option); });