echarts

Apache Echarts: is a holistic chart available?


I would like to create a chart like this:

enter image description here

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?


Solution

  • 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);
    }