vue3+echarts绘制中国地图在省份上标记数值，实现点击高亮效果

用于记录项目中插件的使用方法！

echarts我用的是@4.9.0版本

npm i echarts@4.9.0

地图数据我用的是echarts库自带的数据

import 'echarts/map/js/china.js';

实现数字显示在区域上方

series: [

            {

                type: "scatter",

                coordinateSystem: "geo",

                data: [

                    {

                        name: "北京",

                        value: [

                            116.405285,

                            39.904985

                        ],

                        num: 123

                    }

                ],

                // 可以添加更多标记点

                label: {

                    normal: {

                        show: true,

                        formatter: (params) => {

                            return params.data.num;

                        },

                        textStyle: {

                            color: "#3096ff",

                            fontSize: 12,

                            backgroundColor: "#fff",

                            shadowColor: "#999",

                            shadowBlur: 8,

                            shadowOffsetY: 5,

                        },

                        borderRadius: 24,

                        padding: 4,

                        width: 16,

                        lineHeight: 16,

                        align: "center",

                    },

                },

                itemStyle: {

                    normal: {

                        color: "#F62157", // 标记点颜色

                    },

                },

            },

        ],

实现点击高亮

    map.off('click'); //这里解决多次触发点击事件

    map.on('click', async (params) => {

        console.log(params)

        if (params.seriesType != "map") return;

        if (selectedArea.value) {

            map.dispatchAction({

                type: 'downplay',

                seriesIndex: 0,

                dataIndex: selectedArea.value

            });

        }

        map.dispatchAction({

            type: 'highlight',

            seriesIndex: 0,

            dataIndex: params.dataIndex

        });

        selectedArea.value = params.dataIndex;

        console.log(params)

    })

实现点击出现弹窗

 tooltip: {

            // 鼠标是否可以进入悬浮框

            enterable: false,

            // 触发方式 mousemove, click, none, mousemove|click

            triggerOn: 'click',

            // item 图形触发， axis 坐标轴触发， none 不触发

            trigger: 'item',

            // 背景色

            backgroundColor: 'rgba(255,255,255,0.5)',

            textStyle: {

                color: "#000"

            },

            confine: false,

            transitionDuration: .2,

            padding: 10,

            formatter: function (params) {

                return '<div class="chartLabel">' +

                    '<div class=title>' + params.name + '</div>' +

                    '</div>'

            }

        },

全部代码

<template>

    <div>

        <div ref="china_map" style="height: 450px;width: 100%"></div>

    </div>

</template>

<script setup lang="ts">

import * as echarts from "echarts";

import { ref, reactive, toRefs, onMounted } from "vue"

import 'echarts/map/js/china.js'; // 核心文件  

// 省份数据

 

const china_map = ref();

const isChina = ref(true); // 默认显示中国地图

const emit = defineEmits(['showChange']);

const selectedArea = ref();

// 中国地图点击省份 显示当前省份的详细的地区。

const chinaMapHidden = (map) => {

    map.off('click'); //这里解决多次触发点击事件

    map.on('click', async (params) => {

        console.log(params)

        if (params.seriesType != "map") return;

        if (selectedArea.value) {

            map.dispatchAction({

                type: 'downplay',

                seriesIndex: 0,

                dataIndex: selectedArea.value

            });

        }

        map.dispatchAction({

            type: 'highlight',

            seriesIndex: 0,

            dataIndex: params.dataIndex

        });

       

        selectedArea.value = params.dataIndex;

        console.log(params)

    })

}

// 渲染地图

const chinaMaprsult = (name = null) => {

    let chinaMap = echarts.init(china_map?.value)

    const options = {

        title: {

            text: '',

            left: 'center',

            textStyle: {

                color: '#fff'

            }

        },

        tooltip: {

            // 鼠标是否可以进入悬浮框

            enterable: false,

            // 触发方式 mousemove, click, none, mousemove|click

            triggerOn: 'click',

            // item 图形触发， axis 坐标轴触发， none 不触发

            trigger: 'item',

            // 背景色

            backgroundColor: 'rgba(255,255,255,0.5)',

            textStyle: {

                color: "#000"

            },

            confine: false,

            transitionDuration: .2,

            padding: 10,

            formatter: function (params) {

                return '<div class="chartLabel">' +

                    '<div class=title>' + params.name + '</div>' +

                    '</div>'

            }

        },

        geo: {

            map: name ? name : "china", // 核心

            zoom: 1.2,

            // roam: 'scale', //是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启

            label: { // 页面初始化加载的文字

                normal: {

                    show: true,

                    textStyle: {

                        color: "#ccc", // 页面初始化的地图文字颜色

                        fontSize: 10 // // 页面初始化的地图文字大小

                    },

                },

            },

            itemStyle: { //设置样式

                normal: {

                    areaColor: 'rgba(48, 82, 153, 0.5)', // 区域的颜色

                    borderColor: '#59e2f9' //边框颜色

                },

                emphasis: {

                    areaColor: 'rgb(44, 165, 198, 0.9)' // 鼠标悬浮区域颜色

                }

            },

            emphasis: {

                label: {

                    color: '#fff' // 鼠标悬浮文字颜色

                }

            },

        },

        series: [

            {

                type: "scatter",

                coordinateSystem: "geo",

                data: [

                    {

                        name: "北京",

                        value: [

                            116.405285,

                            39.904985

                        ],

                        num: 123

                    }

                ],

                // 可以添加更多标记点

                label: {

                    normal: {

                        show: true,

                        formatter: (params) => {

                            return params.data.num;

                        },

                        textStyle: {

                            color: "#3096ff",

                            fontSize: 12,

                            backgroundColor: "#fff",

                            shadowColor: "#999",

                            shadowBlur: 8,

                            shadowOffsetY: 5,

                        },

                        borderRadius: 24,

                        padding: 4,

                        width: 16,

                        lineHeight: 16,

                        align: "center",

                    },

                },

                itemStyle: {

                    normal: {

                        color: "#F62157", // 标记点颜色

                    },

                },

            },

        ],

    }

    chinaMap.setOption(options)

    chinaMapHidden(chinaMap)

}

onMounted(() => {

    chinaMaprsult('china');

})

</script>

<style scoped></style>