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

最新推荐文章于 2024-06-14 15:53:52 发布

xiaojinran

最新推荐文章于 2024-06-14 15:53:52 发布

阅读量3.5w

点赞数 12

分类专栏：大屏展示文章标签： dashboard vue.js html javascript

本文链接：https://blog.csdn.net/xiaojinran/article/details/105712452

版权

大屏展示专栏收录该内容

2 篇文章 1 订阅

订阅专栏

文章目录

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>

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

<div id="demo">
</div>

加入一个davav标签

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

声明一个vue实例

<script>
 var app = new Vue({
   el: '#demo'
  })
</script>

完整代码以及效果如下：

<!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>

在这里插入图片描述

在官方网上还有很多好用并且炫酷的装饰框，可以使用起来，传送门：http://datav.jiaminghi.com/guide/decoration.html

进阶篇

通过第一阶段的尝鲜篇后，我相信你已经感受到了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>

完整代码和效果如下：

<!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>

在这里插入图片描述

数据填充篇

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

实现步骤

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

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

利用进阶篇的果实，对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>

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

   {
  "data": [88, 55],
  "shape": "roundRect"
  }

获取到的内容，会填充到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>

更新后

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

总结

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

xiaojinran

关注

12
点赞
踩
139

收藏

觉得还不错? 一键收藏
10
评论
DataV 你值得拥有的大屏展示工具

DataVVue 大屏数据展示组件库（项目地址： http://datav.jiaminghi.com/），具有以下几个特性：开源免费长期维护，不断添加新组件以丰富组件库开箱即用大部分组件设置宽高或配置简单的数据即可使用视觉绚丽通过组合不同的配置项可以达到多变的视觉效果效果图先来几张作者的效果图，看下DataV的魅力，之前我也试用过阿里云的Datav，觉得还不错，就是...
复制链接

扫一扫