vue项目echarts绘制地图，实现点击地图弹窗效果（内附各个省json文件）

业务需求：点击地图上的某个市，显示市区的对应的数据信息，运用Echart插件绑定事件。
1、全局引入Echart插件

import Vue from 'vue'
import App from './App.vue'

Vue.prototype.$echarts = Echart;
Vue.use(ElementUI);

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

2、创建vue文件

<template>
    <div class="center-map">
        <div class="center-bg">
            <div id="map"></div>
        </div>
    </div>
</template>

<script>
	//加载地图map.json文件
    import zhejiangMap from './zhejiangMap.json';
    let imgUrl = require('../../assets/img/people.png');
    export default {
        name: "center-box",
        data() {
            return {
                //点击市区弹框所用数据，可以访问后台加载
                list: [
                    {
                        name: "衢州市",
                        arr: [
                            {value: 114, name: '已处理'},
                            {value: 1133, name: '待处理'},
                            {value: 112, name: '警报数'},
                        ]
                    },
                    {
                        name: "杭州市",
                        arr: [
                            {value: 13, name: '已处理'},
                            {value: 90, name: '待处理'},
                            {value: 40, name: '警报数'},
                        ]
                    },
                    {
                        name: "绍兴市",
                        arr: [
                            {value: 113, name: '已处理'},
                            {value: 190, name: '待处理'},
                            {value: 410, name: '警报数'},
                        ]
                    },
                    {
                        name: "金华市",
                        arr: [
                            {value: 1, name: '已处理'},
                            {value: 2, name: '待处理'},
                            {value: 3, name: '警报数'},
                        ]
                    },
                    {
                        name: "丽水市",
                        arr: [
                            {value: 3, name: '已处理'},
                            {value: 4, name: '待处理'},
                            {value: 5, name: '警报数'},
                        ]
                    },
                    {
                        name: "台州市",
                        arr: [
                            {value: 5, name: '已处理'},
                            {value: 6, name: '待处理'},
                            {value: 7, name: '警报数'},
                        ]
                    },
                    {
                        name: "宁波市",
                        arr: [
                            {value: 6, name: '已处理'},
                            {value: 7, name: '待处理'},
                            {value: 8, name: '警报数'},
                        ]
                    },
                    {
                        name: "舟山市",
                        arr: [
                            {value: 7, name: '已处理'},
                            {value: 8, name: '待处理'},
                            {value: 9, name: '警报数'},
                        ]
                    },
                    {
                        name: "嘉兴市",
                        arr: [
                            {value: 88, name: '已处理'},
                            {value: 78, name: '待处理'},
                            {value: 8, name: '警报数'},
                        ]
                    },
                    {
                        name: "湖州市",
                        arr: [
                            {value: 1, name: '已处理'},
                            {value: 23, name: '待处理'},
                            {value: 3, name: '警报数'},
                        ]
                    },
                ],
                box1Data: [
                    {value: 0, name: '已处理'},
                    {value: 0, name: '待处理'},
                    {value: 0, name: '警报数'},
                ]
            }
        },
        methods: {
            getMap() {
            	//注册map数据
                this.$echarts.registerMap('MAP_DATA', zhejiangMap);
                //初始化
                const myChart = this.$echarts.init(document.getElementById('map'));
                // 颜色或文字的配置
                const that = this;

                const option = {
                    geo: {
                        type: 'map',
                        aspectScale: 1, // 横向拉伸
                        // roam: 'scale', // 地图操作 开启缩放或者平移，可以设置成 'scale' 或者 'move'。
                        map: 'MAP_DATA',
                        label: {
                            show: true,
                            normal: {
                                show: true, // 默认地图文字字号和字体颜色
                                fontSize: 11,
                                color: '#323233',
                            },
                            emphasis: {
                                show: true,
                                fontSize: 13, // 选中地图文字字号和字体颜色
                                color: '#323233',
                            },
                        },
                        itemStyle: {
                            normal: {
                                areaColor: '#fcfcfc', // 地图本身的颜色
                                borderColor: '#999', // 省份边框颜色
                                borderWidth: 0.5, // 省份边框宽度
                                borderType: 'dashed', // 省份边框宽度
                                opacity: 1, // 图形透明度
                            },
                            emphasis: {
                                areaColor: '#3c72ff', // 高亮时候地图显示的颜色
                                borderWidth: 0, // 高亮时的边框宽度
                            },
                        },
                        textFixed: {
                            Alaska: [20, -20],
                        },
                    },
                    series: [
                        {
                            type: 'effectScatter',
                            coordinateSystem: 'geo',
                            // symbol: 'circle', // 标记的图形
                            symbol: `image://${imgUrl}`, // 标记的图形
                            // symbolSize: 10,
                            // rippleEffect: {
                            //   period: 3,
                            //   scale: 5,
                            //   brushType: 'fill'
                            // }, // 坐标点动画
                            label: {
                                normal: {
                                    show: true,
                                    position: 'right',
                                    formatter: '{b}',
                                    color: '#3B63C5',
                                    fontWeight: 'bold',
                                    fontSize: 10,
                                },
                            },
                            data: [
                                {
                                    helpName: "衢州市",
                                    name: `12,1`, // 衢州
                                    value: [118.55263, 28.701708],
                                    data: 'Project_mq',
                                },
                                {
                                    helpName: "杭州市",
                                    name: `12,19`, // 杭州
                                    value: [119.350, 29.666],
                                    data: 'Project_mq',
                                },
                                {
                                    helpName: "绍兴市",
                                    name: `1130`, // 绍兴
                                    value: [120.450, 29.600],
                                    data: 'Project_mq',
                                },
                                {
                                    helpName: "金华市",
                                    name: `1140`, // 金华
                                    value: [119.900, 28.930],
                                    data: 'Project_mq',
                                },
                                {
                                    helpName: "丽水市",
                                    name: `1254`, // 丽水
                                    value: [119.400, 27.999],
                                    data: 'Project_mq',
                                },
                                {
                                    helpName: "温州市",
                                    name: `1325`, // 温州
                                    value: [120.300, 27.666],
                                    data: 'Project_mq',
                                },
                                {
                                    helpName: "台州市",
                                    name: `1264`, // 台州
                                    value: [121.000, 28.555],
                                    data: 'Project_mq',
                                },
                                {
                                    helpName: "宁波市",
                                    name: `878`, // 宁波
                                    value: [121.400, 29.500],
                                    data: 'Project_mq',
                                },
                                {
                                    helpName: "舟山市",
                                    name: `1298`, // 舟山
                                    value: [122.106863, 30.000],
                                    data: 'Project_mq',
                                },
                                {
                                    helpName: "嘉兴市",
                                    name: `1325`, // 嘉兴
                                    value: [120.600, 30.450],
                                    data: 'Project_mq',
                                },
                                {
                                    helpName: "湖州市",
                                    name: `1298`, // 湖州
                                    value: [119.700, 30.600],
                                    data: 'Project_mq',
                                },
                            ],
                            // itemStyle: {
                            //   normal: {
                            //     show: true,
                            //     color: '#fff',
                            //     shadowBlur: 20,
                            //     shadowColor: 'red'
                            //   },
                            //   emphasis: {
                            //     areaColor: '#2b5dd4'
                            //   }
                            // }, // 坐标点颜色
                        },
                    ],
                    tooltip: {
                        padding: 3, // 提示框浮层内边距
                        backgroundColor: 'transparent', // 图例背景色
                        borderColor: 'transparent', // 图例的边框颜色
                        borderWidth: 1,
                        //回调方法，监视弹框
                        formatter() {
                            // var value = obj.value;
                            // //这两步就是获取 x 和y 坐标
                            // var yindex = obj.dataIndex;
                            // var xindex = obj.seriesIndex;
                            that.$nextTick(() => {
                                that.getBox1Data('box1');
                            });
                            // 重点是这一步，返回一个DIV模型
                            return '<div id="box1" style="width:380px; height:250px;border: transparent!important;" class=""></div>';
                        },
                        // triggerOn: 'click',
                    },
                };
                myChart.setOption(option);

                //地图点击事件,根据点击的市区，helpName属性去list中获取对应的数据
                myChart.on('mouseover', function (data) {
                    console.log(data);
                    // console.log(data)
                    let helpName = data.data?.helpName;
                    if (helpName) {
                        that.box1Data = that.list.find(item => item.name === helpName).arr
                        // console.log(that.box1Data, 123)
                    }
                });


                // 自适应窗口大小
                window.addEventListener('resize', function () {
                    myChart.resize();
                });
            },

			//弹窗方法
            getBox1Data(id) {
                const box1 = this.$echarts.init(document.getElementById(id));
                const option = {
                    backgroundColor: '#fff',
                    color: ['rgba(91,143,249,0.85)', 'rgba(90,216,166,0.85)', 'rgba(93,112,146,0.85)'],
                    tooltip: {
                        trigger: 'item',
                    },
                    grid: {
                        // width: '10%',
                    },
                    legend: {
                        orient: 'vertical',
                        right: '20',
                        top: 'center',
                        textStyle: {
                            fontSize: 15, //字体大小
                            color: '#9c9c9c', //字体颜色
                        },
                        itemWidth: 10, // 设置宽度
                        itemHeight: 10, // 设置高度
                        itemGap: 30, // 设置间距
                        icon: "circle",
                    },
                    series: [
                        {
                            name: 'Access From',
                            type: 'pie',
                            center: ['40%', '50%'], // 饼图的位置
                            radius: ['50%', '80%'],
                            avoidLabelOverlap: false,
                            // label: {
                            //     show: false,
                            //     position: 'center'
                            // },
                            label: {
                                position: 'inner',
                                formatter: '{c}'
                                // fontSize: 14
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '40',
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: this.box1Data,
                            // itemStyle: {
                            //     borderColor: '#fff',
                            //     borderWidth: 10,
                            // },
                        },
                    ],
                };
                box1.setOption(option);
                // 自适应窗口大小
                window.addEventListener('resize', function () {
                    box1.resize();
                });
            }
        },
        mounted() {
            this.getMap();
        }
    }
</script>

<style scoped lang="scss">
    .center-map {
        width: 100%;
        height: 100%;

        .center-bg {
            position: relative;
            width: 100%;
            height: 100%;

            /*background: url("../../assets/img/map-boat.png") no-repeat 32px 10px;*/
            /*background-size: 120% 130%;*/
        }
    }

    #map {
        width: 660px;
        height: 660px;
        position: absolute;
        top: 0px;
        left: 10px;
    }
</style>

3、项目结构

显示效果：

点击后效果：

下载地址： https://url31.ctfile.com/f/40632231-727356921-e8b3db?
下载码：6798

注意：依赖包有点大，没上传。。，环境配置，需要配置node环境，然后安装所依赖的包，然后运行即可。