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

骨灰级尤雨溪迷弟~

已于 2024-06-29 18:04:40 修改

阅读量1k

点赞数 20

文章标签：前端

于 2024-06-29 17:43:57 首次发布

本文链接：https://blog.csdn.net/weixin_43742274/article/details/140066709

版权

🔥废话不多先上效果图

在这里插入图片描述

🔥划重点

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

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

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

🔥 技术选型

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

🔥图表组件开发

完成技术选型之后，我们就可以进行前端静态页面的开发，按照组件化的开发思维，对页面进行合理的组件划分，提高代码复用性的同时也便于后期维护。
我们选择 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
🦟 第二种方案相对第一种和第三种我个人觉得是最好的，但是要需要后端同学配合
大家可以根据自己公司的调性进行选型，因为我们公司比较注重性能、信息安全这类的采用的第二种