DataV构建大屏（全屏）数据展示页面

梨遇

已于 2022-01-28 10:08:32 修改

阅读量2w

点赞数 22

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript DataV

于 2022-01-28 10:02:37 首次发布

官方文档地址：DataV

全局引入

// 将自动注册所有组件为全局组件
import dataV from '@jiaminghi/data-view'
Vue.use(dataV)

按需引入

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

import { borderBox1 } from '@jiaminghi/data-view'
Vue.use(borderBox1)

（1）全屏容器

全屏容器可以根据屏幕比例及当前浏览器窗口大小，自动进行缩放处理。浏览器全屏后，全屏容器将充满屏幕。

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

注意：使用前请注意将body的margin设为0，否则会引起计算误差，全屏后不能完全充满屏幕。

（2）边框

官方文档中给出了边框的使用以及使用效果。

所有边框均支持自定义颜色及背景色，方法如下

<dv-border-box-1 :color="['#0DFFF1','#0E466C']" backgroundColor="blue">dv-border-box-1</dv-border-box-1>

（3）loading加载

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

（4）装饰

SVG元素绘制，增强视觉效果，官方文档中有使用效果

所有装饰均支持自定义颜色，方法如下

<dv-decoration-1 :color="['red', 'green']" />

（5）图表

图表组件基于Charts封装，只需要将对应图表option数据传入组件即可。

<dv-charts :option="option" />

（6）动态环图

基于Charts封装。

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

具体属性详见官方文档动态环图 | DataV

（7）胶囊柱图

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

200万优质内容无限畅学