echarts遷徙圖

前段時間在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)
})