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

官方文档地址：DataV

1.安装组件库

• npm安装

  npm install @jiaminghi/data-view

2.使用

全局引入

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

按需引入

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

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

3.实现

（1）全屏容器

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

content

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

（2）边框

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

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

dv-border-box-1

（3）loading加载

Loading...

（4）装饰

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

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

（5）图表

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

 （6）动态环图

基于Charts封装。

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

（7） 胶囊柱图

 具体属性详见官方文档胶囊柱图 | DataV

（8） 水位图

config数据 

export default {
  data: [66]
}

 config数据

export default {
  data: [66, 45],
  shape: 'roundRect'
}

 config数据  

export default {
  data: [55],
  shape: 'round'
}

（9） 进度池

 具体属性详见官方文档进度池 | DataV

（10）飞线图 

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

具体开启dev模式及属性详见官方文档飞线图 | DataV

 （11）锥形柱图

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

 （12）数字翻牌器

const config1 = {
  number: [100],
  content: '{nt}个'
}

const config2 = {
  number: [999],
  content: '{nt}个'
}

export default [
  config1,
  config2
]

具体属性详见官方文档数字翻牌器 | DataV 

（13） 轮播表

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

 具体属性详见官方文档轮播表 | DataV

（14） 排名轮播表

排名轮播表同轮播表类似，也可以选择单条轮播或整页轮播。

具体属性详见官方文档排名轮播表 | DataV 

4.官方Demo 

 

 5.代码

这里简单列举几个。

（1）图表的使用

实现效果 

  

 （2）边框的使用

实现效果

 

（3）轮播表

实现效果