# dataView-template-vue3

**Repository Path**: zlApp/data-view-template-vue3

## Basic Information

- **Project Name**: dataView-template-vue3
- **Description**: 基于vue3 + echarts的可视化大屏项目
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-01-28
- **Last Updated**: 2025-10-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 可视化大屏方案

## scale缩放

```css
#app {
  width: 1920px;
  height: 1080px;
  transform-origin: center center;
  position: absolute;
  left: 50%;
  top: 50%;
}
```

+ 引入utils/scale.js

`不会出现高度问题 但是会留白`

## 动态字体+rem+postcss-pxToRem

+ 引入utils/rem.js
+ 配置postcss.config.js

`设置高度时需要注意，特别是使用具体的高度值，在不同高度的分辨率下显示大小会有明显差距`

## 使用vw和vh

```css
#app {
  width: 100vw;
  height: 100vh;
}
```

配置vite.config.js

```js
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: '@use "@/assets/wh.scss" as *;'
      }
    }
  },
```

```css
.my-box {
  width: vw(200);
  height: vh(100);
  background-color: #ccc;
}
```

`全屏和非全屏也会出现固定高度不一致问题`