前段时间在echarts社区,看见别人写的echarts迁徙图,学习并也写了一个
预览地址: https://gallery.echartsjs.com/editor.html?c=xYS-YtzOaf
// http://datav.aliyun.com/tools/atlas 阿里云地图选择器 下载需要的数据包
// 左上角 导入数据 插入到代码
let uploadedDataURL = "/asset/get/s/data-1573454139932-lW0kO573.json" // 标记点
let geoCoordMap = {
'西安': [108.948024, 34.263161],
'铜川': [108.979608, 35.016582],
'宝鸡': [107.14487, 34.369315],
'咸阳': [108.685117, 34.533439],
'渭南': [109.802882, 34.499381],
'延安': [109.49081, 36.596537],
'汉中': [107.028621, 33.077668],
'榆林': [109.741193, 38.290162],
'安康': [109.029273, 32.6903],
'商洛': [109.939776, 33.868319]
} // 给value一个随机值
const mapData = []
for (var key in geoCoordMap) {
mapData.push({
'name': key,
'value': parseInt((Math.random() + 1) * 150)
})
} // 输出json对象数组,value里包含坐标值和随机值
function convertData (data) {
const res = []
for (let i = 0; i < data.length; i++) {
const geoCoord = geoCoordMap[data[i].name]
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value)
})
}
return res
} // 设置目标点, 配置线条指向
function convertToLineData (data) {
const res = []
for (let i = 0; i < data.length; i++) {
// 起点
let fromCoord = geoCoordMap[data[i].name]
// 终点,这里设置的西安
let toCoord = [108.948024, 34.263161]
res.push([
{
coord: fromCoord,
value: data[i].value
},
{
coord: toCoord
}
])
}
return res
} // 解析地图数据包
$.getJSON(uploadedDataURL, (geoJson) => {
// 注册地图,传入数据
echarts.registerMap('echarts', geoJson) optionMap = {
timeline: {
show: false
},
baseOption: {
// 设置地图参数和样式
geo: {
show: true,
map: 'echarts',
roam: true,
zoom: 1,
// 地图中心点, 可调节显示的偏移量
center: [108.348024, 35.463161],
label: {
// 高亮文字隐藏
emphasis: {
show: false
}
},
itemStyle: {
normal: {
borderColor: '#FF0000',
borderWidth: 1,
areaColor: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.8,
colorStops: [{
offset: 0,
// 0% 处的颜色
color: 'rgba(0, 0, 0, 0)'
},
{
offset: 1,
// 100% 处的颜色
color: 'rgba(0, 0, 0, .3)'
}]
},
shadowColor: 'rgba(0, 0, 0, 1)',
shadowOffsetX: -2,
shadowOffsetY: 2,
shadowBlur: 10
},
emphasis: {
// 鼠标悬浮高亮
areaColor: 'gray',
borderWidth: 0
}
}
}
},
options: [{
backgroundColor: '#4A4A4A',
xAxis: {
show: false
},
yAxis: {
show: false
},
series: [{
// 坐标点参数和样式
type: 'effectScatter',
coordinateSystem: 'geo',
data: convertData(mapData),
symbolSize: function (val) {
return val[2] / 10
},
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
label: {
normal: {
formatter: '{b}',
position: 'right',
show: true
}
},
itemStyle: {
normal: {
color: '#FF4500',
shadowBlur: 10,
shadowColor: '#FF4500'
}
}
},
{
// 线条参数和样式
type: 'lines',
// 变化频率
zlevel: 2,
effect: {
show: true,
// 箭头指向速度，值越小速度越快
period: 4,
// 特效尾迹长度,取值0到1,值越大,尾迹越长
trailLength: 0.05,
symbol: 'arrow',
// 图标大小
symbolSize: 5
},
lineStyle: {
normal: {
color: '#FF4500',
// 尾迹线条宽度
width: 1,
// 尾迹线条透明度
opacity: 1,
// 尾迹线条曲直度
curveness: 0.3
}
},
data: convertToLineData(mapData)
}]
}]
}
myChart.setOption(optionMap)
})