c64a7deb1cc8421d2a61a70e79e0aa3d.png

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...
5802d7ce471c2091e844217bbd27fc0b.png

loading图,原图有动态效果


边框

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

dv-border-box-1
54c4080798cc5eb9e1a0315cef9fab03.png

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


胶囊柱图

4eae4f215862012a74526e7f727a6246.png

胶囊柱图


水位图

855a5ad51abff0a52208f32ed670036b.png

水位图,原图有动态效果


进度池

2f66a2465b7bf04cb026cf399e88f950.png

进度池


飞线池

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

c41348a73aec155e622e0dc1ee050049.png

飞线图,原图有动态效果


锥形柱图

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

6fff44f4b52d839ed35f63243704b7dc.png

锥形柱图


轮播表

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

3c6d87ea99ae665b64fbacfab2373fc0.png

轮播表,原图有滚动效果


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

c2d8f7e1ff249a71f68e0ee1fbe44256.png

施工养护综合数据

a97fb963c8810e7acbf9e8498396a460.png

机电设备电子档案

3617a0b23f149973a598c6f5980e944a.png

机电运维管理

Logo

前往低代码交流专区

更多推荐