echarts地图添加涟漪波纹点位

 1.完整代码

chartsOption: {
                tooltip: {
                    trigger: "item",
                    formatter: this.initTooltip,
                    triggerOn: "mousemove",
                    borderColor: "#fff",
                    backgroundColor: "rgba(216, 227, 244, 1)",
                    extraCssText: "border-radius: 14px;", // 设置圆角
                },
                //用于涟漪波纹点位
                geo: {
                    map: "china",
                    // 最好这两个都关掉 否则拖拽和缩放会改变地图三点位置
                    // show: true,
                    // roam: true,
                    zoom: 1.2,
                    scaleLimit: {
                        min: 1,
                    },
                    label: {
                        emphasis: {
                            show: false,
                        },
                    },
                    // 地图的背景色
                    itemStyle: {
                        normal: {
                            areaColor: "rgba(255,255,255,1)",
                            shadowColor: "rgba(1,1,1,1)",
                            borderColor: "#fff",
                            borderWidth: 1,
                            shadowColor: "rgba(255, 255, 255, 1)",
                            shadowBlur: 10,
                            shadowOffsetY: 10
                        },
                    },
                    projection: {
                        project: (point) => [
                            (point[0] / 180) * Math.PI,
                            -Math.log(Math.tan((Math.PI / 2 + (point[1] / 180) * Math.PI) / 2)),
                        ],
                        unproject: (point) => [(point[0] * 180) / Math.PI, ((2 * 180) / Math.PI) * Math.atan(Math.exp(point[1])) - 90],
                    }
                },
                series: [
                    {
                        name: "战区数据",
                        type: "map",
                        map: "china",
                        roam: false,
                        zoom: 1.2,
                        selectedMode: "multiple", // 启用多选
                        scaleLimit: {
                            min: 1,
                        },
                        emphasis: {
                            itemStyle: {
                                areaColor: "rgba(23, 189, 236, 1)", // 高亮状态下的颜色与正常状态相同
                                borderColor: "#fff",
                                borderWidth: 2,
                                shadowBlur: 10, // 阴影模糊效果
                                shadowColor: "rgba(0, 0, 0, 0.5)", // 阴影颜色
                                shadowOffsetX: 0, // 阴影水平偏移
                                shadowOffsetY: 5, // 阴影垂直偏移（实现“变高”效果）
                            },
                            label: {
                                show: false,
                            },
                        },
                        itemStyle: {
                            borderColor: "#fff",
                            borderWidth: 2,
                        },
                        select: {
                            itemStyle: {
                                areaColor: "rgba(23, 189, 236, 1)", // 选中时的颜色
                                borderColor: "#fff",
                                borderWidth: 2,
                                shadowBlur: 10, // 阴影模糊效果
                                shadowColor: "rgba(0, 0, 0, 0.5)", // 阴影颜色
                                shadowOffsetX: 0, // 阴影水平偏移
                                shadowOffsetY: 5, // 阴影垂直偏移（实现“变高”效果）
                            },
                            label: {
                                // show: false,
                            },
                        },
                        projection: {
                            project: (point) => [
                                (point[0] / 180) * Math.PI,
                                -Math.log(Math.tan((Math.PI / 2 + (point[1] / 180) * Math.PI) / 2)),
                            ],
                            unproject: (point) => [(point[0] * 180) / Math.PI, ((2 * 180) / Math.PI) * Math.atan(Math.exp(point[1])) - 90],
                        },
                    },
                    //涟漪波纹点位配置
                    {
                        type: "effectScatter", 
                        coordinateSystem: "geo", //使用地理坐标系 geo
                        //要有对应的经纬度才显示，先经度再维度
                        data: [
                            { name: "西北战区", value: [85.40327,44.120598] },
                            { name: '西南战区', value: [87.059027,32.823035] },
                            { name: '华南战区', value: [108.15847,24.541824] },
                            { name: '华东战区', value: [116.032513,28.837198] },
                            { name: '上海都市圈战区', value: [119.955595,31.865488] },
                            { name: '东北战区', value: [128.119537,46.086026] },
                            { name: '华北战区', value: [108.76558,41.144579] },
                            { name: '华中战区', value: [111.635559,31.459131] },
                            { name: '北京首都圈战区', value: [116.400459,39.902134] },
                        ],
                        showEffectOn: "render", //绘制完成后显示特效
                        rippleEffect: {
                            scale: 5, // 波纹的最大缩放比例
                            brushType: "stroke", // 波纹的绘制方式 stroke fill
                        },
                        hoverAnimation: true,
                        label: {
                            //图形上的文本标签
                            show: true,
                            formatter: "{b}",
                            position: "right",
                            fontWeight: 500,
                            fontSize: 10,
                        },
                        //默认样式
                        itemStyle: {
                            color: "#CC17FA",
                            shadowBlur: 10,
                            shadowColor: "#333",
                        },
                        //鼠标移入时样式
                        emphasis: {
                            show: false,
                            // 每个区域的颜色
                            // 鼠标滑过颜色
                            areaColor: "#97EFF4",
                            // 鼠标滑过边框颜色
                            shadowColor: "#05EFF7",
                            // XY轴的偏移量
                            shadowOffsetX: 5,
                            shadowOffsetY: 5,
                        },
                        zlevel: 1,
                        select: {
                            itemStyle: {
                                color: "#FFF",
                            },
                        },
                    },
                ],
            },

2.效果