echart中地图上effectScatter

geoIndex:0,//使用geoIndex:0,使geo和type:map用同一个地图组件，map中的itemStyle属性失效，使用geo中的属性
visualMap中的seriesIndex：只针对series中对的数据生效，不定义会影响其它部分数据，我的项目里面用到了visualMap，echarts中visualMap的优先级是最高的。
所以我们可以增加一个属性，seriesIndex，标识让它针对series中第几个元素生效，我第二个元素是散点图，所以只让他对第一个生效即可

<template>
    <div class="hello">
        <div ref="echartCtn" style="width: 500px;height: 400px;background:pink;"></div>
    </div>
</template>

<script>
    // 测试地图中加effectScatter
    import chinaMap from "./china.json";
    const data = [
        { name: '湖北省', value: 50 },
        { name: '湖南省', value: 100 }
    ]
    export default {
        components: {},
        data() {
            return {

            };
        },
        mounted() {
            setTimeout(() => {
                this.init();
            }, 100)
        },
        methods: {
            init() {
                this.$echarts.registerMap('china', {
                    geoJSON: chinaMap
                })
                let myChart = this.$echarts.init(this.$refs.echartCtn);
                let option = {
                    visualMap: {
                        min: 0,
                        max: 100,
                        inRange: {
                            color: ['#F5DEB3', '#FF8C00'] // 颜色范围
                        }，
                        seriesIndex:0,//只针对series中第一个数据对象生效
                    },
                    tooltip: {
                        show: true,
                        formatter(params) {
                            console.log(params)
                            return '19999'
                        },
                        textStyle:{
                            color:'red'
                        }
                    },
                    geo: {
                        map: 'china',
                        show: true,
                        roam: true,//是否支持缩放平移
                        scaleLimit: {
                            min: 0.8,
                            max: 4
                        },
                        label: {
                            emphasis: {
                                show: false
                            }
                        },
                        // 地图的背景色
                        itemStyle: {
                            normal: {
                                areaColor: '#091632',
                                borderColor: '#9adcfa',
                                shadowColor: '#09184F',
                                shadowBlur: 20
                            }
                        },
                    },
                    series: [
                        // 地图部分
                        {
                            name: '测试',
                            type: 'map',
                            mapType: 'china',
                            label: {
                                show: false//是否显示区域地名
                            },
                            geoIndex:0,//使用geoIndex:0,使geo和type:map用同一个地图组件，map中的itemStyle属性失效，使用geo中的属性
                            data: data,
                            itemStyle: {
                                normal: {
                                    borderWidth: 0.5 // 行政区边界线宽度
                                }
                            }
                        },
                        {
                            type: 'effectScatter',
                            coordinateSystem: 'geo',
                            //要有对应的经纬度才显示，先经度再维度
                            data: [
                                { name: '济南', value: [117, 36.67] ,warning:10},
                                { name: '哈尔滨自定义', value: [126.63, 45.75] ,warning:20}
                            ],
                            showEffectOn: 'render',
                            symbolSize(value,params){
                                console.log('设置散点大小')
                                console.log(value)
                                console.log(params)
                                // return 0
                                return params.data.warning
                            },
                            rippleEffect: {
                                scale: 4, // 波纹的最大缩放比例
                                brushType: 'stroke'
                            },
                            itemStyle: {
                                normal: {
                                    color: '#32cd32',
                                    shadowBlur: 10,
                                    shadowColor: '#333'
                                }
                            },
                            emphasis: {
                                itemStyle: {
                                    color: '#f4e925' // 高亮颜色
                                }
                            },
                            zlevel: 1
                        }
                    ]
                };
                myChart.setOption(option);
            }
        }
    };
</script>