Is there a way to render funnel as it's supposed to (triangular shape) for the huge value difference between the cells

Question

The funnel chart doesn't render as it's supposed to for the huge value difference between the cells. For example, the topmost cell(head) value being 2000000 and the bottommost cell(neck) value being 500.

Below is the screenshot of the example editor. Please help me in shaping the funnel chart in a triangular form irrespective of the huge value difference between the cells. Thank you in advance. current expectation

In case you're unable to see the screenshot here's the data you can use in apache-echart example editor,

    option = {
  legend: {
    data: ['Ad Request', 'Impressions', 'Clicks', 'Orders', 'Revenue']
  },
  series: [
    {
      name: 'test-funnel',
      type: 'funnel',
      data: [
        {
          value: 50,
          name: 'Revenue'
        },
        {
          value: 100,
          name: 'Orders'
        },
        {
          value: 1000,
          name: 'Clicks'
        },
        {
          value: 10000,
          name: 'Impressions'
        },
        {
          value: 2000000,
          name: 'Ad Request'
        }
      ],
      label: {
        position: 'inside'
      }
    }
  ]
};

Answer 1

If you want a triangle with the funnel chart, you need something linear in your data because ECharts seems to expect an arithmetic progression with positive integers for this particular case. It can be:

• 1, 2, 3, 4, 5
• 3, 6, 9, 12, 15
• 50, 100, 150, 200, 250
• ...

Warning: you will have unexpected results if you try this with negative values, zero and decimals.

I do not know what you are trying to do exactly, but if you need to display the actual values on hover thanks to a tooltip, you may use a formatter function with a switch to determine which label to return.

Here is an example:

let option = {
  legend: {
    data: ['Label 1', 'Label 2', 'Label 3', 'Label 4', 'Label 5']
  },
  series: [
    {
      name: 'Series',
      type: 'funnel',
      data: [
        {
          value: 1,
          name: 'Label 5'
        },
        {
          value: 2,
          name: 'Label 4'
        },
        {
          value: 3,
          name: 'Label 3'
        },
        {
          value: 4,
          name: 'Label 2'
        },
        {
          value: 5,
          name: 'Label 1'
        }
      ],
      label: {
        position: 'inside'
      }
    }
  ],
  tooltip: {
    formatter: params => {
      switch (params.data.value) {
        case 5:
          return '2,000,000';
        case 4:
          return '10,000';
        case 3:
          return '1,000';
        case 2:
          return '100';
        case 1:
          return '50';
      }
    }
  }
};

let myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);

#main {
  width: 100%;
  height: 500px;
}

<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>

<div id="main"></div>

Be aware that the shape will not remain a triangle if you click on some elements in the legend!