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

基于Echarts的省市区多级联动

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

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

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

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

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

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

Echarts的省市区多级地图下钻和返回_第1张图片

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

Echarts的省市区多级地图下钻和返回_第2张图片

Echarts的省市区多级地图下钻和返回_第3张图片

Echarts的省市区多级地图下钻和返回_第4张图片

你可能感兴趣的:(Echarts)