Datav学习-新冠肺炎数据展示练习项目

1. 什么是datav

datav是一个个人开发的开源免费专门用于大屏数据展示的组件库，文档地址：http://datav.jiaminghi.com/

2. 项目数据来源

这个例子中使用的数据来自第三方api提供商，本来想在github找一个用node.js做的后台，但是找了很久都是用python做的，就找了一个免费的（天行数据）。

3. 项目效果

除了美国这四个图的数据是假的（api中查询出来的是全球所有重要城市的数据，不太好弄），其他的都是获取的实时数据。

4. 遇到的问题

（1）组件中的边框是通过svg实现的，边框内的元素进行布局时为了避免产生样式冲突，边框显示异常，作者让在border-box-content的div中进行布局，但是自己在编写的时候出现了一个问题：样式设置不上，但是边框子组件中的元素却能设置，中间卡了好几个小时，因为使用的人数还不多，也百度不到原因，最后通过demo源码进行比对，去掉vue css中的scoped就设置正常了，现在还不知道为什么，以后好好学习一下vue的css作用域。

（2）图标、表格等数据赋值后图表不刷新，作者给的原因和解决方法（组件props均未设置deep监听，刷新props时，请直接生成新的props对象（基础数据类型除外），或完成赋值操作后使用ES6拓展运算符生成新的props对象（this.someProps = { ...this.someProps }）。）

5. 总结

这个datav本人感觉很不错，利用它可以通过很少的代码实现比较炫酷的效果，虽然是个人开发的，但是github也一直在更新，有bug可以加他们的qq群进行反馈，以后如果有大屏展示项目的话，可以考虑使用这个组件库。