javascript 有没有一种方法来渲染漏斗，因为它应该(三角形)的巨大差异的价值单元格

xxe27gdn 于 2023-01-01 发布在 Java

关注(0)|答案(1)|浏览(133)

由于单元格之间存在巨大的值差异，漏斗图无法正常呈现。例如，最上面的单元格（头部）值为2000000，而最下面的单元格（颈部）值为500。
下面是示例编辑器的屏幕截图。请帮助我将漏斗图塑造成三角形的形状，而不考虑单元格之间的巨大差异。提前感谢。current expectation
如果你无法看到截图，这里有一些数据可以在apache-echart示例编辑器中使用。

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'
      }
    }
  ]
};

JavaScript

来源：https://stackoverflow.com/questions/74870599/is-there-a-way-to-render-funnel-as-its-supposed-to-triangular-shape-for-the-h

1条答案

按热度按时间

kg7wmglp1#

如果你想要一个三角形的漏斗图，你需要一些线性的数据，因为ECharts似乎期待一个算术级数与正整数在这个特定的情况下。

一、二、三、四、五
三、六、九、十二、十五
五十、一百、一百五十、二百、二百五十
...
- 警告：**如果您尝试使用 * 负值、零 * 和 * 小数 *，将得到意外结果。

我不知道你到底想做什么，但是如果你需要通过工具提示来显示悬停时的实际值，你可以使用一个带有switch的格式器函数来确定返回哪个标签。
下面是一个例子：

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>

- 请注意，如果单击图例中的某些元素，形状将不再是三角形!**

赞(0）回复(0）举报 2023-01-01

我来回答

javascript 有没有一种方法来渲染漏斗，因为它应该(三角形)的巨大差异的价值单元格

1条答案

相关问题

热门标签

最新问答