通过Vue实现全国疫情地图
先上效果图!!
- 在这个小DEMO中,使用到获取肺炎感染人数的api接口是: http://interface.sina.cn/news/wap/fymap2020_data.d.json?_=1580892522427
- 因为没有使用后台语言,直接就是前端访问这个接口 所以用到了jsonp 因为jsonp不会涉及跨域问题,这里还是建议,如果有用到node.js的话还是使用axios会比较好
- 地图表格使用的echarts这个插件,能够模拟很多的表格 ,在使用echarts的时候最好还是多多看它的官方文档,因为有很多的配置属性要填写,如果位置写错了,就达不到我们想要的效果了
- echarts主要就是先引入echarts 然后配置options 然后绑定到某一个dom对象上
- 数字的map方法,和forEach方法很像,也是遍历每一个对象 ,但是map方法是有返回值的 而foreach方法是额米有返回值 ,就大概这点不同,别的都是一样的!
完成啦~~ 这个DEMO最大的难点就是echarts这个插件的使用,因为可以模拟很多的图,所以在使用之前一定要看官方文档
https://www.echartsjs.com/zh/index.html