大屏可视化dataV

一丶大屏可视化dataV

1. dataV介绍

	组件库基于Vue （React版 (opens new window)） ，主要用于构建大屏（全屏）数据展示页面即数据可视化，具有多种类型组件可供使用：

功能截图:

2.dataV常见组件介绍

快速入门

创建vue项目
并且下载dataV相关依赖
yarn add @jiaminghi/data-view

在vue项目中注册dataV插件,main.js文件中添加如下代码
import dataV from '@jiaminghi/data-view'
Vue.use(dataV)

按需加载可用如下操作:
import { borderBox1 } from '@jiaminghi/data-view'
Vue.use(borderBox1)

3.dataV-全屏容器

1.概念介绍:

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

2.使用dataV的一个注意事项:

TIP：
建议在全屏容器内使用百分比搭配flex进行布局，以便于在不同的分辨率下得到较为一致的展示效果。
使用前请注意将body的margin设为0，否则会引起计算误差，全屏后不能完全充满屏幕。

3.组件的应用

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

4. 装饰

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

装饰的选择:

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

5. 边框

<dv-border-box-1 :color="['red', 'green']" backgroundColor="blue" >dv-border-box-1</dv-border-box-1>

6. 动态环图

<dv-active-ring-chart :config="config1" style="width:25%;height:30vh"></dv-active-ring-chart>

7. 胶囊柱图

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

8.滚动排行

<dv-scroll-ranking-board :config="config5" style="width:25%;height:300px;margin-left: 30px" />

9.滚动表格

<dv-scroll-board :config="config7" style="width:25%;height:30vh;margin-left: 20px;margin-top:20px" />

10.飞线图

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

二丶图片懒加载

1.vue2 图片懒加载

官网地址:https://www.npmjs.com/package/vue-lazyload

1.1依赖下载

yarn add vue-lazyload@1.3.3
或者
npm i vue-lazyload@1.3.3

1.2 main.js中注册插件

// 引入插件
import VueLazyload from 'vue-lazyload'
const loadimage = require('./assets/1.gif')
const errorimage = require('./assets/vue.svg')
// 注册插件
Vue.use(VueLazyload, {
    preLoad: 1.3,
    error: errorimage,
    loading: loadimage,
    attempt: 1
});

1.3 组件中的应用

 <ul>
     <li v-for="img in imgList">
         <img v-lazy="baseURL+img"/>
     </li>
</ul>

2 vue3中的应用

1.依赖的下载

npm i vue3-lazy
或者
yarn add vue3-lazy

2.main.js中注册插件

import Vue3Lazy from 'vue3-lazy'
createApp(App)
    .use(Vue3Lazy, {
        error: './src/assets/vue.svg',
        loading: './src/assets/1.gif',
    }).mount('#app')

3.组件中的应用

<img v-lazy="baseURL+img" v-for="img in imgList"/>

c/assets/vue.svg’,
loading: ‘./src/assets/1.gif’,
}).mount(‘#app’)

#### 3.组件中的应用

```js
<img v-lazy="baseURL+img" v-for="img in imgList"/>