vue3如何实现分面漏斗图

如下图:

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

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

核心代码如下:

html 复制代码
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();
相关推荐
土豆湿10 分钟前
拥抱极简主义前端开发:NoCss.js 引领无 CSS 编程潮流
开发语言·javascript·css
J总裁的小芒果19 分钟前
Vue3 el-table 默认选中 传入的数组
前端·javascript·elementui·typescript
Lei_zhen9622 分钟前
记录一次electron-builder报错ENOENT: no such file or directory, rename xxxx的问题
前端·javascript·electron
辣条小哥哥23 分钟前
electron主进程和渲染进程之间的通信
javascript·electron·ecmascript
咖喱鱼蛋24 分钟前
Electron一些概念理解
前端·javascript·electron
yqcoder25 分钟前
Vue3 + Vite + Electron + TS 项目构建
前端·javascript·vue.js
ggdpzhk3 小时前
VUE:基于MVVN的前端js框架
前端·javascript·vue.js
小曲曲4 小时前
接口上传视频和oss直传视频到阿里云组件
javascript·阿里云·音视频
学不会•5 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
EasyNTS6 小时前
H.264/H.265播放器EasyPlayer.js视频流媒体播放器关于websocket1006的异常断连
javascript·h.265·h.264