# vue3_bigScreen_visual

**Repository Path**: gitee_lw/vue3_big-screen_visual

## Basic Information

- **Project Name**: vue3_bigScreen_visual
- **Description**: vue3大屏可视化项目
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2024-04-25
- **Last Updated**: 2024-08-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

在这我用了`vue + v-scale-screen + dataV`组件来开发这个功能，也可以用`react + r-scale-screen + dataV`来实现，v-scale-screen 和 r-scale-screen 是大屏自适应容器组件，分别基于 VUE 框架的和 react 框架的，如果没有那么多复杂的场景可不考虑使用此组件。

v-scale-screen：
大屏自适应容器组件，可用于大屏项目开发，实现屏幕自适应，可根据宽度自适应，高度自适应，和宽高等比例自适应，全屏自适应（会存在拉伸问题），使用时候请根据 VUE 的版本安装对应的版本，详请阅读[v-scale-screen](https://gitcode.com/Alfred-Skyblue/v-scale-screen)文档。react 请看[r-scale-screen](https://github.com/Alfred-Skyblue/r-scale-screen)

dataV：
大屏可视化组件，具有多种类型的组件可供使用。推荐使用谷歌浏览器，其他浏览器有兼容问题。
使用时注意宽高异常和状态更新的问题。详情请阅读[dataV 文档](http://datav.jiaminghi.com/guide/)。**支持 react 和 vue，vite 作为构建工具的 vue3 无法使用**。vite 版本请参考[vite datav](https://datav-vue3.netlify.app/Guide/Guide.html)，文档时常打不开，但看内容好像和 datav 文档差不多，vue 的文档看 2 版本的，更全面

首先你得有一个 VUE 的环境，这里就不过多介绍和安装 VUE 环境了，直接跳过这一步，然后安装 v-scale-screen 大屏自适应容器组件。

```shell
yarn add v-scale-screen @kjgl77/datav-vue3
```

```html
<template>
  <v-scale-screen width="1920" height="1080">
    <div>你想添加的模块</div>
  </v-scale-screen>
</template>
```

然后我们安装一下 dataV 组件

```js
import { borderBox1 } from "@jiaminghi/data-view";

Vue.use(borderBox1);
```

**有的朋友就会问了，为啥安装了 dataV 组件还要安装 v-scale-screen 组件呢**？dataV 的全屏容器不也可以全屏展示自动进行缩放处理吗。是因为`v-scale-screen`的自适应的效果比较好，阅读过 dataV 文档就就会发现它有很多局限性。但是用`v-scale-screen`包裹一下就不会出现这种问题。

总体的代码片段

```html
<v-scale-screen width="1920" height="1080">
  <div>
    <dv-border-box-1 :color="['red', 'green']" backgroundColor="blue"
      >dv-border-box-1</dv-border-box-1
    >
    <dv-decoration-1 :color="['red', 'green']" />
    你想添加的dataV展示组件。。。
  </div>
</v-scale-screen>
```

charts 组件

[文档](http://charts.jiaminghi.com/config/title.html#offset)

```js
import { Charts } from "@kjgl77/datav-vue3";
```