Apache ECharts面积区域堆叠异常问题求助

问题描述 #

尝试创建包含yVal1、yVal2两条折线，以及两者间填充区域（yVal2-yVal1）的图表，但启用填充区域系列后线条错位，禁用该区域后折线显示正常。

错误原因 #

堆叠配置逻辑存在冲突：

• 将yVal1和yVal2-yVal1设置为同一stack组后，yVal2-yVal1的数值会堆叠在yVal1之上，最终该系列的折线实际显示的就是yVal2的数值（yVal1 + (yVal2-yVal1) = yVal2）。
• 额外添加的独立yVal2系列使用原始yVal2数值，与堆叠后的系列产生坐标渲染冲突，导致线条错位。

修正方案 #

以下两种方式均可实现同时显示yVal1折线、yVal2折线及中间填充区域的需求：

方式一：基于堆叠逻辑实现（推荐） #

保留堆叠配置，移除多余的重复系列，通过虚拟系列满足图例显示需求：

const testData = [
  { xVal: 167253120, yVal1: 10, yVal2: 20 },
  { xVal: 167253126, yVal1: 12, yVal2: 22 },
  { xVal: 167253132, yVal1: 8, yVal2: 25 },
  { xVal: 167253138, yVal1: 15, yVal2: 30 },
  { xVal: 167253144, yVal1: 18, yVal2: 28 },
  { xVal: 167253150, yVal1: 14, yVal2: 32 },
  { xVal: 167253156, yVal1: 20, yVal2: 35 },
  { xVal: 167253162, yVal1: 16, yVal2: 26 },
  { xVal: 167253168, yVal1: 22, yVal2: 38 },
  { xVal: 167253174, yVal1: 19, yVal2: 33 },
];

option = {
  title: {
    text: "Chart",
  },
  legend: {
    data: ["yVal1", "yVal2-yVal1", "yVal2"],
    top: 30,
  },
  xAxis: {
    type: "value",
    min: "dataMin",
    max: "dataMax",
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      name: "yVal1",
      type: "line",
      data: testData.map((item) => [item.xVal, item.yVal1]),
      symbol: "circle",
      stack: "range",
      z: 2, // 确保折线在填充区域上方
    },
    {
      name: "yVal2",
      type: "line",
      data: testData.map((item) => [item.xVal, item.yVal2 - item.yVal1]),
      areaStyle: {
        color: "rgba(51, 152, 219, 0.3)",
      },
      symbol: "circle",
      stack: "range",
      z: 1, // 填充区域在中间层
    },
    // 虚拟系列，仅用于图例显示填充区域项
    {
      name: "yVal2-yVal1",
      type: "line",
      data: [],
      symbol: "none",
      lineStyle: {
        color: "rgba(51, 152, 219, 0.3)",
      },
    },
  ],
};

方式二：不使用堆叠，直接指定填充起始位置 #

利用areaStyle.origin配置，直接将填充区域的起始位置绑定到yVal1系列，逻辑更直观：

const testData = [
  { xVal: 167253120, yVal1: 10, yVal2: 20 },
  { xVal: 167253126, yVal1: 12, yVal2: 22 },
  { xVal: 167253132, yVal1: 8, yVal2: 25 },
  { xVal: 167253138, yVal1: 15, yVal2: 30 },
  { xVal: 167253144, yVal1: 18, yVal2: 28 },
  { xVal: 167253150, yVal1: 14, yVal2: 32 },
  { xVal: 167253156, yVal1: 20, yVal2: 35 },
  { xVal: 167253162, yVal1: 16, yVal2: 26 },
  { xVal: 167253168, yVal1: 22, yVal2: 38 },
  { xVal: 167253174, yVal1: 19, yVal2: 33 },
];

option = {
  title: {
    text: "Chart",
  },
  legend: {
    data: ["yVal1", "yVal2-yVal1", "yVal2"],
    top: 30,
  },
  xAxis: {
    type: "value",
    min: "dataMin",
    max: "dataMax",
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      name: "yVal1",
      type: "line",
      data: testData.map((item) => [item.xVal, item.yVal1]),
      symbol: "circle",
      z: 2,
    },
    {
      name: "yVal2",
      type: "line",
      data: testData.map((item) => [item.xVal, item.yVal2]),
      symbol: "circle",
      z: 2,
    },
    {
      name: "yVal2-yVal1",
      type: "line",
      data: testData.map((item) => [item.xVal, item.yVal2]),
      areaStyle: {
        color: "rgba(51, 152, 219, 0.3)",
        // 指定填充区域的起始系列为yVal1（索引0）
        origin: {
          seriesIndex: 0,
        },
      },
      symbol: "none",
      z: 1,
      lineStyle: {
        opacity: 0, // 隐藏该系列的折线
      },
    },
  ],
};

效果说明 #

• 方式一通过堆叠自动计算出yVal2的折线位置，同时用虚拟系列满足图例的三个项显示需求。
• 方式二直接绑定填充区域的起始系列，无需堆叠计算，逻辑更清晰易懂。

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