首页 前端知识 Vue3 js-echarts 实现前端大屏可视化

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

2024-08-16 22:08:55 前端知识 前端哥 900 388 我要收藏

1、前言

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

2、方案介绍

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

方案实现方式优点缺点
scale

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

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

1.代码量少,适配简单
2.一次处理后不需要在各个图表中再去单独适配
1.因为是根据 ui 稿等比缩放,当大屏跟 ui 稿的比例不一样时,会出现周边留白情况
2.当缩放比例过大时候,字体会有一点点模糊,就一点点
3.当缩放比例过大时候,事件热区会偏移。
vw vh1.按照设计稿的尺寸,将px按比例计算转为vwvh1.可以动态计算图表的宽高,字体等,灵活性较高
2.当屏幕比例跟 ui 稿不一致时,不会出现两边留白情况
1.每个图表都需要单独做字体、间距、位移的适配,比较麻烦

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

2.1、scale解决方案

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

// 适配方案先不处理,先把功能实现了先
function handleScreenAuto() {
  const designDraftWidth = 1920; //设计稿的宽度
  const designDraftHeight = 1080; //设计稿的高度

  // 根据屏幕的变化适配的比例,这么处理,可能会出现留白问题,可以通过控制背景色与主题色相匹配,来降低留白的影响
  // 当 设备宽高比 > 16/9时,两边出现留白
  // 当 设备宽高比 < 16/9时,上下出现留白
  // 接下来写样式就直接通过px来写即可
  const screenWidth =
    window.innerWidth ||
    document.documentElement.clientWidth ||
    document.body.clientWidth;
  const screenHeight =
    window.innerHeight ||
    document.documentElement.clientHeight ||
    document.body.clientHeight;

  // x y轴自适应缩放
  const scaleX = screenWidth / designDraftWidth;
  const scaleY = screenHeight / designDraftHeight;

  // 设置缩放中心点 很重要否则,当是2560 * 1440 、  3840 * 2160等分辨率时,会出现向上偏移
  document.querySelector(".home-page").style.transformOrigin = "0 0";
  // 缩放比例
  document.querySelector(
    ".home-page"
  ).style.transform = `scale(${scaleX}, ${scaleY})`;
}

有了上面这段核心代码,接下来,我就在写样式的 时候,就可以直接使用 px写样式代码了

2.2、vw vh解决方案

这个解决方案相对会复杂一点,但是也还好,这个方案的核心代码有

1、样式方面的代码

@charset "utf-8";

// 默认设计稿的宽度
@designWidth: 1920;

// 默认设计稿的高度
@designHeight: 1080;

/*
  将px转成 vw
  其实就是 1920 = 100vw
  @name: 需要转换的属性名
  @px: 需要转换的数值
  例如
  width: 20px
  .vw(width, 20)
  结果就是 width: 20 / 1920 * 100vw = 10.416666666666666vw
  vh 同理
*/
.vw(@name, @px) {
  @{name}: (@px / @designWidth) * 100vw;
}

// px 转成 vh
.vh(@name, @px) {
  @{name}: (@px / @designHeight) * 100vh;
}

.px2font(@px) {
  font-size: (@px / @designWidth) * 100vw;
}

当然还需要在我们的样式入口文件 ,引入一下(根据实际使用的,在对应的地方引入即可)

然后还需要再vite.config.js配置一下,这样我们在.vue文件写样式的时候,就可以直接使用,我们定义的样式方法了

css: {
    preprocessorOptions: {
      less: {
        // 方便在vue文件写样式的时候,可以直接使用 .vw .vh 方法
        additionalData: `@import "@/styles/vw-vh.less";`
      }
    }
  }

如果我们想要在.less使用定义好的方法则需要,在对应的样式文件引入

 

经过上述的配置,就可以使用了,使用的地方

这里还需要去适配一下,echarts 图图表的字体、间距、等,需要另外定义一个方法,原理与scale类似

/**
 * @param {*} size 实际样式值
 * @param {*} designWidth 设计稿的宽度
 * @returns 返回一个缩放后的值
 */
export const fitChartSize = (size, designWidth = 1920) => {
  // 获取设备的设计宽度
  let clientWidth = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
  if (!clientWidth) return size;
  // 设计宽度 / 设计宽度 就是我们要的 缩放比
  let scale = (clientWidth / designWidth);
  return Number((size * scale).toFixed(3));
}

2.3、总结

        如果我们制展示数据,也可以接受一定的留白,可以施一公scale方案,留白可以通过设置背景色与主题色一致,可以减轻留白的影响,如果我们想要图形无论是不是 与设计稿比例一致,都让图形铺满屏幕,那就可以考虑使用vw vh方案,其实还有一种网上还有一种 rem vw vh方案,但是我觉得和scale 方案的效果差不多,就没有加进来,下面是源码地址,master 是scale方案,dev-vwvh 是vwvh 方案

源码地址

转载请注明出处或者链接地址:https://www.qianduange.cn//article/15898.html
标签
评论
发布的文章

XML与JSON的使用

2024-08-23 21:08:27

npm i 常见问题

2024-08-23 20:08:23

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!