vue3 实现 Map 地图区域组件封装

图例：重庆区域

 一、安装echarts

坑：地图echarts版本必须在5.0.0以下，否则不能显示，此处指定安装 [email protected] 即可

cnpm install [email protected] --save

二、下载 “重庆” 区域地图json文件

下载地址：https://www.isqqw.com/geojson

将下载的 json 放至assets下的 img文件夹 中

 三、在需要的页面引入

import * as echarts from "echarts"
import cqMap from './../../assets/img/500000.json'

四、传递的数据结构

其中通过后台返回的数据结构，name 名称必须与下载的 json 文件的name名相等，否则会导致 单击的 data数据为空或显示不出来

let data = [
    { value: 28, name: '万州区' },
    { value: 29, name: '忠县' },
    { value: 30, name: '奉节县' },
    { value: 31, name: '开州区' }
    ......
]

五、echarts 的相关事件操作

//设置默认选中高亮部分
let index = 0;
myCharts.value.dispatchAction({
    type: 'highlight',
    seriesIndex: 0,
    dataIndex: 0
});

// 当鼠标移入时，如果不是第一项，则把当前项置为选中，如果是第一项，则设置第一项为当前项
myCharts.value.on('mouseover', function(e) {
    myCharts.value.dispatchAction({
        type: 'downplay',
        seriesIndex: 0,
        dataIndex: 0
    });
    if (e.dataIndex != index) {
        myCharts.value.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: index
        });
    }
    if (e.dataIndex == 0) {
        myCharts.value.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: e.dataIndex
        });
    }
});

//当鼠标离开时，把当前项置为选中
myCharts.value.on('mouseout', function(e) {
    index = e.dataIndex;
    myCharts.value.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: e.dataIndex
    });
});
myCharts.value.dispatchAction({
    type: 'showTip',
    seriesIndex: 0, // 显示第几个series
    dataIndex: 0 // 显示第几个数据
});

// 点击事件
myCharts.value.on('click', (e) => {
    emit('getRegionByRegionId',e.data)

    myCharts.value.dispatchAction({
        type: 'downplay',
        seriesIndex: 0,
        dataIndex: 0
    });
    if (e.dataIndex != index) {
        myCharts.value.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: index
        });
    }
    myCharts.value.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: e.dataIndex
    });
})

六、创建组件 regionMap.vue

七、页面调用

      希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~