前段時間在echarts社區,看見別人寫的echarts遷徙圖,學習並也寫了一個
預覽地址: 點擊傳送
// 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)
})