ecahrs全国地图下钻(包括港澳台)

本文介绍如何利用echarts实现全国地图的下钻功能,包括港澳台地区。首先,准备工作涉及获取所有地图数据,可以从官方示例或资源中心下载。接着,展示关键的代码部分,分为js和vue两部分,确保地图能在页面resize事件中响应式展示。
摘要由CSDN通过智能技术生成

一、准备工作

准备所有地图数据
可手动扒 https://gallery.echartsjs.com/editor.html?c=xH1X7vuMyQ
或去本人资源中心下载 https://download.csdn.net/download/jianruoche/10976016

二、代码

  1. js部分
/*
* 本文使用的是地图是echars之前提供的官方地图
* 但是ECharts声明:之前提供下载的矢量地图数据来自第三方,
* 由于部分数据不符合国家《测绘法》规定,目前暂时停止下载服务。
* 建议大家使用以百度地图为底图的形式,见 https://www.echartsjs.com/download-map.html
*
* 关于全国地图二级下钻可以参考 http://gallery.echartsjs.com/editor.html?c=xH1X7vuMyQ
*/

//全国  即一级地图
import china from './data/china.js'

//各省市,包括港澳台  即二级地图
import shanghai from './data/data-1482909900836-H1BC_1WHg.js'
import hebei from './data/data-1482909799572-Hkgu_yWSg.js'
import shanxi from './data/data-1482909909703-SyCA_JbSg.js'
import neimenggu from './data/data-1482909841923-rkqqdyZSe.js'
import liaoning from './data/data-1482909836074-rJV9O1-Hg.js'
import jilin from './data/data-1482909832739-rJ-cdy-Hx.js'
import heilongjiang from './data/data-1482909803892-Hy4__J-Sx.js'
import jiangsu from './data/data-1482909823260-HkDtOJZBx.js'
import zhejiang from './data/data-1482909960637-rkZMYkZBx.js'
import anhui from './data/data-1482909768458-HJlU_yWBe.js'
import fujian from './data/data-1478782908884-B1H6yezWe.js'
import jiangxi from './data/data-1482909827542-r12YOJWHe.js'
import shandong from './data/data-148290
  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值