vue3如何实现分面漏斗图

如下图：

这里我选择采用Vue3+g2plot进行实现。

参考网址：https://g2plot.antv.antgroup.com/zh/examples/more-plots/funnel/#facet-transpose

核心代码如下：

const data = [
  { stage: '简历筛选', number: 253, company: 'A公司' },
  { stage: '初试人数', number: 151, company: 'A公司' },
  { stage: '复试人数', number: 113, company: 'A公司' },
  { stage: '录取人数', number: 87, company: 'A公司' },
  { stage: '入职人数', number: 59, company: 'A公司' },
  { stage: '简历筛选', number: 303, company: 'B公司' },
  { stage: '初试人数', number: 251, company: 'B公司' },
  { stage: '复试人数', number: 153, company: 'B公司' },
  { stage: '录取人数', number: 117, company: 'B公司' },
  { stage: '入职人数', number: 79, company: 'B公司' },
];

const funnelPlot = new Funnel('container', {
  data,
  xField: 'stage',
  yField: 'number',
  seriesField: 'company',
  isTransposed: true,
  meta: {
    stage: {
      alias: '行为',
    },
    pv: {
      alias: '人数',
      formatter: (v) => `${v}次`,
    },
  },
  legend: false,
});
funnelPlot.render();

原文地址：https://blog.csdn.net/qq_37703224/article/details/140676174

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！