大屏数据可视化，在前端数据展示方面越来越普遍！毕竟这对项目的**高-大-上**有着非常重要的效用~

今天，就为大家分享一款开源免费，开箱即用的组件库：DataV

DataV 是一款基于 Vue 开发的数据可视化组件库，主要用于开发大屏数据展示页面，即数据可视化。

DataV具体怎么样？语言太抽象，让我们来看几个Demo图例

通过DataV就能完成上图中的效果！如果这满足你的预期，我们接着往下看

DataV内置了多种类型组件，让开发者可以轻松构建出专业酷炫、视觉丰富的数据大屏界面。

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

注意：阿里云也有一款叫 DataV 的产品，用于大屏数据展示的付费数据化产品，输入表格数据可以得到大屏数据面板。不要搞混淆了哦~

DataV组件库依赖Vue或React，要想使用它，创建一个Vue/React项目是必须的。

安装

步骤 1：搭建 Vue2 项目

搭建 Vue2 项目不是本文重点，这里就跳过了。大家可以查阅 Vue官网进行了解：https://cn.vuejs.org/

Vue3也是可以的，但Vue3中有些组件还没兼容完成。建议大家用Vue2先

步骤 2：在Vue项目下进行组件库安装。

1
2
3
npm install @jiaminghi/data-view
// or
yarn add @jiaminghi/data-view

使用

1
2
3
import dataV from '@jiaminghi/data-view'

Vue.use(dataV)

也支持按需引入。按需引入仅支持基于ES module的tree shaking，示例如下：

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

Vue.use(borderBox1)

官网
http://datav.jiaminghi.com/

===以上===