“实时数据大屏2k、4k、8k”这样做【高级前端必备技能之一】

🔥废话不多先上效果图

在这里插入图片描述

🔥划重点

新手程序员需要注意以下几点：

我们需要进行充分的技术调研，进行技术选型
产品，UI，再三确认效果图是否确定，避免后续出现返工的情况

不能拿到效果图之后，一股脑就开始排期，进入开发流程，首先和产品以及UI等同事确认好之后，分析是否存在比较难实现的效果，提出来，大家一起想替换方案，避免后期因为某些效果不能实现阻塞整体的开发进度，这也算是一些日常工作中的一些需要注意的地方。

🔥 技术选型

数据统计大屏，目前市面主流的技术 Echarts 和阿里旗下的 AntV 这两大厂商做的还是很好的，根据效果图中的图表，在对应的官网，文档中浏览，找到一个图表比较全的，文档比较清晰的图表库，按照到文档的流程安装到项目中。

AntV 官网
Echarts官网

🔥图表组件开发

完成技术选型之后，我们就可以进行前端静态页面的开发，按照组件化的开发思维，对页面进行合理的组件划分，提高代码复用性的同时也便于后期维护。
我们选择 Echarts 图表库，可以结合自身需求进行选择
下面是一个毛坯版本的柱状图组件，要实现效果图比较炫酷的效果，我们只需要基于这个毛坯版本，按照官网文档提供的方法，对一些图表的颜色**（线条颜色、文本颜色、图表颜色、lenged颜色）**进行个性化的设置即可满足效果。
在这里插入图片描述

<template><div ref="dom" class="charts chart-bar"></div>
</template><script>
import echarts from "echarts";
import { on, off } from "@/libs/tools";
export default {name: "ChartBar",props: {value: Object,text: String,name: String,conversion: {default: false,},},data() {return {dom: null,};},methods: {resize() {this.dom.resize();},initChart() {this.$nextTick(() => {let option = {title: {text: this.text,left: "left",textStyle: {fontSize: 16,fontStyle: "normal",color: "#333",},},tooltip: {backgroundColor: "rgba(0,0,0,0.8)",padding: [10, 15, 10, 15],trigger: "item",formatter: "{a} <br/>{b} : {c}",},grid: {top: "30px",left: "20px",right: "20px",bottom: "0px",containLabel: true,},xAxis: [{type: "category",data: this.value.xAxis.data,axisTick: {alignWithLabel: true,},axisLabel: {color: "#333",},axisLine: {show: true,lineStyle: {color: "#DDDDDD",width: 1,},},},],yAxis: [{type: "value",axisTick: {show:false,alignWithLabel: false,},splitLine: {show: true,lineStyle: {type: "dashed",},},axisLabel: {color: "#333",},axisLine: {show: true,lineStyle: {color: "#DDDDDD",width: 1,},},},],series: [{name: this.name,type: "bar",barWidth: "24px",itemStyle: {color: "#4586FF",},label: {show: true,position: "top",color: "#333",},data: this.value.series.data,},],};this.dom.setOption(option);// 防止初始化时图表大小错误this.resize();});},},onMo() {this.dom = echarts.init(this.$refs.dom, "tdTheme");on(window, "resize", this.resize);},beforeDestroy() {off(window, "resize", this.resize);},watch: {value: {handler(val, oldVal) {this.initChart();},deep: true,immediate: true,},},
};

🔥组件使用

<chart-bar:showLegend="true"style="width: 900px; height: 700px":value="MapData"text="柱状图"name="星座图"
/>

🔥屏幕适配

F12 之后选择手机Ipad模式，选择 Edit 自定义屏幕的宽高，可以自定义比如 4K分辨率，8K分辨率，满足业务需求即可。
后续在开发调试，可以选择不同的设备进行适配兼容。个人可以根据自身情况选择布局模式（百分比、rem、postcss插件等）均可，已实现业务需求为主。
在这里插入图片描述

🔥实时数据获取

目前有三种方案：

前端定时轮询（不太建议）
SSE后端主动推送（建议）
WebSocket 通信（不建议）

🦟 首先说为什么不建议第三种，有点复杂，不管前端还是后端，有点打炮打蚊子嫌疑，完全没必要
🦟大多数可能都采用第一种方案，毕竟第一种方案完全不需要后端配合，只需要前端定时的去轮询调用查询接口即可，但是要需要注意，轮询也有很多弊端，详情见之前的文章，感兴趣的可以看看
https://blog.csdn.net/weixin_43742274/article/details/139918425?spm=1001.2014.3001.5502
🦟 第二种方案相对第一种和第三种我个人觉得是最好的，但是要需要后端同学配合
大家可以根据自己公司的调性进行选型，因为我们公司比较注重性能、信息安全这类的采用的第二种