# big-screen-template

**Repository Path**: wrpuser/big-screen-template

## Basic Information

- **Project Name**: big-screen-template
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-03-17
- **Last Updated**: 2025-03-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: 大屏示例

## README

# 大屏可视化示例

## 技术栈

vue3 + typescript + vite + echarts + websocket

## 项目描述

提供了一个基于 vw、vh 适配的大屏基础模版，对 echarts、websocket 常用功能进行封装，方便快速开发。

## 适配方案

按照设计稿的尺寸，将 px 按比例转为 vw 和 vh

- 优点：
  - 可以动态计算图表宽高，字体等，灵活性较高
  - 当屏幕比例跟 ui 稿不一致时，不会出现两边留白情况
- 缺点：
  - 每个图表都需要单独做字体、间距、位移的适配，比较麻烦
  - 屏幕宽高比小于 16:9，页面布局可能会错乱

使用 vw、vh 场景：

- vw: width、marginLeft、marginRight、paddingLeft、paddingRight
- vh: height、marginTop、marginButtom、paddingTop、paddingBottom、fontSize

### css 适配

global.scss

```scss
@use "sass:math";

// 默认设计稿的宽度
$designWidth: 1920;
// 默认设计稿的高度
$designHeight: 1080;

// px 转为 vw 的函数
@function vw($px) {
  @return math.div($px, $designWidth) * 100vw;
}

// px 转为 vh 的函数
@function vh($px) {
  @return math.div($px, $designHeight) * 100vh;
}
```

vite.config.ts 配置 global.scss 就可以全局使用 vh vw

```ts
 css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/style/global.scss";`,
      },
    },
  }
```

在 vue 中使用

```vue
<style lang="scss" scoped="scoped">
/*
 直接使用 vw 和 vh 函数，将像素值传进去，得到的就是具体的 vw vh 单位
 */
.box {
  width: vw(300);
  height: vh(100);
  font-size: vh(16);
  background-color: black;
  margin-left: vw(10);
  margin-top: vh(10);
  border: vh(2) solid red;
}
</style>
```

### ts 适配

styleUtil.ts

```ts
// 定义设计稿的宽高
const designWidth = 1920;
const designHeight = 1080;

export const px2vw = (_px: number) => {
  return (_px * 100.0) / designWidth + "vw";
};

export const px2vh = (_px: number) => {
  return (_px * 100.0) / designHeight + "vh";
};
```

### 图表字体、间距、位移等尺寸自适应

echarts 的字体大小只支持具体数值（像素），不能用百分比或者 vw 等尺寸，一般字体不会去做自适应，当宽高比跟 ui 稿比例出入太大时，会出现文字跟图表重叠的情况

dataUtil.ts

```ts
// Echarts图表字体、间距自适应
export const fitChartSizeVw = (size: number, defalteWidth = 1920) => {
  let clientWidth =
    window.innerWidth ||
    document.documentElement.clientWidth ||
    document.body.clientWidth;
  if (!clientWidth) return size / 2;
  let scale = clientWidth / defalteWidth;
  return Number(((size / 2) * scale).toFixed(3));
};

export const fitChartSizeVh = (size: number, defalteHeight = 1080) => {
  let clientHeight =
    window.innerHeight ||
    document.documentElement.clientHeight ||
    document.body.clientHeight;
  if (!clientHeight) return size / 2;
  let scale = clientHeight / defalteHeight;
  return Number(((size / 2) * scale).toFixed(3));
};
```

注意：图表 resize 后字体大小不会变化，需要重新执行 fitChartSizeVw 或 fitChartSizeVh 方法

- 方案 1： 给 option 的属性重新赋值之后 setOption
- 方案 2：销毁图表再重新初始化

## hooks

### useChart

对 echarts 常用功能进行封装，包括图表初始化、resize、图表实例销毁等功能

```ts
import useChart from "@/use/useChart";

const data = toRef(props, "data");
useChart("radarChart", data, getOption);
```

### useWebsocket

对 websocket 常用功能进行封装，包括建立连接、连接成功回调、连接错误回调、连接关闭回调、接收信息回调、心跳检测、重连等功能

```ts
import useWebsocket from "@/use/useWebsocket";

useWebsocket("ws://xxx", () => {});
```