echarts大屏實現中國地圖散點分布

var dataList = []
var data = [];
const geoCoordMap = {};
var myChart = echarts.init(document.querySelector(".map .chart"));//html中地圖顯示區域class

function randomValue() {
    return Math.round(Math.random() * 1000);
}

function mapChart() {
    option = {
        tooltip: {
            backgroundColor: '#023671',
            textStyle: {
                color: '#FFFFFF'
            },
            formatter: function (params, ticket, callback) {
                //console.log(params);
                if (params.seriesType == 'map') {//判斷鼠標懸浮區域 散點還是地圖
                    if (typeof (dataList[params.dataIndex]) == 'undefined') {
                        return "<span style='color:#52FFFF;font-weight:bold'>" + params.name + '</span><br />平台站點：0<br />聯盟站點：0<br />雲站通會員站點：0'
                    }
                    return "<span style='color:#52FFFF;font-weight:bold'>" + dataList[params.dataIndex].name + '</span><br />平台站點：' + dataList[params.dataIndex].value + '<br />聯盟站點：' + dataList[params.dataIndex].sysongy + '<br />雲站通會員站點：' + dataList[params.dataIndex].cloud
                } else {
                    if (params.data.value[2] == 100) {
                        return params.marker + "<span style='color:" + params.color + ";font-weight:bold'>" + params.data.name + '</span><br />平台站點'
                    } else {
                        return params.marker + "<span style='color:" + params.color + ";font-weight:bold'>" + params.data.name + '</span><br />聯盟站'
                    }
                }
            }
        },
        geo: {
            map: 'china',
            roam: false,//不開啟縮放和平移
            zoom: 1.23,//視角縮放比例
            label: {
                normal: {
                    show: true,
                    fontSize: '12',
                    color: '#FFFFFF'
                }
            },
            itemStyle: {
                normal: {
                    borderColor: '#0CBEFF',
                    areaColor: '#1F5B95'
                },
                emphasis: {
                    areaColor: '#0CBEFF',//鼠標選擇區域顏色
                    shadowOffsetX: 0,
                    shadowOffsetY: 0,
                    shadowBlur: 20,
                    borderWidth: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        },
         legend: {
            show: true,
            orient: 'vertical',
            top: 'top',
            left: 'left',
             data: ['聯盟站','平台站點'],
            textStyle: {
                color: '#fff'
            }
        },
        series: [
            {
                name: '省份信息',
                type: 'map',
                geoIndex: 0,
                data: dataList
            },
            {
                name: '平台站點',
                type: 'scatter',
                coordinateSystem: 'geo',
                data: convertData(data,1),
                geoIndex: 0,
                symbolSize: 6,
                itemStyle: {
                    normal: {
                        color:  "#efd551"
                    }
                },
                encode: {
                    value: 2
                },
                label: {
                    formatter: '{b}',
                    position: 'right',
                    color: '#ffffff',
                    show: false
                },
                emphasis: {
                    label: {
                        show: false
                    }
                }

            },
            {
                name: '聯盟站',//此處對應legend
                type: 'scatter', //地圖散點類型
                coordinateSystem: 'geo',
                data: convertData(data,2),
                geoIndex: 0,
                symbolSize: 6,
                itemStyle: {
                    normal: {
                        color:  '#58FAF4',
                    }
                },
                encode: {
                    value: 2
                },
                label: {
                    formatter: '{b}',
                    position: 'right',
                    color: '#ffffff',
                    show: false
                },
                emphasis: {
                    label: {
                        show: false
                    }
                }

            }
        ]
    };
    myChart.setOption(option);
}

const convertData = function (data,type) {
    var res1 = [];
    var res2 =[];
    for (var i = 0; i < data.length; i++) {
        var geoCoord = geoCoordMap["MAP_" + data[i].id];
        if(data[i].value==100){
             if (geoCoord) {
                res1.push({
                    name: data[i].name,
                    value: geoCoord.concat(data[i].value)
                });
             }
        }else{
             if (geoCoord) {
                res2.push({
                    name: data[i].name,
                    value: geoCoord.concat(data[i].value)
                });
             }
        }
    }
    if(type===1){
         return res1;
    }else{
         return res2;
    }

};
// 
myChart.on('click', function (params) {
    alert(params);
});
$.ajax({
    url: 'https://',此處為數據接口位置
    dataType: 'json',
    method: 'get',
    data: {token: token},
    success: function (datas) {
        dataList = datas.datas;
        mapChart();
    },
    error: function () {

    }

})

$.ajax({
    url: 'https://', 此處為數據接口地址
    dataType: 'json',
    method: 'get',
    data: {token: token},
    success: function (datas) {
        for (let i = 0; i < datas.datas.length; i++) {
            eval('geoCoordMap.MAP_' + datas.datas[i].id + '=[' + datas.datas[i].longitude + ',' + datas.datas[i].latitude + ']')
        }
        data = datas.datas;
        mapChart();
    },
    error: function () {
        alert('出錯了');
    }

})

效果圖