首页>学习区>前端开发>DataV 你值得拥有的大屏展示工具
回复
« 返回列表
gogogo
gogogo
管理员
管理员
  • UID25
  • 粉丝0
  • 关注0
  • 发帖数1384
写私信
阅读：5925回复：1

DataV 你值得拥有的大屏展示工具

楼主#
更多 发布于：2020-10-23 12:55


文章目录

数据填充篇总结




DataV

  • Vue 大屏数据展示组件库（项目地址： http://datav.jiaminghi.com/），具有以下几个特性：开源免费
    长期维护，不断添加新组件以丰富组件库
  • 开箱即用
    大部分组件设置宽高或配置简单的数据即可使用
  • 视觉绚丽
    通过组合不同的配置项可以达到多变的视觉效果


效果图

  • 先来几张作者的效果图，感受下DataV的魅力，之前我也试用过阿里云的Datav，觉得还不错，就是对于我们这种学习的爱好者，实在承担不起费用，除非有老板或者项目赞助还能玩一玩。




怎么玩

  • 技术知识储备：Javascript
  • Html + Div + Css
  • Vue或者React
  • 后端接口技术开发
大概有以上的知识储备就可以愉快地玩耍了，不要求精通，但是需要了解，不懂就百度，谷歌，菜鸟教程，总能找到相应的解决方法，再不行就留言我呗，我们一起百度谷歌。

尝鲜篇

  • 在DataV项目里面，有很多看起来很洋气的装饰框，用得好，绝对会让你的大屏看起来更加具有科技感，这些使用时最简单的，只需要一个div和一个vue实例即可。首先引入vue和datav的js包

<script src="https://unpkg.com/vue"></script> <script src="https://unpkg.com/@jiaminghi/data-view/dist/datav.map.vue.js"></script>
  • 1
  • 2

  • 建立一个div并赋值一个编号

<div id="demo"> </div>
  • 1
  • 2

  • 加入一个davav标签

<dv-decoration-9 style="width:150px;height:150px;">66%<\/dv-decoration-9>
  • 1

  • 声明一个vue实例

<script> var app = new Vue({ el: '#demo' }) </script>
  • 1
  • 2
  • 3
  • 4
  • 5

  • 完整代码以及效果如下：

<!DOCTYPE html> <html> <head> <title>DataV</title> <script src="https://unpkg.com/vue"></script> <!--调试版--> <script src="https://unpkg.com/@jiaminghi/data-view/dist/datav.map.vue.js"></script> </head> <body> <div id="demo"> <dv-decoration-9 style="width:150px;height:150px;">66%</dv-decoration-9> </div> <script> var app = new Vue({ el: '#demo' }) </script> </body> </html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19




进阶篇

  • 通过第一阶段的尝鲜篇后，我相信你已经感受到了datav的简单易用之处了，接下来，我们来使用davav上面提供的其他组件，来为我们的数字提供翅膀，让我们的领导和客户甲方满意。
  • 这里呢，我用的davav的一个水位图做示例，其他的组件使用基本大同小异，datav提供的水位图传送门：http://datav.jiaminghi.com/guide/waterLevelPond.html，从官方提供的样例来看，效果还是比较不错的。


实现步骤

  • 首先跟尝鲜篇一样操作，不同的是，这里的datav多了一个变量:config，这个是这个组件的配置数据，需要通过vue实例进行填充。
  • 新建一个vue，并且定义config属性

 <script> var app = new Vue({ el: '#demo', data: { "config": { "data": [66, 45], "shape": "roundRect" } } }) </script>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

  • 完整代码和效果如下：

<!DOCTYPE html> <html> <head> <title>DataV</title> <script src="https://unpkg.com/vue"></script> <!--调试版--> <script src="https://unpkg.com/@jiaminghi/data-view/dist/datav.map.vue.js"></script> </head> <body> <div id="demo"> <dv-water-level-pond :config="config" style="width:150px;height:200px" /> </div> <script> var app = new Vue({ el: '#demo', data: { "config": { "data": [66, 45], "shape": "roundRect" } } }) </script> </body> </html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25




数据填充篇

  • 通过以上的两篇内容，发挥你的才智和想象布局能力，我相信你可以设计出一个非常优秀好看，并且科技满满的大屏了。
  • 但是，到目前为止，我们的数据都是通过页面进行写死的，无法实时地获取并且刷新，这样的大屏数据反应不及时，仅适用于长期的静态数据或者宣传大屏。
  • 接下来，我将教你如何利用vue+axios异步地去请求数据，并加载。


实现步骤

  • 首先，引入axios，这是vue2.0推荐的异步请求数据的技术

<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
  • 1

  • 利用进阶篇的果实，对vue的实例进行修改，修改如下：

 <script> var app = new Vue({ el: '#demo', data: { "config": { "data": [85, 15], "shape": "roundRect" } }, methods :{ getdata: function(){ axios .get('/static/demo.json') .then(response => (this.config = response.data)) .catch(function (error) { // 请求失败处理 console.log(error); }); } }, mounted() { //this.timer = setInterval(()=>{this.getdata();},1000); this.getdata(); } }) </script>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28

  • 说明一下，这里再vue实例中，增加了一个method，名称为getdata，这个方法使用了axios，异步地去请求了数据，并且赋值给了config属性，异步获取的json文件内容如下

 { "data": [88, 55], "shape": "roundRect" }
  • 1
  • 2
  • 3
  • 4

  • 获取到的内容，会填充到vue对象中的config属性，从而完成数据的更新
  • 有了方法后，就要有动作去触发它，这里利用了vue对象的mounted生命周期，在这个生命周期中调用这个方法，完成数据的更新操作。另外如果需要定时更新，可以添加一个timer进行实现，具体可见注释的代码。
  • 完整的代码和效果如下

<!DOCTYPE html> <html> <head> <title>DataV</title> <script src="https://unpkg.com/vue"></script> <!--调试版--> <script src="https://unpkg.com/@jiaminghi/data-view/dist/datav.map.vue.js"></script> <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script> </head> <body> <div id="demo"> <dv-water-level-pond :config="config" style="width:150px;height:200px" /> </div> <script> var app = new Vue({ el: '#demo', data: { "config": { "data": [85, 15], "shape": "roundRect" } }, methods :{ getdata: function(){ axios .get('/static/demo.json') .then(response => (this.config = response.data)) .catch(function (error) { // 请求失败处理 console.log(error); }); } }, mounted() { //this.timer = setInterval(()=>{this.getdata();},1000); this.getdata(); } }) </script> </body> </html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43


  • PS：这个涉及到数据请求，存在CORS安全问题，需要把这两个文件一起放到静态服务器上面才能看到效果。


总结

  • 这个datav可以满足日常的大屏组件的需求，使用起来也相对比较简单，不需要什么高深的前端知识就能快速完成组件的开发，并且效果还是比较不错，推荐大家使用。
喜欢0
回复
游客


关于我们联系我们牵手合作问题反馈 苏ICP备16002051号-1

Powered by PHPwind v9.0.2 & Design by 苍穹任尔翔 ©2018-20388090社区版权所有

返回顶部