DataV - 免费开源的 Vue / React 大屏数据展示组件库,使用简单、效果酷炫的前端数据可视化开发插件

最近公众号有粉丝留言说想找一款数据大屏组件,这篇文章推荐的这款还不错, Vue / React 都可以用。

关于 DataV

DataV 是一款基于 Vue 开发的数据可视化组件库,主要用于开发大屏数据展示页面,(即数据可视化),内置了多种类型组件,让开发者可以轻松构建出专业酷炫、视觉丰富的数据大屏界面

DataV 官网
DataV 官网

需要注意的是,阿里云也有一款叫 DataV 的用于大屏数据展示的付费数据化产品,输入表格数据可以得到大屏数据面板。但今天介绍的 DataV 是一个前端开发组件,两者虽然效果类似,但性质不一样。

DataV 的技术特性

  • 开箱即用,快速构建数据大屏,开发效率很高;
  • 内置了很多用来提升页面视觉效果的 SVG 边框和装饰,逼格满满;
  • 基于 Charts 封装了各式各样的图表,应有尽有;
  • 基于 Vue 2 开发,目前已提供 Vue 3 和 React 版本。

数据大屏是干什么用的?

所谓数据大屏,就像名称一样,就是一块很大的屏幕,上面全是图表和数据,把一些关键数据集中展示在一块巨大的 LED 屏幕上,其实就是巨大化的 Dashboard,科技感(逼格)十足,深受甲方爸爸和老板们的喜爱,一般在交易大厅,展览中心,管控中心,老板办公室等地方可以看到。

作为前端开发者,要手动撸这样的大屏,工作量大不说,没有 UI 的协助,很难做到富有科技感的视觉效果,DataV 就是一款让我们轻松实现数据大屏的 Vue 组件。

开发上手体验和建议

在 Vue 项目中安装和使用

使用 DadaV 很简单,根据官网的开发文档,在 Vue 项目中通过 npm 命令安装:

npm install @jiaminghi/data-view

然后注册为全局组件:

import dataV from '@jiaminghi/data-view'
Vue.use(dataV)

当然也可以按需引入,减少项目打包的体积。

// 只引入某个组件
import { decoration1 } from '@jiaminghi/data-view'
Vue.use(decoration1)

酷炫的边框元素和加载动画

除了数据图表,DadaV 还提供了基于 SVG 的科技感元素,动效优雅,体验极佳,分别是:

  • 增强用户体验的科技感 loading 组件
  • 13款用于图表外部的边框元素,每一款动效和视觉效果都很棒;
  • 12款用来点缀数据页面的装饰效果,与边框组件相同,同样用SVG元素绘制的高性能动画。

有了这些元素,相信可以让我们开发的数据大屏更加专业,科技感爆棚。

边框元素
边框元素
装饰元素
装饰元素

支持的图表类型

DadaV 的图表组件基于 Charts 封装,使用也很简单,只需要将对应图表 option 数据传入组件即可。目前支持下面 11 种图表:

  1. 基础图表(折线图、柱状图等)
  2. 动态环图
  3. 胶囊柱图
  4. 水位图
  5. 进度池
  6. 飞线图
  7. 飞线图增强版
  8. 锥形柱图
  9. 数字翻牌器
  10. 轮播表
  11. 排名轮播表

有了这些内置组件,加上官网提供的详细的代码例子和实时效果,几乎不需要学习什么就可以搭建一个数据大屏了。看看下面几个用 DadaV 构建的几个数据大屏效果吧:

施工养护综合数据大屏
施工养护综合数据大屏
机电系统运维管理控制台
机电系统运维管理控制台
机电设备电子档案
机电设备电子档案

免费开源说明

DataV 是一个免费开源的数据大屏组件,项目源码基于 MIT 开源协议托管在 Github 上,我们可以免费下载来使用,也可以用在个人或者商业项目上。