feat(项目首页): 根据风险状态动态设置图表轴标签颜色

hejianhao

2026-04-01 8f116d2626b12d791f0553460aee83ce78a26c6d

feat(项目首页): 根据风险状态动态设置图表轴标签颜色

在风险趋势图表中，根据风险状态数据动态设置X轴和Y轴标签的颜色。当风险状态为2时，标签颜色设置为#999（灰色），否则保持为#fff（白色）。这使图表能更直观地反映不同风险状态的数据点。

- 在riskTrendData中新增statusData字段存储风险状态
- 在获取数据时填充statusData数组
- 修改echarts配置中axisLabel的color属性为函数，根据索引获取对应状态并返回相应颜色
- 初始化及重置时同步清空statusData数组

 screen/src/view/projectHome/index.vue

@@ -662,6 +662,7 @@
      riskTrendData: {
        xAxisData: [],
        seriesData: [],
        statusData: [],
      },
      // 9各分项隐患趋势 10隐患数量 11设备数量 12查看报告入口 13人员在岗率 14重大风险源 15 项目风险趋势
      permissionProject:
@@ -1984,6 +1985,7 @@

            return value;
          });
          this.riskTrendData.statusData = res.map((item) => item.status);

          // 更新图表
          this.updateRiskChart();
@@ -1993,6 +1995,7 @@
        // 设置默认值，确保图表可以正常显示
        this.riskTrendData.xAxisData = [];
        this.riskTrendData.seriesData = [];
        this.riskTrendData.statusData = [];
      }
    },
    // 更新风险趋势图表
@@ -2064,7 +2067,14 @@
            },
          },
          axisLabel: {
            color: "#fff",
            color: function (value, index) {
              const status =
                Array.isArray(self.riskTrendData.statusData) &&
                typeof index === "number"
                  ? self.riskTrendData.statusData[index]
                  : undefined;
              return Number(status) === 2 ? "#999" : "#fff";
            },
            fontSize: 12,
            interval: 0,
            rotate: 0,
@@ -2204,7 +2214,14 @@
            },
          },
          axisLabel: {
            color: "#fff",
            color: function (value, index) {
              const status =
                Array.isArray(this.riskTrendData.statusData) &&
                typeof index === "number"
                  ? this.riskTrendData.statusData[index]
                  : undefined;
              return Number(status) === 2 ? "#999" : "#fff";
            },
            fontSize: 12,
            interval: 0, // 强制显示所有标签
            rotate: 0, // 不旋转