datav

前面猪猪侠已经分享了很多数据大屏可视化的精美模板，都是小编浪里淘沙一点一点收集起来的，感兴趣的小伙伴们可以进入猪猪侠主页直接获取大屏可视化模板，完全免费的哦。

古人有云，授人以鱼不如授人以渔，基于这方面的考虑，所以猪猪侠这次给大家带来了数据大屏可视化的一套工具DataV。

首先来介绍一下，DataV是干什么的？

1. DataV是一个基于Vue的数据可视化组件库（有vue版本和react版本，今天主要介绍vue版本）
2. 提供用于提升页面动态视觉效果svg边框和装饰
3. 提供常用的图标(loading加载，边框，装饰，图表，动态环图，胶囊柱图，水位图，进度池，飞线图，锥形柱图，数字翻牌器，轮播表等等)

如何使用

创建vue项目

组件库依赖vue，要想使用它，首先要创建一个vue项目

// 1.安装vue-cli
// npm i -g @vue/cli 或者 yarn global add @vue/cli

// 2.创建Vue项目
// vue create datav-project

安装

// cd datav-project
// npm install @jiaminghi/data-view 或者 yarn add @jiaminghi/data-view

使用

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

Vue.use(dataV)

按需引用

import { borderBox1 } from '@jiaminghi/data-view'

Vue.use(borderBox1)

详细的文档可以参展官网文档

组件介绍

loading加载

数据尚未加载完成时，可以显示Loading效果，增强用户体验。

<dv-loading>Loading...</dv-loading>

loading图，原图有动态效果

边框

边框均由SVG元素绘制，体积轻量不失真，它们的使用极为方便

<dv-border-box-1 :color="['red', 'green']" backgroundColor="blue" >dv-border-box-1</dv-border-box-1>

dv-border-Box-1，原图有动态效果

胶囊柱图

<dv-capsule-chart :config="config" style="width:300px;height:200px" />

胶囊柱图

水位图

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

水位图，原图有动态效果

进度池

<dv-percent-pond :config="config" style="width:200px;height:100px;" />

进度池

飞线池

设置一个中心点，若干飞线点，即可得到动态飞线图，组件提供的dev模式可以帮你快速配置飞线点位置。

<dv-flyline-chart :config="config" style="width:100%;height:100%;" />

飞线图，原图有动态效果

锥形柱图

锥形柱图是特殊的柱状图，它将根据数值大小，降序排列锥形柱，适合排名类数据展示。

<dv-conical-column-chart :config="config" style="width:400px;height:200px;" />

锥形柱图

轮播表

轮播表可以单条轮播也可以整页轮播，支持点击事件，展示数据使用v-html渲染，因此你可以传递html字符串，定制个性化元素。

<dv-scroll-board :config="config" style="width:500px;height:220px" />

轮播表，原图有滚动效果

最后还是要给大家发福利，哈哈哈，三套基于datav的大屏可视化模板。

施工养护综合数据

机电设备电子档案

机电运维管理