ECharts3.4 结合Vue.js实现地图下钻

最新推荐文章于 2025-11-11 19:53:34 发布

原创

最新推荐文章于 2025-11-11 19:53:34 发布 · 1.1w 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#地图 #vue-js #echarts3-0 #地图下钻

本文介绍如何使用ECharts在Vue项目中实现地图下钻功能，包括数据准备、地图配置及交互实现等关键步骤。

*最近在做一个需要有地图下钻的项目，考虑用ECharts实现，需要每个省的数据太大，所以此处谨以广东省为例，其他数据可自己添加，先上效果图*

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-z8a3dJnT-1569943253196)(https://img-blog.youkuaiyun.com/20170315113815615?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvQ2x5ZGVLdW8=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)]

*用的是Vue1.0先看代码结构：*

代码结构
因为ECharts3不再内置地图数据，需要自己下载所需的地图ECharts地图下载,index.js将所有的地图文件引进来
这里写图片描述

再看chinaOption.js文件,这是一个混合文件，将地图的设置全部写在这文件

export default{
  data(){
    return{
      provinceList: ["河北","山西","内蒙古","辽宁","吉林","黑龙江","江苏","浙江","安徽","福建","江西","山东","河南","湖北","湖南","广东","广西","海南","四川","贵州","云南","西藏","陕西","甘肃","青海","宁夏","新疆",