bar-chartlinechartecharts

How to create Funnel report in horizontal that shows exit points?


I want to create this Funnel chart that shows exit point from one path to next but doesn't seems to have one. Is there anyone that have experienced in creating similar report from echarts? enter image description here

Hopefully can hear some guidance which template should refer or how to start creating similar charts.

Thank you ..

Should this be from BAR or Line Chart? or Funnel?


Solution

  • What to use depends on if you want it to look exactly like in the image or if you want to capture the same information.

    Here are two possibilities, one using funnel and one using line with visualMap:

    Funnel:

    option = {
      series: [
        {
          type: 'funnel',
          orient: 'horizontal',
          funnelAlign: 'bottom',
          sort: 'none',
          labelLine: {show: false},
          data: [
          {value: 100, itemStyle: {color: 'blue'}},
          {value: 100, itemStyle: {color: 'pink'}},
          {value: 90, itemStyle: {color: 'blue'}},
          {value: 90, itemStyle: {color: 'pink'}},
          {value: 80, itemStyle: {color: 'blue'}},
          {value: 80, itemStyle: {color: 'pink'}},
          {value: 70, itemStyle: {color: 'blue'}},
          {value: 70, itemStyle: {color: 'pink'}},
          {value: 60, itemStyle: {color: 'blue'}},
          {value: 60, itemStyle: {color: 'transparent'}}]
        }
      ]
    };
    

    Line:

    option = {
      xAxis: {
        type: 'category',
        boundaryGap: false,
      },
      yAxis: {},
      visualMap: {
        type: 'piecewise',
        dimension: 0,
        show: false,
        pieces: [
          {max: 1, color: 'blue'},
          {max: 2, color: 'pink'},
          {max: 3, color: 'blue'},
          {max: 4, color: 'pink'},
          {max: 5, color: 'blue'},
          {max: 6, color: 'pink'},
          {max: 7, color: 'blue'},
          {max: 8, color: 'pink'},
          {max: 9, color: 'blue'},
        ]
      },
      series: [
        {
          type: 'line',
          symbol: 'none',
          lineStyle: {color: 'transparent'},
          areaStyle: {},
          data: [[0,21000], [1,21000], [2,15000], [3, 15000], [4, 11000], [5, 11000], [6, 8000], [7, 8000], [8, 4500], [9, 4500]]
        }
      ]
    };