Hello大家好，我是日拱一卒的攻城师不浪，专注前端、后端、AI学习、二三维可视化、GIS等学习沉淀，这是2024年输出的第13/100篇文章，欢迎志同道合的朋友一起学习交流；
前言
从毕业之后，自己就一直在做TOC的业务比较多，网站、H5、小程序等。
自从回到了二线城市，发现二线做自己产品的公司少之又少，而做政府或者企业的业务偏多，也就是数据可视化大屏，数字孪生类的业务较多。
因此我不得不从熟悉的TOC转为做TOG的业务，虽然现在自己主要负责公司的技术类产品的设计与研发，但是也主动包揽了2个项目的大屏开发工作，也是自己想体验并熟悉一下这块的业务开发，积累一下不同的经验。
大屏开发的特点
开发完两个大屏之后，我总结了一下大屏开发与TOB业务开发一些不同点或者说难搞的一些点。
组件封装
- TOB：类似于后台管理这些系统，市面上一般都已经有比较好看且相对成熟的组件库或者相关插件了，可以直接拿来使用。
- 大屏：大屏对应UI的要求还是蛮高的，而且基本上每个项目的大屏的UI设计都是相差巨大的，很难去封装好一个组件而用在多个项目里。
响应式设计
- TOB：后台管理系统一般很少做响应式开发，大部分都是会设置一个最小宽度，当屏幕宽度小于该宽度的时候会出现滚动条。还有一类是做了响应式，使用的是
rem方案，主要用的是根据屏幕大小去动态修改像素值。 - 大屏：大屏就必须得做响应式了，而方案也是有很多，目前主流的大屏响应式方案主要是
缩放以及rem方案。
动效开发
TOB：后台管理一般很少要求开发酷炫的动效，大多都比较朴素，与大屏的定位不同，后台管理追求的是功能好用，能够覆盖业务使用，用户体验好就行。
大屏：而大屏的定位就不一样了，
领导们都喜欢比较酷炫的效果，因此它必须得秀起来，越酷炫领导越高兴，就觉得越牛X，签合同的概率就越大。因此大屏要求开发很多酷炫的效果，这就要求前端开发人员要熟悉CSS3等技术，要有一定的审美。
TODO
二维三维
- TOB：后台管理不用说了，都是二维开发，顶多加个
echarts图表，看起来稍微秀一点，还是得益于echarts自己的动效封装😂。 - 大屏：大屏开发很多时候会涉及到三维开发，例如
数字孪生领域，会有一些三维模型，三维动效需要加载，这时候可能就会涉及到一些三维开发技术：Unreal，Unity3D，threejs，babylon.js等。
除了三维，还会涉及到一些地图以及GIS的应用。这时候又会涉及到很多GIS方面的前端框架，例如：openlayers、mapbox、leaflet、cesiumjs、高德地图等。
说到GIS，又会涉及到很多GIS领域内的专业知识需要学习，因此如果大屏涉及到GIS领域的内容，对于前端开发人员来讲还是有一定的学习成本在内的。
所以，如果你发现业务开发突然变慢了，请给前端开发兄弟多一点的时间，他很有可能在苦逼的从零到一学习一些GIS的知识。
效率提升
大屏开发虽然多变，并且一些动效，对于没怎么写过动画的开发兄弟来说，是会吃力一些。
但是，这些问题肯定是有解决方案的，下边我来总结一下经过两个大屏开发，我都总结了哪些可以提效或者优化的方案。
响应式方案
- autofit.js：号称迄今为止最易用的自适应工具，一行代码搞定大屏繁杂的自适应工作，并且会让页面内容始终占满整个屏幕，不留空白。因为有的自适应插件为了缩放自由，会让页面留出相应的空白，这个仁者见仁，有的客户可能会不接受。
import autofit from 'autofit.js'
export default {
mounted() {
autofit.init({
dh: 1080,
dw: 1920,
el:"body",
resize: true
})
},
}
就这样就搞定了，具体其他使用细节请自行去官网查询：
- 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>
- rem方案：这个方案的原理就是实时
监测屏幕缩放变化，根据屏幕大小动态修改元素的像素值。这个方案相对麻烦一些，由于篇幅有限，具体方案细节我准备放到下篇文章讲解。
大屏组件
- DataV：一款基于
vue开发的开源的大屏常用组件，包括线框、图表、装饰、水位图、数字翻牌器、轮播等等，具体可自行查看：
- elementplus-ui：这个是基于vue3的UI框架，估计玩过vue的同学都知道。其实这个框架可以作为大屏开发的一个
底层使用UI框架
可能有人会有疑问：大屏UI都是自定义性特别强的，并且每个大屏也都不一样，怎么能用elementplus这个框架呢？
因为elementplus是可以根据需求去自定义修改主题色的。我们把它的主题色根据我们的UI都改成我们自己的，那是不是就可以愉快的去使用element里边的各种好用的组件了，例如弹窗、输入框、下拉框、列表等等。
封装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）
如果觉得文章对你有帮助，也欢迎一键三连👏👏👏，你的鼓励是支持我持续原创下去的动力~