vue可视化项目解决方案DataV

桃扇骨 2022-09-14 15:26 578阅读 0赞

### Vue 大屏数据展示组件库 -------------DataV ###

主要用于构建大屏(全屏)，数据展示页面即数据可视化。

### 安装一条龙： ###

npm install @jiaminghi/data-view

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

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

官方文档：

> http://datav.jiaminghi.com/  
> 兼容性：只保证 chrome

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YmN56uv5omO5ZWk_size_13_color_FFFFFF_t_70_g_se_x_16]

#### 全屏容器 ####

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

即最外层容器：  
![在这里插入图片描述][d07410d866c547aa9ae6236b5e28a389.png]

#### loading加载 ####

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

外层全屏容器包括下的 loading组件  
![在这里插入图片描述][ed3e87e445ea4ae7a99d3340a1ac5f1e.png]

![在这里插入图片描述][54526201f4c0458188315192b6c018b9.png]

#### 边框 ####

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

![在这里插入图片描述][211018ed1c0942daaa32d97c3312798a.png]

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YmN56uv5omO5ZWk_size_20_color_FFFFFF_t_70_g_se_x_16]

> http://datav.jiaminghi.com/guide/borderBox.html\#dv-border-box-1

#### 装饰 ####

类似于之前的边框，起点缀作用，增强视觉效果。

<dv-decoration-1 style="width:200px;height:50px;" />

![在这里插入图片描述][bf67a63cfac147e792c426a9c9e2c273.png]

#### 图表 ####

图表基于charts实例封装

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

#### 动态环图 ####

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

##### 包含多种 config属性： #####

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YmN56uv5omO5ZWk_size_17_color_FFFFFF_t_70_g_se_x_16]

类似的还有胶囊柱图，飞线图，进度池，水位图，锥形柱图，数字翻牌器，轮播表，排名轮播表…根据项目实际要求进行使用

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YmN56uv5omO5ZWk_size_13_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/c05cbdbb78b5435a9ee9f6616e8834b5.png
[d07410d866c547aa9ae6236b5e28a389.png]: /images/20220828/b971ca7e449d48a1a9619d2475506f11.png
[ed3e87e445ea4ae7a99d3340a1ac5f1e.png]: /images/20220828/86aec991bcdc494a921f3156e65cd5f5.png
[54526201f4c0458188315192b6c018b9.png]: /images/20220828/0d682cb0b9fa4cfea450f820c4d79534.png
[211018ed1c0942daaa32d97c3312798a.png]: /images/20220828/4183121c74af4ea091898f10cb1e156d.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YmN56uv5omO5ZWk_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/a0e13a3ea7ae4744abe393fc28d121ae.png
[bf67a63cfac147e792c426a9c9e2c273.png]: /images/20220828/4dbc0a36bbc44e91949727af13c43077.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YmN56uv5omO5ZWk_size_17_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/a3a3640ade8246c2958198940919b81e.png