Echarts的省市区多级地图下钻和返回

基于Echarts的省市区多级联动

可实现功能:点击省份后直接跳转到该省份地图,点击市之后跳转到该市的地图,右键直接返回上一级

返回实现方法:返回上一级其实也可以用双击但是与进入下一级的单击有冲突,时间差需要控制,所以建议使用右击返回上一级

地图绘制原理:echarts最终效果 展现在canvas上,显示为一个画布,所以只要给出一张地图边缘点的集合,用echarts,准确还说用canvas技术就能画出任何我们想要展示的地图形状。因为现在Echarts观望中已经禁止下载地图了,所以我使用的是全国地图的json文件,在源码中可以有,可以使用。

地图变色原理:在echarts中,地图上的颜色是通过数据来控制的,也就是data中的value,目前代码中使用的是随机数,如果有需要,可以后期自行拼接,就可以得到想要的颜色和数据。

漏洞:其中南海诸岛比较特殊,在json中展示格式不同于其他,所以如果不单独设置,会影响地图的展示。

部分代码示例解析:注释写的比较清晰,在代码中即可看到。


效果展示图如下:其中颜色可以自行控制,代码中有注释



  • 3
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 12
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值