Vue 引入echart 地图(省市地图)

使用场景

echart 上面的地图示例有了很大的变化,根据现在的项目需求,需要加载到省市级别也可能到县区级别的,随机某个地区都有可能,怎么随意加载各地区地图呢。

开始

地区图来源

http://datav.aliyun.com/tools/atlas/#&lat=51.59217252564636&lng=118.76513097945013&zoom=7.5
阿里云的,随便选中一个区域,自己体会哈,这个地方会有地区树结构数据,然后保存下来,保存成为一个json文件即可。
我用青岛区域举个例子。

图片.png

图表使用

地区json 文件引入vue 重,这个地方要先注册地图才能使用,注册函数举个例子,详细的请看echart 官方文档举例子
this.$echarts.registerMap('QD', { geoJSON: qingdaoMap })
如果需要增加标注之类的,自己研究研究,我这里也举了一个栗子,举了好几个已经,累了。

上代码







效果图

图片.png

你可能感兴趣的:(Vue 引入echart 地图(省市地图))