Echarts如何实现第一个系列数值超过平均系列时变更填充背景色

核心思路是通过拆分测量值为两个堆叠面积系列实现，无需额外调用工具，仅调整数据和系列配置即可：

• 第一步：预处理数据，确保测量值dataMeasures和平均值dataAverage的时间戳完全对齐，对每个时间节点的数值做如下计算：
  1. 低于/等于平均值的部分：取Math.min(测量值, 平均值)，作为第一个面积系列的数值
  2. 高于平均值的部分：取Math.max(测量值 - 平均值, 0)，作为第二个面积系列的数值
• 第二步：修改series配置，将原来的单个面积系列替换为两个堆叠的面积系列，设置不同填充色，保留原有的平均值虚线系列

修改后完整配置代码参考：

// 先在计算配置前预处理数据，保证dataMeasures和dataAverage长度、对应时间戳完全一致
const dataBelowAvg = this.dataMeasures.map((item, index) => {
  const avgVal = this.dataAverage[index][1]
  return [item[0], Math.min(item[1], avgVal)]
})
const dataAboveAvg = this.dataMeasures.map((item, index) => {
  const avgVal = this.dataAverage[index][1]
  return [item[0], Math.max(item[1] - avgVal, 0)]
})

options() {
      return {
        xAxis: {
          type: 'time',
          zlevel: 2,
          boundaryGap: false,
          splitLine: {
            show: true,
          },
          axisLabel: {
            formatter(value) {
              return format(new Date(value), "HH'h'mm", {
                locale: fr,
              })
            },
            inside: true,
            color: '#000',
          },
          axisTick: {
            alignWithLabel: true,
            inside: true,
          },
          min: startOfDay(new Date()),
          max: endOfDay(new Date()),
          interval: 3600000 * 3, // 3 hours in milliseconds
        },
        yAxis: {
          show: false,
          type: 'value',
        },
        series: [
          // 低于平均值的填充区域
          {
            data: dataBelowAvg,
            type: 'line',
            smooth: true,
            stack: 'measureStack', // 开启堆叠，两个面积系列共用同一个堆叠名
            areaStyle: {
              color: '#FDD835', // 原有填充色
            },
            lineStyle: {
              width: 0,
            },
          },
          // 高于平均值的填充区域
          {
            data: dataAboveAvg,
            type: 'line',
            smooth: true,
            stack: 'measureStack',
            areaStyle: {
              color: '#EF5350', // 超出平均值的自定义填充色，可自行修改
            },
            lineStyle: {
              width: 0,
            },
          },
          // 原有平均值虚线系列
          {
            data: this.dataAverage,
            type: 'line',
            smooth: true,
            lineStyle: {
              color: '#000',
              type: 'dashed',
            },
          },
        ],

        grid: [
          {
            left: 0,
            right: 50,
            bottom: 0,
            top: 0,
            containLabel: true,
          },
        ],
      }
    }

如果测量值和平均值的采样时间不一致，需要先做插值处理，保证每个时间点的数值都能对应，避免计算错误。

内容的提问来源于stack exchange，提问作者Una