漏斗图如何自定义显示文字内容？

Question

我正在绘制一个漏斗图，我希望能够每一个漏斗里头的标签能够自定义展示内容，显示两行不同的文字，同时右侧的标签也需要能够自定义内容。我应该怎么来实现这样的效果呢？
类似下图中的效果：

Answer 1

三种方法:

echart官方示例:

使用两个漏斗图进行叠加即可:

https://echarts.apache.org/examples/zh/editor.html?c=funnel-c...

可以使用G2:

https://g2.antv.antgroup.com/zh/examples/general/funnel/#pyramid

然后调整label就行:

https://g2.antv.antgroup.com/spec/label/overview

比如:

  .label({
    text: (d) => `${d.action} ${d.pv}`,
    textAlign: 'left',
  })
    .label({
    text: (d) => `${d.action} ${d.pv}`,
    textAlign: 'right',
    position: 'left'
  })
  .label({
    text: (d) => `${(d.rate * 100).toFixed(1)}%`,
    position: 'inside',
    transform: [{ type: 'contrastReverse' }],
  })

也可以用VChart:

配置

  outerLabel: {
    position: 'right',
    visible: true
  },

https://www.visactor.io/vchart/demo/funnel-chart/basic-funnel

另一个类似问题回答

https://segmentfault.com/q/1010000044167713/a-1020000044168725