Vue3 + js-echarts 实现前端大屏可视化

1、前言

此文章作为本人大屏可视化项目的入门学习笔记，以此作为记录，记录一下我的大屏适配解决方案，本项目是基于vite + Vue3 + js + less 实现的，首先看ui，ui是网上随便找的，代码是自己实现的，后面会给出源码地址。

2、方案介绍

这里介绍一下本人用的两种方案的优缺点

方案

实现方式

优点

缺点

scale

1.通过scale属性，根据屏幕大小，

对图表进行整体的等比缩放

1.代码量少，适配简单
2.一次处理后不需要在各个图表中再去单独适配

1.因为是根据 ui 稿等比缩放，当大屏跟 ui 稿的比例不一样时，会出现周边留白情况
2.当缩放比例过大时候，字体会有一点点模糊，就一点点
3.当缩放比例过大时候，事件热区会偏移。

vw vh

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

1.可以动态计算图表的宽高，字体等，灵活性较高
2.当屏幕比例跟 ui 稿不一致时，不会出现两边留白情况

1.每个图表都需要单独做字体、间距、位移的适配，比较麻烦

以上就是两种方案的比较了下面具体介绍一下两种方案的核心代码

2.1、scale解决方案

核心代码，就是获取屏幕的分辨率，与设计稿的分辨率比较得到一个比例，然后通过 scale 进行缩放

// 适配方案先不处理，先把功能实现了先
function handleScreenAuto() {