《开源精选》是我们分享Github、Gitee等开源社区中优质项目的栏目，包括技术、学习、实用与各种有趣的内容。本期推荐的是一个中Vue 大屏数据展示组件库——DataV。

DataV是一个基于Vue数据可视化组件库，主要用于大屏数据展示，提供SVG的边框及装饰、图表、水位图、飞线图等组件，简单易用，长期更新。目前React版本已经发布。

安装使用

npm安装

$ npm install @jiaminghi/data-view

使用

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

Vue.use(dataV)

按需引入

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

import { borderBox1 } from @jiaminghi/data-view

Vue.use(borderBox1)

组件

全屏容器

数据可视化页面一般在浏览器中进行全屏展示，全屏容器将根据屏幕比例及当前浏览器窗口大小，自动进行缩放处理。浏览器全屏后，全屏容器将充满屏幕。

<dv-full-screen-container>content</dv-full-screen-container>

Loading加载

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

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

边框

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

dv-border-Box-1

<dv-border-box-1>dv-border-box-1</dv-border-box-1>

dv-border-box-11

<dv-border-box-11 title="dv-border-box-11">dv-border-box-11</dv-border-box-11>

装饰

你可以使用装饰去点缀你的页面，以增强视觉效果，与边框组件相同，他们也是用SVG元素绘制的。

dv-decoration-9

<dv-decoration-9 style="width:150px;height:150px;">66%</dv-decoration-9>

dv-decoration-12

<dv-decoration-12 style="width:150px;height:150px;" />

动态环图

基本示例

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

胶囊柱图

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

飞线图

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

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

增强版飞线图

排名轮播表

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

Demo示例

施工养护综合数据

机电运维管理台

机电设备电子档案