可视化大屏开发，知道了这些经验以及解决方案，效率至少提升2倍！（上）

攻城师不浪
13,025 阅读7分钟

Hello大家好，我是日拱一卒的攻城师不浪，专注前端、后端、AI学习、二三维可视化、GIS等学习沉淀，这是2024年输出的第13/100篇文章，欢迎志同道合的朋友一起学习交流；

前言

从毕业之后，自己就一直在做TOC的业务比较多，网站、H5、小程序等。

自从回到了二线城市，发现二线做自己产品的公司少之又少，而做政府或者企业的业务偏多，也就是数据可视化大屏，数字孪生类的业务较多。

因此我不得不从熟悉的TOC转为做TOG的业务，虽然现在自己主要负责公司的技术类产品的设计与研发，但是也主动包揽了2个项目的大屏开发工作，也是自己想体验并熟悉一下这块的业务开发，积累一下不同的经验。

大屏开发的特点

开发完两个大屏之后，我总结了一下大屏开发与TOB业务开发一些不同点或者说难搞的一些点。

组件封装

  • TOB：类似于后台管理这些系统，市面上一般都已经有比较好看且相对成熟的组件库或者相关插件了，可以直接拿来使用。
  • 大屏：大屏对应UI的要求还是蛮高的，而且基本上每个项目的大屏的UI设计都是相差巨大的，很难去封装好一个组件而用在多个项目里。

响应式设计

  • TOB：后台管理系统一般很少做响应式开发，大部分都是会设置一个最小宽度，当屏幕宽度小于该宽度的时候会出现滚动条。还有一类是做了响应式，使用的是rem方案，主要用的是根据屏幕大小去动态修改像素值。
  • 大屏：大屏就必须得做响应式了，而方案也是有很多，目前主流的大屏响应式方案主要是缩放以及rem方案。

动效开发

  • TOB：后台管理一般很少要求开发酷炫的动效，大多都比较朴素，与大屏的定位不同，后台管理追求的是功能好用，能够覆盖业务使用，用户体验好就行。

  • 大屏：而大屏的定位就不一样了，领导们都喜欢比较酷炫的效果，因此它必须得秀起来，越酷炫领导越高兴，就觉得越牛X，签合同的概率就越大。因此大屏要求开发很多酷炫的效果，这就要求前端开发人员要熟悉CSS3等技术，要有一定的审美。

011d6a748bf465714d97dee1821dd213.gif

二维三维

  • TOB：后台管理不用说了，都是二维开发，顶多加个echarts图表，看起来稍微秀一点，还是得益于echarts自己的动效封装😂。
  • 大屏：大屏开发很多时候会涉及到三维开发，例如数字孪生领域，会有一些三维模型，三维动效需要加载，这时候可能就会涉及到一些三维开发技术：Unreal，Unity3D，threejs，babylon.js等。

除了三维，还会涉及到一些地图以及GIS的应用。这时候又会涉及到很多GIS方面的前端框架，例如：openlayers、mapbox、leaflet、cesiumjs、高德地图等。

说到GIS，又会涉及到很多GIS领域内的专业知识需要学习，因此如果大屏涉及到GIS领域的内容，对于前端开发人员来讲还是有一定的学习成本在内的。

所以，如果你发现业务开发突然变慢了，请给前端开发兄弟多一点的时间，他很有可能在苦逼的从零到一学习一些GIS的知识。

效率提升

大屏开发虽然多变，并且一些动效，对于没怎么写过动画的开发兄弟来说，是会吃力一些。

但是，这些问题肯定是有解决方案的，下边我来总结一下经过两个大屏开发，我都总结了哪些可以提效或者优化的方案。

响应式方案

  1. autofit.js：号称迄今为止最易用的自适应工具，一行代码搞定大屏繁杂的自适应工作，并且会让页面内容始终占满整个屏幕，不留空白。因为有的自适应插件为了缩放自由，会让页面留出相应的空白，这个仁者见仁，有的客户可能会不接受。
import autofit from 'autofit.js'

export default {  
  mounted() {
	autofit.init({
        dh: 1080,
        dw: 1920,
        el:"body",
        resize: true
    })
  },
}

就这样就搞定了，具体其他使用细节请自行去官网查询：github.com/LarryZhu-de…

  1. vue3-scale-box：也是基于缩放的一种方案，而且基于vue3进行使用，不同的是它在屏幕里会因为屏幕缩放导致四周留白，但是整个页面会一直保持原样，这个就看客户能否接受。
<template>
  <ScaleBox
    :width="1920"
    :height="1080"
    bgc="transparent"
    :delay="100"
    :isFlat="false"
  >
    <div class="ec-demo" id="ec-demo"></div>
  </ScaleBox>
</template>

<script setup>
import ScaleBox from "vue3-scale-box";
</script>
  1. rem方案：这个方案的原理就是实时监测屏幕缩放变化，根据屏幕大小动态修改元素的像素值。这个方案相对麻烦一些，由于篇幅有限，具体方案细节我准备放到下篇文章讲解。

大屏组件

  1. DataV：一款基于vue开发的开源的大屏常用组件，包括线框、图表、装饰、水位图、数字翻牌器、轮播等等，具体可自行查看：datav.jiaminghi.com/

  1. elementplus-ui：这个是基于vue3的UI框架，估计玩过vue的同学都知道。其实这个框架可以作为大屏开发的一个底层使用UI框架

可能有人会有疑问：大屏UI都是自定义性特别强的，并且每个大屏也都不一样，怎么能用elementplus这个框架呢？

因为elementplus是可以根据需求去自定义修改主题色的。我们把它的主题色根据我们的UI都改成我们自己的，那是不是就可以愉快的去使用element里边的各种好用的组件了，例如弹窗、输入框、下拉框、列表等等。

  1. 封装echarts图表：我看到很多初中级开发工程师，每次一画图表就是从零到一去写代码，非常低效耗时。

    首先有一个开源框架：vue-echarts，它是基于vue对echarts进行了二次封装，将一些初始化以及参数修改的繁琐步骤进行封装，用起来就简单了许多。

    其次echarts提供了动态修改图表数据的方法：setOption。如果是同类图表，例如环状图，我们可以将它再次封装到一个组件中，将柱状图的基础参数都封装好，然后通过setOption动态去修改数据就可以渲染出不同的环状图了。

<template>
  <div class="chart-box" :style="{ height: height }">
    <v-chart class="chart" :option="option" ref="chartRef" :loading-options="LOADING_OPTS" :loading="isLoading" />
  </div>
</template>
<script setup>
import { computed, ref } from 'vue'
import { use } from 'echarts/core'
import { PieChart } from 'echarts/charts'
import { SVGRenderer } from 'echarts/renderers'
import { TitleComponent, TooltipComponent, LegendComponent } from 'echarts/components'
import { LOADING_OPTS } from '@/common/constant.js'

import classVar from '@/style/variables.module.less'

use([PieChart, SVGRenderer, TitleComponent, TooltipComponent, LegendComponent])

const chartRef = ref(null)
/**
 * 修改图表数据
 * @param {*} opts
 */
const setChartOpts = (opts) => {
  chartRef.value.setOption(opts)
}

除了使用这些现成的UI框架，我们是不是也可以自己去封装一些常用的组件，例如数字翻牌器（与DataV不同效果），滚动列表等等。

实用插件

有一些第三方插件使用起来非常高效，例如动画插件，工具函数lodash等等，由于篇幅问题，这些提效工具我准备都放在下篇进行讲解。

如果你也对大屏开发感兴趣，可以加我：brown_7778，我拉你进技术交流群，还有机会参与多个开源项目的共建（目前都已经超100star）

如果觉得文章对你有帮助，也欢迎一键三连👏👏👏，你的鼓励是支持我持续原创下去的动力~

avatar
文章
阅读
粉丝