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

本文主要是介绍可视化大屏开发系列——DataV的使用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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

一、介绍

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

C.胶囊柱图

胶囊柱图的具体使用参考学习链接：http://datav.jiaminghi.com/guide/capsuleChart.html

D.排名轮播表

排名轮播表的具体使用参考学习链接：http://datav.jiaminghi.com/guide/scrollRankingBoard.html

E.锥形柱图

锥形柱图的具体使用参考学习链接：http://datav.jiaminghi.com/guide/conicalColumnChart.html

注意：排名轮播表和锥形柱图会根据一堆数据某个属性数值的大小自动排序（由高到低），适合排名类数据展示。

好了，DataV的使用到此为止啦！

这篇关于可视化大屏开发系列——DataV的使用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---