时间戳

首页 > 解决方案 > 是否可以在 ECharts 中制作双栈图

charts - 是否可以在 ECharts 中制作双栈图

问题描述

ECharts 提供堆叠选项，将多个面积/折线图堆叠在一起。
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 的交互功能。

有没有可能的方法来做到这一点？要将红色和绿色图表堆叠在蓝色图表上，但不能相互堆叠？

标签： chartsvisualizationecharts

解决方案

您需要像这样对所有系列的名称进行相同的操作。

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],
},
],

而且，您可以使用此修改工具提示

我希望，它会对你有所帮助。

推荐阅读