echarts 两个曲线之间填充并且不遮挡的办法

echarts 两个曲线之间填充 可以用两条曲线 ，第一条填充白色 ，然后 第2条填充想要的颜色 ，如下面的代码

option = {
    title: {
        text: '堆叠区域图'
    },
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        data:['最小值','最大值']
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis : [
        {
            type : 'category',
            boundaryGap : false,
            data : ['周一','周二','周三','周四','周五','周六','周日']
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:'最小值',
            type:'line',
          //  stack: '总量',
            areaStyle: {
                color:'#8DA2E4',
                opacity:1,
                origin:"start"
            },
            data:[320, 332, 301, -40, -30, 330, 320]
        },
        {
            name:'最大值',
            type:'line',
         //   stack: '总量',
            label: {
                normal: {
                    show: true
                }
            },
            areaStyle: {
                color:'#ffffff',
                opacity:1,
                origin:"start"
            },
            data:[10, 30, 40, -60, -50, 40, 50]
        }
    ]
};

这样有个弊端，当你 想要绘制markarea 区域的时候 ，由于下面的 曲线填充是白色的会被遮住

所以想了个办法 ，分两片区域绘制 分上半部分和下半部分 ，代码如下

import { useMemo, useState } from "react";
import ReactECharts from "echarts-for-react";
import dayjs from "dayjs";

const areaStyle = {
  opacity: 0.8,
  color: {
    type: "linear",
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [
      {
        offset: 0,
        color: "rgb(0, 221, 255)",
      },
      {
        offset: 1,
        color: "rgb(77, 119, 255)",
      },
    ],
  },
};
const getCommonSeries = (name, data, markAreaData, areaStyle = undefined) => {
  return {
    name,
    areaStyle,
    data,
    type: "line",
    smooth: true,
    lineStyle: { width: 0 },
    showSymbol: false,
    markArea: {
      itemStyle: {
        color: "rgba(255, 0, 0, 0.2)",
      },
      data: markAreaData,
    },
  };
};

export const AlarmCurve = ({
  pointCurveData = [], // 点曲线数据
  alarmData = [], // 报警数据
  max = 0, // 最大值
  min = 0, // 最小值
  predictData = [], // 点预测数据
}) => {
  const pointCurveMaxData = useMemo(() => {
    return pointCurveData.map((item) => [item[0], item[1] + max]);
  }, [pointCurveData, max]);
  const pointCurveMinData = useMemo(() => {
    return pointCurveData.map((item) => [item[0], item[1] - min]);
  }, [pointCurveData, min]);
  const markAreaData = useMemo(() => {
    // 获取 alarmData 中连续的1的区间,记录的是 的开始和结束item[0]
    let result = [];
    let start = null;
    for (let i = 0; i < alarmData.length; i++) {
      if (alarmData[i][1] === 1) {
        if (start === null) {
          start = alarmData[i][0];
        }
        if (i === alarmData.length - 1 || alarmData[i + 1][1] === 0) {
          result.push([
            { xAxis: dayjs(start).format("MM-DD HH:mm:ss") },
            { xAxis: dayjs(alarmData[i][0]).format("MM-DD HH:mm:ss") },
          ]);
          start = null;
        }
      }
    }
    console.log("result", result);

    return result;
  }, [alarmData]);

  const opt = useMemo(() => {
    if (pointCurveData.length === 0) {
      return {};
    }
    // line opt
    return {
      title: {
        text: "报警曲线",
        // align center
        left: "center",
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross",
          label: {
            backgroundColor: "#6a7985",
          },
        },
      },
      grid: {
        top: 30,
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      xAxis: [
        {
          type: "category",
          boundaryGap: false,
          data: pointCurveData.map((item) =>
            dayjs(item[0]).format("MM-DD HH:mm:ss"),
          ),
        },
      ],
      yAxis: {
        type: "value",
      },
      series: [
        {
          name: "Line 1-max",
          type: "line",
          stack: "max",
          smooth: true,
          lineStyle: {
            width: 0,
          },
          showSymbol: false,
          data: pointCurveData.map((item) => item[1]),
        },
        {
          name: "Line 1-base",
          type: "line",
          stack: "max",
          smooth: true,
          lineStyle: {
            width: 0,
          },
          showSymbol: false,
          emphasis: {
            focus: "series",
          },
          areaStyle: {
            opacity: 0.3,
            color: "rgb(13,185,88)",
          },
          data: pointCurveData.map((item) => max),
        },
        {
          ...getCommonSeries(
            "实时值",
            pointCurveData.map((item) => item[1]),
            undefined,
          ),
          lineStyle: {
            width: 2,
          },
        },

        {
          name: "Line 1-min",
          type: "line",
          stack: "min",
          smooth: true,
          lineStyle: {
            width: 0,
          },
          showSymbol: false,
          emphasis: {
            focus: "series",
          },
          data: pointCurveData.map((item) => item[1] - min),
        },
        {
          name: "Line 3",
          type: "line",
          stack: "min",
          smooth: true,
          lineStyle: {
            width: 0,
          },
          showSymbol: false,
          areaStyle: {
            opacity: 0.3,
            color: "rgb(13,185,88)",
          },
          data: pointCurveData.map((item) => min),
        },
        {
          ...getCommonSeries(
            "预测值",
            predictData.map((item) => item[1]),
            markAreaData,
          ),
          lineStyle: {
            width: 2,
          },
        },
      ],
    };
  }, [
    pointCurveData,
    alarmData,
    max,
    min,
    predictData,
    pointCurveMaxData,
    pointCurveMinData,
  ]);

  return <ReactECharts option={opt} />;
};

模拟数据调用

import dayjs from "dayjs";
import { AlarmCurve } from "./alarm-curve";

export const movingAverage = (data, numberOfPricePoints) => {
  return data.map((row, index, total) => {
    const start = Math.max(0, index - numberOfPricePoints);
    const subset = total.map((x) => x[1]).slice(start, index + 1);
    const sum = subset.reduce((a, b) => a + b, 0);
    return [row[0], sum / subset.length];
  });
};

export const FuXianAlarmCurve = () => {
  const now = dayjs();
  const max = 20;
  const min = 10;
  // 模拟一个1000个点的数据1秒
  const pointCurveData = movingAverage(
    Array.from({ length: 1000 }, (_, i) => [
      now.add(i, "second").valueOf(),
      Math.random() * 100,
    ]),
    20,
  );
  // 模拟一个1000个点的数据1秒
  const predictData = movingAverage(
    Array.from({ length: 1000 }, (_, i) => [
      now.add(i, "second").valueOf(),
      Math.random() * 100,
    ]),
    100,
  );
  // 遍历pointCurveData和 predictData，如果predictData 对应的值在min和max之间, 则返回0 否则返回1
  const alarmData = pointCurveData.map((item, index) => {
    const predictItem = predictData[index];
    if (predictItem[1] > item[1] + max || predictItem[1] < item[1] - min) {
      return [item[0], 1];
    }
    return [item[0], 0];
  });

  return (
    <AlarmCurve
      pointCurveData={pointCurveData}
      predictData={predictData}
      alarmData={alarmData}
      max={max}
      min={min}
    />
  );
};

效果