Apache Echarts: is a holistic chart available?

Question

I would like to create a chart like this:

I checked the examples: https://echarts.apache.org/examples/en but can't find something simular.

Has anyone ever achieved something like this with Echarts? Possibly combine or adjust one of the existing types?

Answer 1

As far as i am not missing something important this could be realized with stacked line series and areaStyle.

Example:

option = {
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {},
  series: [
    {
      type: 'line',
      stack: 'stack',
      smooth: true,
      symbol: 'none',
      lineStyle: { color: 'green' },
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      type: 'line',
      stack: 'stack',
      smooth: true,
      symbol: 'none',
      lineStyle: { color: 'green' },
      areaStyle: {},
      data: [220, 182, 191, 234, 290, 330, 310]
    }
  ]
};

---

Example2:

option = {
  grid: {show: true, backgroundColor: '#e6ccb3'},
  xAxis: {
    type: 'category',
    nameLocation: 'center',
    nameGap: 25,
    nameTextStyle: {fontSize: 18},
    name: 'WEEKS OF AGE',
    splitLine: {show: true, lineStyle: {width: 2, color: 'white'}},
    minorSplitLine: {show: true, lineStyle: {color: 'white'}},
  },
  yAxis: [
    {
      type: 'value',
      axisLine: {show: true, lineStyle: {width: 3, color: 'blue'}},
      splitLine: {lineStyle: {width: 2, color: 'grey'}},
      minorSplitLine: {show: true, lineStyle: {color: 'white'}}
    },
    {
      type: 'value',
      axisLine: {show: true, lineStyle: {width: 3, color: 'green'}},
      splitLine: {show: false}
    }
  ],
  series: [
    {
      type: 'line',
      stack: 'stack1',
      smooth: true,
      symbolSize: 0,
      lineStyle: {color: 'blue'},
      data: makeData(80, 10)
    },
    {
      type: 'line',
      stack: 'stack1',
      smooth: true,
      symbolSize: 0,
      lineStyle: {color: 'blue'},
      areaStyle: {color: '#5d82ee'},
      label: {
        show: true,
        formatter: (params) => {if (params.data[0] === 60) {return "name of this series"} else {return ''}}
      },
      data: makeData(80, 10)
    },
    {
      type: 'line',
      stack: 'stack2',
      yAxisIndex: 1,
      smooth: true,
      symbolSize: 0,
      lineStyle: {color: 'green'},
      data: makeData(80, 1400)
    },
    {
      type: 'line',
      stack: 'stack2',
      yAxisIndex: 1,
      smooth: true,
      symbolSize: 0,
      lineStyle: {color: 'green'},
      areaStyle: {color: '#5eba5e'},
      label: {
        show: true,
        formatter: (params) => {if (params.data[0] === 60) {return "name of the other series"} else {return ''}}
      },
      data: makeData(80, 250)
    }
  ]
};


function makeData(numPoints, base) {
  const data = [];
  for (let i=1; i<=numPoints+1; i++) {
    data.push([i, base]);
    base = base + Math.random() * 10;
  }
  return structuredClone(data);
}