eemcs_ui/src/views/centerairC/sysMonitor/components/hostChart.vue

<template>
  <div>
    <div class="historyCharts" ref="chart_ref"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  props: {
    temArray: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      chartInstance: null,
      option: {},
      chartData1: [],
      chartData2: [],
      chartData3: [],
      chartData4: [],
      chartData5: [],
      bottomData: [],
    };
  },
  watch: {
    temArray: {
      immediate: true, // 页面加载时立即触发一次监听
      handler(newVal, oldVal) {
        if (newVal) {
          this.chartData1 = []; // 清空 chartData1
          this.chartData2 = []; // 清空 chartData2
          this.bottomData = []; // 清空 bottomData
          console.log("charts传值", newVal);
          let data = newVal;
          if (data.length > 0) {
            // 获取 title 和 titleStr 数组
            const title = data[0].title;
            const titleStr = data[1].titleStr;
            // 获取 dataList 数组
            const dataList = data[3].dataList;

            // 遍历 dataList 数组
            dataList.forEach((item) => {
              // 查找 name 在 title 数组中的索引
              const index = title.indexOf(item.name);
              if (index !== -1) {
                // 若找到匹配项，则将 name 替换为 titleStr 中对应位置的值
                item.name = titleStr[index];
              }
            });
            console.log("处理后的data", data);
            let name1 = "";
            let name2 = "";
            let name3 = "";
            let name4 = "";
            let name5 = "";

            data.forEach((item) => {
              if (item.timeStr) {
                this.bottomData = item.timeStr;
              }

              if (item.dataList) {
                // 用于存储 name 的数组
                const names = [];
                // 用于存储 chartData 的数组
                const chartData = [];

                // 查找包含“负载”的数据
                let loadDataIndex = -1;
                for (let i = 0; i < item.dataList.length; i++) {
                  if (
                    item.dataList[i].name &&
                    item.dataList[i].name.includes("负载")
                  ) {
                    loadDataIndex = i;
                    this.chartData5 = item.dataList[i].value;
                    name5 = item.dataList[i].name;
                    break;
                  }
                }

                // 剔除包含“负载”的数据
                if (loadDataIndex !== -1) {
                  item.dataList.splice(loadDataIndex, 1);
                }

                // 处理剩下的数据
                item.dataList.slice(0, 4).forEach((val, index) => {
                  if (val.name) {
                    chartData[index] = val.value;
                    names[index] = val.name;
                  }
                });

                // 将 chartData 数组的值赋值给 this.chartDataX
                this.chartData1 = chartData[0] || "";
                this.chartData2 = chartData[1] || "";
                this.chartData3 = chartData[2] || "";
                this.chartData4 = chartData[3] || "";

                // 将 names 数组的值赋值给外部作用域的变量
                name1 = names[0] || "";
                name2 = names[1] || "";
                name3 = names[2] || "";
                name4 = names[3] || "";
              }
            });
            // console.log("this.chartData1", this.chartData1);
            // console.log("this.chartData2", this.chartData2);
            // console.log("this.chartData3", this.chartData3);
            // console.log("this.chartData4", this.chartData4);
            // console.log("this.chartData5", this.chartData5);
            this.$nextTick(() => {
              // 计算双y轴最大最小值，
              var Min1 = 0,
                Min2 = 0,
                Max1 = Math.ceil(
                  Math.max(
                    ...this.chartData1,
                    ...this.chartData2,
                    ...this.chartData3,
                    ...this.chartData4
                  )
                ),
                Max2 = Math.ceil(Math.max(...this.chartData5));
              console.log("Min1", Min1);
              console.log("Min2", Min2);
              console.log("Max1", Max1);
              console.log("Max2", Max2);
              const adapterOption = {
                xAxis: {
                  data: this.bottomData,
                },
                yAxis: [
                  //两个y轴
                  {
                    min: Min1,
                    max: Max1,
                    splitNumber: 10,
                    interval: (Max1 - Min1) / 10,
                  },
                  {
                    min: Min2,
                    max: Max2,
                    splitNumber: 10,
                    interval: (Max2 - Min2) / 10,
                  },
                ],
                series: [
                  {
                    yAxisIndex: 0,
                    name: name1,
                    data: this.chartData1,
                  },
                  {
                    yAxisIndex: 0,
                    name: name2,
                    data: this.chartData2,
                  },
                  {
                    yAxisIndex: 0,
                    name: name3,
                    data: this.chartData3,
                  },
                  {
                    yAxisIndex: 0,
                    name: name4,
                    data: this.chartData4,
                  },
                  {
                    yAxisIndex: 1,
                    name: name5,
                    data: this.chartData5,
                  },
                ],
              };
              this.chartInstance.setOption(adapterOption);
              // 手动的调用图标对象的 resize 才能产生效果
              this.chartInstance.resize();
            });
          } else {
            this.$nextTick(() => {
              const adapterOption = {
                xAxis: {
                  data: [],
                },
                yAxis: [
                  //两个y轴
                  {
                    min: 0,
                    max: 0,
                    splitNumber: 10,
                    interval: 0,
                  },
                  {
                    min: 0,
                    max: 0,
                    splitNumber: 10,
                    interval: 0,
                  },
                ],
                series: [
                  {
                    yAxisIndex: 0,
                    data: [],
                  },
                  {
                    yAxisIndex: 0,
                    data: [],
                  },
                  {
                    yAxisIndex: 0,
                    data: [],
                  },
                  {
                    yAxisIndex: 0,
                    data: [],
                  },
                  {
                    yAxisIndex: 0,
                    data: [],
                  },
                ],
              };
              this.chartInstance.setOption(adapterOption);
              //手动的调用图标对象的resize才能产生效果
              this.chartInstance.resize();
              this.screenAdapter();
            });
          }
        }
      },
    },
  },
  mounted() {
    this.initChart();
    this.screenAdapter();
  },
  destroyed() {
    //取消监听器
    window.removeEventListener("resize", this.screenAdapter);
  },
  methods: {
    // 折线图自适应+ 根据按钮切换图例仅限一条且不可点击+ 折线图数据
    screenAdapter() {
      //自己定义的比较合适的适配大小,2.6  mes_ref是图表盒子
      const titleFontSize = this.$refs.chart_ref.offsetWidth / 130;
      //因为option可以多次配置的，所以这里的option只需要写 需要配置大小的相关数据
      const adapterOption = {};
      //记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关
      this.chartInstance.setOption(adapterOption);
      //手动的调用图标对象的resize才能产生效果
      this.chartInstance.resize();
    },
    //初始化chartInstance对象
    initChart() {
      var Min1 = 0,
        Min2 = 0,
        Max1 = Math.ceil(
          Math.max(
            ...this.chartData1,
            ...this.chartData2,
            ...this.chartData3,
            ...this.chartData4
          ) + 4
        ),
        Max2 = Math.ceil(Math.max(...this.chartData5) + 4);
      const chartRef = this.$refs.chart_ref;
      if (chartRef) {
        // 初始化图表的代码
        this.chartInstance = echarts.init(this.$refs.chart_ref);
        this.option = {
          tooltip: {
            trigger: "axis",
            // 自定义 tooltip 内容
            formatter: function (params) {
              var res = params[0].name + "<br/>";
              for (var i = 0, l = params.length; i < l; i++) {
                var seriesName = params[i].seriesName;
                var value = params[i].value;
                // console.log("打印颜色", params[i].color)
                var marker =
                  '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' +
                  params[i].color +
                  '"></span>';
                // 根据不同的seriesName 返回不同的单位
                if (seriesName.includes("负载")) {
                  res +=
                    marker +
                    seriesName +
                    ":" +
                    '<span style="color: #000000; font-weight: bold;margin-left:5px">' +
                    value +
                    " " +
                    "%" +
                    "</span><br>";
                } else {
                  res +=
                    marker +
                    seriesName +
                    ":" +
                    '<span style="color: #000000; font-weight: bold;margin-left:5px">' +
                    value +
                    " " +
                    "℃" +
                    "</span><br>";
                }
              }
              return res;
            },
          },
          legend: {
            show: true,
            top: 0,
            textStyle: {
              color: "white",
            },
          },
          grid: {
            top: "10%",
            left: "4%",
            right: "6%",
            bottom: "3%",
            containLabel: true,
          },
          xAxis: {
            type: "category",
            //设置为true代表离零刻度间隔一段距离
            boundaryGap: true,
            // 修饰刻度标签的颜色即x坐标数据
            axisLabel: {
              // interval: 0, //强制显示所有x轴数据
              // rotate: 30, //x轴坐标字体倾斜30度
              color: "rgba(255, 255, 255, 1)",
            },
            axisTick: {
              show: false, // 不显示坐标轴刻度线
            },
            // x坐标轴的颜色
            axisLine: {
              show: true,
              lineStyle: {
                color: "#365576",
              },
            },
            splitLine: {
              lineStyle: {
                color: "#e2e6f0",
              },
            }, //x轴分割线
            data: this.bottomData,
          },
          yAxis: [
            {
              min: Min1,
              max: Max1,
              splitNumber: 10,
              interval: (Max1 - Min1) / 10,
              // 设置 name 的样式
              nameTextStyle: {
                color: "rgba(255, 255, 255, 1)",
                fontSize: 12,
              },
              miniInterval: 5,
              type: "value",
              // 修饰刻度标签的颜色即y坐标数据
              axisLabel: {
                color: "rgba(255, 255, 255, 1)",
              },
              // 显示y坐标轴
              axisLine: {
                show: true,
                lineStyle: {
                  color: "#365576", // 设置 y 轴线的颜色
                },
              },
              //y轴分割线段数
              // splitNumber: 10,
              // 修改y轴分割线的颜色
              splitLine: {
                lineStyle: {
                  color: "#1a3d62", // 设置分割线的颜色
                  type: "dashed", // 设置分割线为虚线
                },
              },
            },
            {
              min: Min2,
              max: Max2,
              splitNumber: 10,
              interval: (Max2 - Min2) / 10,
              // 设置 name 的样式
              nameTextStyle: {
                color: "rgba(255, 255, 255, 1)",
                fontSize: 12,
              },
              miniInterval: 5,
              type: "value",
              name: "负载", // y 轴的单位描述
              // 修饰刻度标签的颜色即y坐标数据
              axisLabel: {
                color: "#ffffff",
              },
              // 修饰刻度标签的颜色即y坐标数据
              axisLabel: {
                color: "rgba(255, 255, 255, 1)",
              },
              // 显示y坐标轴
              axisLine: {
                show: true,
                lineStyle: {
                  color: "#365576", // 设置 y 轴线的颜色
                },
              },
              //y轴分割线段数
              // splitNumber: 10,
              // 修改y轴分割线的颜色
              splitLine: {
                lineStyle: {
                  color: "#1a3d62", // 设置分割线的颜色
                  type: "dashed", // 设置分割线为虚线
                },
              },
            },
          ],
          series: [
            {
              type: "line",
              // 拐点大小
              symbolSize: 8,
              data: this.chartData1,
              yAxisIndex: 0,
              //折线颜色
              itemStyle: {
                color: "#00CED1", //折线点的颜色
              },
              lineStyle: {
                color: "#00CED1", //折线点的颜色
              },
              smooth: false,
              // 不显示折线点
              showSymbol: false,
            },
            {
              type: "line",
              // 拐点大小
              symbolSize: 8,
              data: this.chartData2,
              yAxisIndex: 0,
              //折线颜色
              itemStyle: {
                color: "#3ba272", //折线的颜色
              },
              smooth: false,
              // 不显示折线点
              showSymbol: false,
            },
            {
              type: "line",
              // 拐点大小
              symbolSize: 8,
              data: this.chartData3,
              yAxisIndex: 0,
              //折线颜色
              itemStyle: {
                color: "#1a69f1", //折线的颜色
              },
              smooth: false,
              // 不显示折线点
              showSymbol: false,
            },
            {
              type: "line",
              // 拐点大小
              symbolSize: 8,
              data: this.chartData4,
              yAxisIndex: 0,
              //折线颜色
              itemStyle: {
                color: "#ee6666", //折线的颜色
              },
              smooth: false,
              // 不显示折线点
              showSymbol: false,
            },
            {
              type: "line",
              // 拐点大小
              symbolSize: 8,
              data: this.chartData5,
              yAxisIndex: 1,
              //折线颜色
              itemStyle: {
                color: "#fac858", //折线的颜色
              },
              smooth: false,
              // 不显示折线点
              showSymbol: false,
            },
          ],
        };
        //把配置项给实例对象
        this.chartInstance.setOption(this.option, true);
      } else {
        console.error("未找到有效的 DOM 元素");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.historyCharts {
  width: 100%;
  height: 4.4rem;
}
</style>