天天看点

echarts如何实现地图的下钻功能,实现省市县三级联动

背景:毕业不到一年的菜鸟

如何实现地图的省市县下钻功能。刚开始拿到这个需求的我是一脸懵逼的,echart都不怎么熟的我,只能边学边做了。网上倒是有很多大神写的代码,大神就是大神,代码又高级又没有注释,对于一个萌新来说,真的看懂还是有点难度的,只能边猜边看api了。也把自己的一点体会写来,大家一起成长。

首先,三级联动其实一点也不难,大家不要被这个功能吓到了,其实只要实现了一个基本的中国地图,到省市县就可以依葫芦画瓢了。只有两个关键点,第一个关键点就是导入省份数据(js或者json格式都行),然后在代码里引入进来,现在百度不能下载地图啦,只能自己找资源啦。我导的是json格式的数据。第二个关键点就是把series的map动态换成你要显示的那个省份名字。

echarts如何实现地图的下钻功能,实现省市县三级联动

第一次写博客,好久没这样写作文了,放弃了,不写了=。=

先展示一下写完的样子,留作纪念。

echarts如何实现地图的下钻功能,实现省市县三级联动
echarts如何实现地图的下钻功能,实现省市县三级联动
echarts如何实现地图的下钻功能,实现省市县三级联动

点击字也能实现联动效果。样式有点丑哈,也没设计啥样式,先凑合着就这样吧(我很懒的,遁了)

继续阅读