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

毕业一年的萌新,之前是专注于后台开发的,但是无奈公司是个小作坊,前后端要一手包,只能被逼上梁山。工资也低,还没有一个初级后台的工资多,还要做这么多事,一大波牢骚想发泄。这是前话,暂且不表了。

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

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

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

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

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

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

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

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

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