可视化大屏开发系列——DataV的使用

兰兰的风吖

已于 2024-06-23 18:03:12 修改

阅读量902

点赞数 20

分类专栏：可视化大屏系列文章标签：可视化大屏数据看板 DataV

于 2024-06-23 17:55:27 首次发布

本文链接：https://blog.csdn.net/pilgrim_121/article/details/139902867

版权

可视化大屏系列专栏收录该内容

5 篇文章 0 订阅

订阅专栏

以下内容为近期个人学习总结，若有错误之处，欢迎指出！

一、介绍

DataV是一款用来做大屏数据展示的组件库，开源免费，配置简单，视觉效果还是很不错的，提供精美的边框和装饰、常见图表（如：仪表盘、折线图、柱状图、饼状图、雷达图）、及其它数据展示样式（如：水位图、轮播表、飞线图等），非常推荐使用。
官网地址：http://datav.jiaminghi.com/

二、注意事项

1、技术支持

DataV提供的功能的实现，官网支持Vue2和React，Vue3还只能使用边框和装饰；

2、兼容性

组件库的开发和调试都使用Chrome浏览器，所以要使用Chrome浏览器哦；

3、状态更新

(后面代码里会详述这种情况)
组件更新数据后，状态可能出现不刷新情况，原因及解决办法：
组件props未设置deep监听，刷新props时，请直接生成新的props对象（基础数据类型除外），或完成赋值操作后使用ES6拓展运算符生成新的props对象（this.someProps = { …this.someProps }）。

三、实现效果

官方Demo效果如下，用户体验很棒，科技感炫酷十足。
源码链接在官网地址http://datav.jiaminghi.com/demo/,大家可自行查找下载学习。
在这里插入图片描述

四、使用（在vue2项目中）

1.npm安装

npm install @jiaminghi/data-view

2.main.js中引入

// 将自动注册所有组件为全局组件
import dataV from '@jiaminghi/data-view'
Vue.use(dataV)

3.开启愉快地玩耍

推荐掌握以下内容：

（1）全屏容器

dv-full-screen-container
全屏容器将根据屏幕比例及当前浏览器窗口大小，自动进行缩放处理。浏览器全屏（按F11）后，全屏容器将充满屏幕。
注意：要在全屏容器内使用百分比+flex布局，这样在不同的分辨率下页面显示效果才能较为一致。

<template>
  <dv-full-screen-container class="all">
    <div class="head">
       <!-- 这里面使用flex布局 -->
    </div>
    <div class="whole">
       <!-- 这里面使用flex布局 -->
    </div>
  </dv-full-screen-container>
</template>

.all {
  .head {
    height: 8%;
    display: flex;
   }
  .whole {
    height: 92%;
    display: flex;
    gap:10px;
  }
}

（2）边框

边框均由SVG元素绘制，体积轻量不失真。边框的颜色支持自定义。推荐一些简约风格（个人喜欢）的精美边框如下：
dv-border-Box-1

<dv-border-box-1>dv-border-box-1</dv-border-box-1>

在这里插入图片描述

dv-border-Box-2
在这里插入图片描述

dv-border-Box-5
在这里插入图片描述

dv-border-Box-6
在这里插入图片描述

dv-border-Box-7
在这里插入图片描述

dv-border-Box-12
在这里插入图片描述

dv-border-Box-13
在这里插入图片描述
边框的具体使用参考学习链接：http://datav.jiaminghi.com/guide/borderBox.html

（3）装饰

装饰也是用SVG元素绘制，用来点缀页面，可增强视觉效果。装饰的颜色支持自定义。推荐两个个人喜欢的精美装饰如下：
dv-decoration-7
在这里插入图片描述

dv-decoration-11
在这里插入图片描述
装饰的具体使用参考学习链接：http://datav.jiaminghi.com/guide/decoration.html

（4）图表

图表组件基于Charts（http://charts.jiaminghi.com/）封装，只需将对应图表option数据传入组件即可。支持各种仪表盘、折线图、柱状图、饼状图、雷达图等。
优点：
A.与echarts相比，配置项确实简单很多很多，实现的视觉效果很强;
B.当窗口发生resize时，图表组件会重新计算宽高以便于自适应
缺点：
适合仅需展示不需交互的场景（我的理解是：如果数据变化，图表将无法重新绘制），所以要谨慎选择，防止无法满足业务需求（如实时刷新数据）。
图表的具体使用参考学习链接：http://datav.jiaminghi.com/guide/charts.html

（5）其它图表推荐

A.水位图

在这里插入图片描述
使用：

<dv-water-level-pond :config="waterConfig" style="width:150px;height:200px" />

export default {
  data(){
    return {
      waterConfig:{
        data: [55],
        shape: 'round'
      }
    }
  },
  mounted () {
    //模拟调用接口，10s后数据发生变化
    setTimeout(() => {
      //方式一：直接生成新的config对象
      // this.waterConfig = {
      //   data: [85],
      //   shape: 'round'
      // }
      //方式二：完成赋值操作后使用ES6拓展运算符生成新的config对象
      this.waterConfig.data = [85]
      this.waterConfig = { ...this.waterConfig }
    }, 10000)
  }
}

PS：上述模拟接口调用的代码要好好体会哦，在调用接口的真实项目中可解决数据变化了但页面状态并未发生变化的情况！

水位图的具体使用参考学习链接：http://datav.jiaminghi.com/guide/waterLevelPond.html

B.轮播表

轮播表可实现滚动列表轮播效果（可单条轮播也可以整页轮播），支持定制个性化元素。单元格（除表头外）支持click事件和mouseover事件。
在这里插入图片描述
轮播表的具体使用参考学习链接：http://datav.jiaminghi.com/guide/scrollBoard.html