🔥废话不多先上效果图
🔥划重点
新手程序员需要注意以下几点：
- 我们需要进行充分的技术调研，进行技术选型
- 产品，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
🦟 第二种方案相对第一种和第三种我个人觉得是最好的，但是要需要后端同学配合
大家可以根据自己公司的调性进行选型，因为我们公司比较注重性能、信息安全这类的采用的第二种
🔥 结语
本文主要介绍，从0到1 实现一个实时数据大屏的基本过程，这个大体的技术框架基本可以覆盖市面上80%的公司业务需求，除非有些特殊的大屏需要做特殊处理，希望这篇文章能够给你带来一些技术上的提升。
