vue3 echarts散点图省份地图标注-四川省地图城市动态标注散点图

echarts集成省份地图（散点图）通过echarts geoJson方式，以四川省地图标注城市散点为例

先看效果

概述

使用echarts vue3+ts封装地图组件,根据城市地理绘制绘制散点图
echarts绘制地图需要使用geoJson数据DataV.GeoAtlas地理小工具系列
具体截图如下:

vue3代码实现如下

代码例子使用vue3 + ts + setup语法

1. 安装echarts依赖包；
   npm install echarts --save
2. 引入echarts并获取四川省geoJson数据

import * as echarts from 'echarts'; //引入echarts
import sichuanJson from "./sichuan.json"; //引入四川省geoJson数据(也可通过服务器接口获取)
echarts.registerMap('sichuan', sichuanJson as any); //注册绘制四川省地图

3. 实例化echarts对象

const chartRef = ref<echarts.ECharts>() //定义ref
onMounted(() => {
    chartRef.value = echarts.init(document.getElementById(props.id) as HTMLElement);//实力化对象
    chartRef.value?.setOption(option);
})

4. 配置option

let option = {
    width: '833px',
    height: '523px',
    tooltip: {
        tooltip: {
            trigger: 'item',
            showDelay: 0,
            hideDelay: 0,
            enterable: true, //鼠标是否可进入提示框浮层中，默认为false，如需详情内交互，如添加链接，按钮，可设置为 true
            transitionDuration: 0, //提示框浮层的移动动画过渡时间，单位是 s，设置为 0 的时候会紧跟着鼠标移动
            extraCssText: "z-index:100;", //修改标签大小样式等
        },
    }, 
    geo:
    {
        map: 'sichuan',
        type: 'map',
        roam: false,
        label: {
            show: true,
            textStyle: {
                color: '#fff',
                fontSize: 12,
            }
        },
        tooltip: { //设置鼠标移至城市板块选中视图配置选项
            backgroundColor: ' rgba(3,21,42,0.80)', //设置地图高亮时城市视图背景色框
            borderRadius: 0,
            trigger: 'item',
            formatter: (params: any) => {
                return `<div class="map-charts-bar">
                              <span class="text">${params.name}</span>
                        </div>`
            }
        },
        itemStyle: { //设置地图板块配置选项
            areaColor: '#083D7E',
            normal: {
                // 图形的描边颜色
                borderColor: '#55aaff',
                // 描边线宽。
                borderWidth: 1,
                // 柱条的描边类型。
                borderType: 'solid',
                areaColor: '#083D7E',
                label: {
                    // 显示省份下面市、州的名称
                    show: true,
                    textStyle: {
                        color: '#fff',
                        fontSize: 12,
                        fontWeight: 400
                    }
                }
            },
            // 鼠标放上去后，样式改变
            emphasis: {
                // 图形的描边颜色
                borderColor: '#1DF9FC',
                borderWidth: '2',
                // 阴影色
                areaColor: '#3099E2',
                label: {
                    show: true,
                    textStyle: {
                        color: '#fff',
                        fontSize: 10,
                    },
                }
            },
        },
    },
    series:series
} as echarts.EChartsOption;

5. 配置series
   这里的series项根据散点需要多少个颜色标注样式配置数据源,我的例子中使用了三个散点标注颜色所以写了三个配置对象

const series = [
        {
            tooltip: {
                backgroundColor: '',//这里设置鼠标移至城市板块后提示视图透明 
                borderWidth: 0,
                tooltip: {
                    trigger: 'item',
                    showDelay: 0,
                    hideDelay: 0,
                    enterable: true, //鼠标是否可进入提示框浮层中，默认为false，如需详情内交互，如添加链接，按钮，可设置为 true
                    transitionDuration: 0, //提示框浮层的移动动画过渡时间，单位是 s，设置为 0 的时候会紧跟着鼠标移动
                    extraCssText: "z-index:999;", //修改标签大小样式等

                },
                formatter: (params: { data: CityInfo }) => {
                    return mapFormatter(params)
                }
            },
            type: "effectScatter", //effectScatter 特效散点图
            coordinateSystem: "geo",
            rippleEffect: {
                period: 4, //动画时间，值越小速度越快
                brushType: "stroke", //波纹绘制方式 stroke, fill
                scale: 4, //波纹圆环最大限制，值越大波纹越大 4
            },
            itemStyle: {
                color: '#1DF9FC'
            },
            data: []
        },
        {
            tooltip: {
                backgroundColor: '',
                borderWidth: 0,
                tooltip: {
                    trigger: 'item',
                    showDelay: 0,
                    hideDelay: 0,
                    enterable: true, //鼠标是否可进入提示框浮层中，默认为false，如需详情内交互，如添加链接，按钮，可设置为 true
                    transitionDuration: 0, //提示框浮层的移动动画过渡时间，单位是 s，设置为 0 的时候会紧跟着鼠标移动
                    extraCssText: "z-index:999;", //修改标签大小样式等

                },
                formatter: (params: { data: CityInfo }) => { 
                    return mapFormatter(params)
                }
            },
            type: "effectScatter", //effectScatter 特效散点图
            coordinateSystem: "geo",
            rippleEffect: {
                period: 4, //动画时间，值越小速度越快
                brushType: "stroke", //波纹绘制方式 stroke, fill
                scale: 4, //波纹圆环最大限制，值越大波纹越大 4
            },
            itemStyle: {
                color: '#F8D44F'
            },
            data: []
        },
        {
            tooltip: {
                backgroundColor: '',
                borderWidth: 0,
                tooltip: {
                    trigger: 'item',
                    showDelay: 0,
                    hideDelay: 0,
                    enterable: true, //鼠标是否可进入提示框浮层中，默认为false，如需详情内交互，如添加链接，按钮，可设置为 true
                    transitionDuration: 0, //提示框浮层的移动动画过渡时间，单位是 s，设置为 0 的时候会紧跟着鼠标移动
                    extraCssText: "z-index:999;", //将散点等级提高也可修改样式等

                },
                formatter: (params: { data: CityInfo }) => {
                    return mapFormatter(params)
                }
            },
            type: "effectScatter", //effectScatter 特效散点图
            coordinateSystem: "geo",
            rippleEffect: {
                period: 4, //动画时间，值越小速度越快
                brushType: "stroke", //波纹绘制方式 stroke, fill
                scale: 4, //波纹圆环最大限制，值越大波纹越大 4
            },
            itemStyle: {
                color: '#FF4138'
            },
            data: []
        }
    ]

6. 通过props传入城市散点标注信息绘制对应ui

const props = defineProps<{
    id: string, //组件地图id
    list: CityInfo[][] //城市散点图列表数据
}>()

watch(() => props.list, () => {
    (option.series as echarts.SeriesOption[])[0].data = props.list[1];
    (option.series as echarts.SeriesOption[])[1].data = props.list[2];
    (option.series as echarts.SeriesOption[])[2].data = props.list[3];
    chartRef.value?.setOption(option);
})

//最后需要的地方组件中引入并传入城市散点数据源使用
 <ExamMap id="sichuan" :list="cityList"></ExamMap>