ECharts地图使用教程
文章目录
ECharts地图使用教程前言效果图一、Echarts？二、使用步骤1.获取ECharts2.完整代码
总结
前言
前阵子工作中需要的做个地图鼠标触摸的时候展示对应的信息,点击的时候跳转下一级.在对比了高德地图和echarts地图之后果断选择echarts地图,因为echarts做出来的3D效果不错,接下来开始撸代码.
效果图
在这里插入图片描述 是不是也很炫酷哈
一、Echarts？
众所周知Echarts是一个基于 JavaScript 的开源可视化图表库,社区更是有很多好看且大气的可视化图表.
Echarts官方地址
二、使用步骤
1.获取ECharts
从npm获取
npm install echarts
或者是使用地址链接,建议大家使用npm下载.下面代码为了方便大家使用是我单独写的demo,使用的地址链接.粘贴下来就可以直接使用.
2.完整代码
话不多说直接上代码.
这个地方请求了本地文件
async created() {
console.log('执行');
const { data } = await axios.get('./geojson.json');
console.log('data', JSON.stringify(data));
this.dataJson = JSON.stringify(data);
},
下面是两个获取geojson文件的地址 https://datav.aliyun.com/portal/school/atlas/area_selector#&lat=33.50475906922609&lng=104.2822265625&zoom=4 https://hxkj.vip/demo/echartsMap/
总结
echarts地图效果还是比较美观的,根据获取的geojson文件来展示对应的地区.目前只能展示到县区一级,街道乡镇是没有对应的geojson文件的.