大屏数据展示学习

pc.d

发布于 2020.05.12 22:53 阅读 136 评论 0

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群进行反馈,以后如果有大屏展示项目的话,可以考虑使用这个组件库。