VUE+Echarts+省市地图钻取(简洁版，超详细)

最新推荐文章于 2024-07-25 17:52:07 发布

熊鲜升

最新推荐文章于 2024-07-25 17:52:07 发布

阅读量1w

点赞数 7

文章标签： javascript vue.js

本文链接：https://blog.csdn.net/xb670078511/article/details/105838854

版权

本文提供了一份简洁版的Vue项目中使用ECharts实现地图从省到市钻取的教程，适合新手操作。内容包括项目背景、准备步骤、代码示例以及注意事项，特别提醒了地图资源的获取、地图文件路径的处理和地图对象的注销等问题。

摘要由CSDN通过智能技术生成

项目需求上需要用到echarts地图向下钻取的功能，网上找了很多资料发现要么太杂乱，加入了一些业务逻辑；要么太高端，不适合新手操作，所以自己结合其他大神写的一些代码总结了一份简洁版地图钻取，希望能帮助到大家。

1、前言：本项目只做了从省到市的钻取，后续有需要会更新市到县的钻取功能，下面是效果图，点击地图钻取省级地图，点击空白处返回全国地图。
在这里插入图片描述

2、下面开始做准备工作，首先在vue项目中引入echarts包，不会的请自行百度。然后将各省市区的地图放入到项目中，放置的位置如下图所示。echarts只提供了全国的地图，其它省市区的地图资源需要自己去找，文章结尾有下载链接，注意里面有可能缺失台湾的数据，我这里用的json数据。
在这里插入图片描述
3、重头戏来了，下面是页面源码

<template>
    <div class="g-home relative">                                     
            <div id="map" ref="myEchart"  @click="showChinaMap"></div>
    </div>
</template>

<script>
import echarts from "echarts";
import '../../../node_modules/echarts/map/js/china.js' // 引入中国地图数据
// import guangdong from '../../../static/province/guangdong.json'
// import fujianfrom '../../../static/province/fujian.json'
export default {
   
    data(){
   
        // var jsonMap = {
   
        //     '广东': guangdong,
        //     '福建': fujian,            
        // };
        // //循环遍历注册地图
        // for (let index in jsonMap) {
   
        //     this.$echarts.registerMap(index, jsonMap[index])
        // }; 

        return {
                                      
            provinces: ['shanghai', 'hebei','shanxi','neimenggu','liaoning','jilin','heilongjiang','jiangsu','zhejiang','anhui','fujian','jiangxi','shandong','henan','hubei','hunan','guangdong','guangxi','hainan','sichuan','guizhou','yunnan','xizang','shanxi1','gansu','qinghai','ningxia','xinjiang', 'beijing', 'tianjin', 'chongqing', 'xianggang', 'aomen', 'taiwan'],
            provincesText: ['上海', '河北', '山西',