echarts effectScatter配置项内容和展示

      
var uploadedDataURL = '/asset/get/s/data-1624606927597-hx2E6JWZb.json';

$.get(uploadedDataURL, function (geoJson) {
    myChart.hideLoading();

    echarts.registerMap('city', geoJson);

    var mapData = geoJson.features.map(function (item) {
        // console.log(item.properties);
        return {
            name: item.properties.name,
            value: item.properties.childrenNum,
            cp: item.properties.cp,
        };
    });
    var data = [
        { name: '川汇区', value: 1000, liantong: 15456, yidong: 156778, dianxin: 4545654 },
        { name: '淮阳区', value: 980, liantong: 15456, yidong: 156778, dianxin: 4545654 },
        { name: '商水县', value: 2000, liantong: 15456, yidong: 156778, dianxin: 4545654 },
        { name: '西华县', value: 1500, liantong: 15456, yidong: 156778, dianxin: 4545654 },
        // {name: '项城市', value: 2400, liantong: 15456, yidong: 156778, dianxin: 4545654},
        // {name: '沈丘县', value: 3600, liantong: 15456, yidong: 156778, dianxin: 4545654},
        // {name: '郸城县', value: 2005, liantong: 15456, yidong: 156778, dianxin: 4545654},
        // {name: '鹿邑县', value: 3007, liantong: 15456, yidong: 156778, dianxin: 4545654},
        // {name: '太康县', value: 2035, liantong: 15456, yidong: 156778, dianxin: 4545654},
        // {name: '扶沟县', value: 0, liantong: 15456, yidong: 156778, dianxin: 4545654},
    ];
    const max = 100000,
        min = 900; // todo
    const maxSize4Pin = 100,
        minSize4Pin = 20;
    var areaValue = data;
    var convertData = function (areaValue) {
        var res = [];
        // console.log(mapData);
        for (var i = 0; i < areaValue.length; i++) {
            // var geoCoord = geoCoordMap[data[i].name];
            mapData.forEach((v) => {
                if (v.name == areaValue[i].name) {
                    res.push({
                        name: areaValue[i].name,
                        value: v.cp.concat(areaValue[i].value), //在cp后加上value值
                        liantong: areaValue[i].liantong,
                        yidong: areaValue[i].yidong,
                        dianxin: areaValue[i].dianxin,
                    });
                    // console.log(v.name);
                }
            });
        }

        return res;
    };

    var option = {
        backgroundColor: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 1,
            y2: 1,
            colorStops: [
                {
                    offset: 0,
                    color: '#0f378f', // 0% 处的颜色
                },
                {
                    offset: 1,
                    color: '#00091a', // 100% 处的颜色
                },
            ],
            globalCoord: false, // 缺省为 false
        },
        title: {
            show: true,
            text: '周口市各区县情况 （2021）',
            subtext: '数据来自各集团公司',
            x: 'left',
            textStyle: {
                color: '#fff',
            },
        },
        tooltip: {
            trigger: 'item',

            formatter: function (params, ticket, callback) {
                var text = '区域：' + params.data.name + '<br />';
                text = text + '联通：' + params.data.liantong + ' （户）<br />';
                text = text + '移动：' + params.data.yidong + ' （户）<br />';
                text = text + '电信：' + params.data.dianxin + ' （户）<br />';

                return text;
            },
            show: true,
        },
        toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
                dataView: { readOnly: false },
                restore: {},
                saveAsImage: {},
            },
        },

        geo: {
            show: true,
            type: 'map',
            map: 'city',
            label: {
                normal: {
                    show: true,
                },
                emphasis: {
                    show: true,
                },
            },
            roam: true,
            itemStyle: {
                normal: {
                    areaColor: '#3a7fd5',
                    borderColor: '#0a53e9', //线
                    shadowColor: '#092f8f', //外发光
                    shadowBlur: 20,
                },
                emphasis: {
                    areaColor: '#0a2dae', //悬浮区背景
                },
            },
            zoom: 1.2,
        },
        series: [
            {
                name: '各区县情况',
                type: 'effectScatter',
                // type: 'scatter',
                animation: 20,
                coordinateSystem: 'geo',
                mapType: 'city', // 自定义扩展图表类型
                rippleEffect: {
                    period: 3,
                    scale: 10,
                    brushType: 'fill',
                },
                hoverAnimation: true,
                label: {
                    normal: {
                        show: true,
                        textStyle: {
                            color: '#fff',
                            fontSize: 14,
                        },
                        formatter: '',
                        position: 'left',
                    },
                },
                itemStyle: {
                    normal: {
                        color: 'lightskyblue', // 标志颜色
                    },
                },

                geo: {
                    show: true,
                    type: 'map',
                    map: 'city',
                    label: {
                        normal: {
                            show: false,
                        },
                        emphasis: {
                            show: true,
                        },
                    },
                    roam: true,
                    itemStyle: {
                        normal: {
                            areaColor: '#031525',
                            borderColor: '#3B5077',
                        },
                        emphasis: {
                            areaColor: '#2B91B7',
                        },
                    },
                    zoom: 1.2,
                },

                data: convertData(data),
            },
            {
                type: 'map',
                map: 'city',
                geoIndex: 0,
                aspectScale: 0.75, //长宽比
                showLegendSymbol: true, // 存在legend时显示
                label: {
                    normal: {
                        show: true,
                    },
                    emphasis: {
                        show: true,
                        textStyle: {
                            color: '#fff',
                        },
                    },
                },
                roam: true,
                itemStyle: {
                    normal: {
                        areaColor: '#031525',
                        borderColor: '#FFFFFF',
                    },
                    emphasis: {
                        areaColor: '#2B91B7',
                    },
                },
                animation: false,
                data: convertData(data),
            },
        ],
    };

    /**
	     绑定单击事件，并加载下一级地图
	     */
    myChart.on('click', function (params) {
        console.log('单击了');
    });

    /**
	     绑定双击事件，并加载上一级地图
	     */
    myChart.on('dblclick', function (params) {
        console.log('双击了');
    });

    if (option && typeof option === 'object') {
        myChart.setOption(option);
    }
});