动态实现全国疫情地图

通过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

  • 3
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值