XX数量-驻马店市echarts effectScatter配置项内容和展示

自定义tootip的实验,上传完json、拿去改改坐标什么的可以直接用

配置项如下
      //引入市区json文件
var uploadedDataURL = "/asset/get/s/data-1597452450339-dQm5JP9rx.json";


myChart.showLoading();
$.getJSON(uploadedDataURL, function(geoJson) {
    echarts.registerMap('china', geoJson);
    myChart.hideLoading();
    //地理位置信息
    var geoCoordMap = {
        '遂平县': [114.015819, 33.150944],
        '上蔡县': [114.276256, 33.267906],
        '西平县': [114.022143, 33.394355],
        "驿城区": [114.006045, 32.978599],
        '确山县': [114.033641, 32.810768],
        "泌阳县": [113.335694, 32.731107],
        "汝南县": [114.375141, 33.016389],
        "正阳县": [114.398138, 32.615372],
        "平舆县": [114.629254, 32.969876],
        "新蔡县": [114.979952, 32.752487]

    };
    //数据信息
    var data = [{
            name: "遂平县",
            value: 199
        },
        {
            name: "上蔡县",
            value: 170
        },
        {
            name: "西平县",
            value: 102
        },
        {
            name: "驿城区",
            value: 81
        },
        {
            name: "确山县",
            value: 147
        },
        {
            name: "泌阳县",
            value: 130
        },
        {
            name: "汝南县",
            value: 172
        },
        {
            name: "正阳县",
            value: 123
        },
        {
            name: "平舆县",
            value: 120
        },
        {
            name: "新蔡县",
            value: 292
        }
    ];
    var max = 480,
        min = 9; // todo 
    var maxSize4Pin = 100,
        minSize4Pin = 20;

    var convertData = function(data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
            var geoCoord = geoCoordMap[data[i].name];
            if (geoCoord) {
                res.push({
                    name: data[i].name,
                    value: geoCoord.concat(data[i].value)
                });
            }
        }
        return res;
    };


    option = {
        backgroundColor: '#404a59',
        title: {
            text: 'XX数量-驻马店市',

            left: 'center',
            textStyle: {
                color: '#fff'
            }
        },
        tooltip: {
            trigger: 'item',

            //自定义修改显示
            formatter: function(value) {
                                                          //这只能填2,不太明白,希望大神指教
                return res = '<div><p>数量:' + value.data.value[2] + '</p></div>'

            },
        },

        geo: {
            map: 'china',
            center: [114.006045, 32.978599],
            zoom: 12,
            label: {
                emphasis: {
                    show: false
                }
            },
            roam: true,
            itemStyle: {
                normal: {
                    areaColor: '#323c48',
                    borderColor: '#111'
                },
                emphasis: {
                    areaColor: '#2a333d'
                }
            }
        },
        series: [{
            name: 'pm2.5',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            data: convertData(data),
            symbolSize: function(val) {
                return val[2] / 10;
            },
            showEffectOn: 'render',
            rippleEffect: {
                brushType: 'stroke'
            },
            hoverAnimation: true,
            label: {
                normal: {
                    formatter: '{b}',
                    position: 'right',
                    show: true
                }
            },
            itemStyle: {
                normal: {
                    color: '#f4e925',
                    shadowBlur: 10,
                    shadowColor: '#333'
                }
            },
            zlevel: 1
        }]
    };
    myChart.setOption(option);
});
    
截图如下