地图echarts 地图配置项内容和展示

配置项如下
      var mapData = echarts.getMap('china').geoJson;
var data = [];
var cpdata = [];
mapData.features.forEach((item) => {
    var value = Math.floor(Math.random() * 100);
    data.push({
        name: item.properties.name,
        value: value,
    });
    cpdata.push({
        name: item.properties.name,
        value: [item.properties.cp[0], item.properties.cp[1], value],
    });
});
console.log(data);
option = {
    backgroundColor:"#222",
    title: {
        text: '地图',
    },

    geo: {
        map: 'china',
        itemStyle: {
            normal: {
                //设置无用 用色块会被map里面覆盖 除非纯色
                areaColor: '#0050af',
                borderWidth: 1,
                borderColor: '#82effc',
                // borderType:'dashed',
                shadowColor: '#82effc',
                shadowBlur: 4,
                // shadowOffsetX: 5,
                // shadowOffsetY: 15,
            },
        },
        emphasis: {
            itemStyle: {
                // areaColor: '#ff0000',
            },
            label: {
                // show:false,
                color: '#ffffff',
            },
        },
    },
    visualMap: {
        show: true,
        type: 'piecewise',
        min: 0,
        max: 100,
        splitNumber: 5,
        inRange: {
            color: ['#313695', '#4575b4', '#abd9e9', '#fdae61', '#a50026'],
        },
    },
    series: [
        {
            type: 'map',
            // map: 'china',
            data: data,
            itemStyle: {
                areaColor: '#A5DCF4', //无数据的颜色
            },
            label: {
                show: false,
                color: '#fff',
                formatter: function (para) {
                    if (para.data && para.data.name && para.data.value) {
                        return para.data.name + ':' + para.data.value;
                    }
                },
            },
        },
        {
            name: '散点',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            // colorBy: 'data',
            data: cpdata,
            symbolSize: 10,
            symbol: 'circle',
            labelLine: {
                show: true,
            },
            label: {
                show: false,
                // offset: [0, -30],
                // formatter: function (params) {
                //     return [params.name, params.data.value[2]].join(':');
                // },
            },
            emphasis: {
                // show: true,
                itemStyle: {
                    opacity: 1,
                },
                symbolSize: 30,
                label: {
                    show: true,
                    offset: [0, -20],
                    formatter: function (params) {
                        return [params.name, params.data.value[2]].join(':');
                    },
                },
            },
            showEffectOn: 'emphasis', //高亮的时候
            itemStyle: {
                color: '#ff0000',
                // shadowColor: '#013C62',
                // shadowBlur: 1,
                // shadowOffsetX: 5,
                // shadowOffsetY: 15,
                opacity: 0.3,
            },
        },
    ],
};
let _t = -1;
setInterval(() => {
    myChart.dispatchAction({
        type: 'downplay',
        seriesIndex: 1,
        dataIndex: (_t - 3) % data.length,
    });
    _t++;
    myChart.dispatchAction({
        type: 'highlight',
        seriesIndex: 1,
        dataIndex: _t % data.length,
    });
}, 2000);

    
截图如下