ECharts是否可以制作双栈图

Question

ECharts 提供堆叠选项，可以将多个 area/line 图表堆叠在一起。
https://echarts.apache.org/en/option.html#series-line.stack

我有三个如下所示的图表：

要实现它，您可以在此处粘贴以下代码：https://echarts.apache.org/examples/en/editor.html?c=area-stack

option = {
  title: {
    text: 'Double stack',
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985',
      },
    },
  },
  legend: {
    data: ['stack 1', 'stack 2', 'basis'],
  },
  toolbox: {
    feature: {
      saveAsImage: {},
    },
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true,
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: ['0', '1', '2', '3', '4', '5', '6'],
    },
  ],
  yAxis: [
    {
      type: 'value',
    },
  ],
  series: [
    {
      name: 'stack 1',
      type: 'line',
      areaStyle: {
        color: 'red',
      },
      data: [140, 150, 160, 180, 160, 240, 160],
    },
    {
      name: 'stack 2',
      type: 'line',
      areaStyle: {
        color: 'green',
      },
      data: [120, 140, 130, 150, 120, 160, 125],
    },
    {
      name: 'basis',
      type: 'line',
      areaStyle: {
        color: 'blue',
      },
      data: [100, 110, 120, 130, 90, 130, 120],
    },
  ],
};

不过，我想将绿色和红色图表叠加在蓝色图表上以获得如下内容：

我可以将蓝色的值添加到其他两个图表并得到结果并得到以下选项：

option = {
  title: {
    text: 'Double stack',
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985',
      },
    },
  },
  legend: {
    data: ['stack 1', 'stack 2', 'basis'],
  },
  toolbox: {
    feature: {
      saveAsImage: {},
    },
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true,
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: ['0', '1', '2', '3', '4', '5', '6'],
    },
  ],
  yAxis: [
    {
      type: 'value',
    },
  ],
  series: [
    {
      name: 'stack 1',
      type: 'line',
      areaStyle: {
        color: 'red',
      },
      data: [140 + 100, 150 + 110, 160 + 120, 180 + 130, 160 + 90, 240 + 130, 160 + 120],
    },
    {
      name: 'stack 2',
      type: 'line',
      areaStyle: {
        color: 'green',
      },
      data: [120 + 100, 140 + 110, 130 + 120, 150 + 130, 120 + 90, 160 + 130, 125 + 120],
    },
    {
      name: 'basis',
      type: 'line',
      areaStyle: {
        color: 'blue',
      },
      data: [100, 110, 120, 130, 90, 130, 120],
    },
  ],
};

但是这样我就失去了ECharts的交互功能

有没有办法做到这一点？要将红色和绿色图表堆叠在蓝色图表上而不是相互堆叠？

Answer 1

你需要像这样对所有系列的名称做同样的事情。

series: [
{
  name: 'stack',
  type: 'line',
  areaStyle: {
    color: 'red',
  },
  data: [140, 150, 160, 180, 160, 240, 160],
},
{
  name: 'stack',
  type: 'line',
  areaStyle: {
    color: 'green',
  },
  data: [120, 140, 130, 150, 120, 160, 125],
},
{
  name: 'stack',
  type: 'line',
  areaStyle: {
    color: 'blue',
  },
  data: [100, 110, 120, 130, 90, 130, 120],
},
],

此外，您可以使用 this

修改工具提示

希望对你有所帮助

Answer 2

我找到了一个简单的解决方案，方法是用完全相同的数据和颜色复制基础图，这样用户就不会看到两张图，然后将红色图叠加在一个蓝色图和绿色图上在另一份蓝色副本上是这样的：

option = {
  legend: {
    data: ['blue', 'red', 'green'],
  },
  xAxis: [
    {
      boundaryGap: false,
      data: ['0', '1', '2', '3', '4', '5', '6'],
    },
  ],
  yAxis: [
    {
      type: 'value',
    },
  ],
  series: [
    {
      name: 'blue',
      stack: 'stack 1',
      type: 'line',
      areaStyle: {
        color: 'blue',
      },
      data: [100, 110, 120, 130, 90, 130, 120],
    },
    {
      name: 'blue',
      stack: 'stack 2',
      type: 'line',
      areaStyle: {
        color: 'blue',
      },
      data: [100, 110, 120, 130, 90, 130, 120],
    },
    {
      name: 'red',
      stack: 'stack 1',
      type: 'line',
      areaStyle: {
        color: 'red',
      },
      data: [140, 150, 160, 180, 160, 240, 160],
    },
    {
      name: 'green',
      stack: 'stack 2',
      type: 'line',
      areaStyle: {
        color: 'green',
      },
      data: [120, 140, 130, 150, 120, 160, 125],
    },
  ],
};

这将确保蓝色图表的两个副本（作为红色和绿色图表的基础）将 disabled/enabled 在一起，因为它们具有相同的名称，并且红色和绿色的每一个图表堆叠在不同的蓝色副本上。

ECharts是否可以制作双栈图

Is it possible to make a double stack chart in ECharts

charts

visualization

echarts