datav数据可视化_数据⼤屏可视化⼯具篇—DataV
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效果，增强⽤户体验。
<
loading图，原图有动态效果
边框
边框均由SVG元素绘制，体积轻量不失真，它们的使⽤极为⽅便dv-border-box-1
dv-border-Box-1，原图有动态效果
胶囊柱图
胶囊柱图
⽔位图
⽔位图，原图有动态效果
进度池
进度池
飞线池
设置⼀个中⼼点，若⼲飞线点，即可得到动态飞线图，组件提供的dev模式可以帮你快速配置飞线点位置。
飞线图，原图有动态效果
锥形柱图
锥形柱图是特殊的柱状图，它将根据数值⼤⼩，降序排列锥形柱，适合排名类数据展⽰。
锥形柱图
轮播表
轮播表可以单条轮播也可以整页轮播，⽀持点击事件，展⽰数据使⽤v-html渲染，因此你可以传递html字符串，定制个性化元素。
轮播表，原图有滚动效果
最后还是要给⼤家发福利，哈哈哈，三套基于datav的⼤屏可视化模板。
borderbox
施⼯养护综合数据
机电设备电⼦档案
机电运维管理

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。