vue3如何实现分面漏斗图

news2024/9/21 11:00:38

如下图:
在这里插入图片描述

这里我选择采用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();

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1947308.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

东京裸机云多IP服务器全面分析

东京裸机云多IP服务器是一种提供多IP地址分配和高性能网络服务的云计算解决方案,广泛应用于需要多IP管理和高稳定性的网络应用。下面将从几个方面具体介绍东京裸机云多IP服务器,rak部落为您整理发布东京裸机云多IP服务器的全面分析。 在数字化时代&#…

Docker 部署常用中间件(redis,rabbitMQ,mysql8,es,kibana,nginx等)亲测成功~~~

Docker 部署常用中间件 在日常开发中必要的环境,大多数都是单点后续持续更新集群模式~~~ docker 安装reids docker pull redis:7.2.5 编辑redis.conf # 绑定地址,默认只允许本机访问 # bind 192.168.1.100 10.0.0.1 # bind 127.0.0.1 ::1 bind 0.0…

学员心得 | 做好这几点,轻松通关云计算HCIE3.0!

烈日当空,骄阳似火,在这炎炎夏日迎来了自己今年一份满意的答卷--华为HCIE云计算“通过”的e妹儿(嘿嘿!证书也快了)。此时此刻,想把自己“辛勤劳作”备考IE的一些经历和建议留给后来的同路人。 “世界上最可…

MySQL练手 --- 619. 只出现一次的最大数字

题目链接:619. 只出现一次的最大数字 思路 这是一个简单题,只出现一次的最大数字,顾名思义,分两个阶段,第一个阶段筛选出只出现一次的数字,第二阶段在生成的新表中筛选出最大值即可。 解题过程 生成一张…

iOS object-C 解答算法:找到所有数组中消失的数字(leetCode-448)

找到所有数组中消失的数字(leetCode-448) 题目如下图:(也可以到leetCode上看完整题目,题号448) 光看题看可能有点难以理解,我们结合示例1来理解一下这道题. 有8个整数的数组 nums [4,3,2,7,8,2,3,1], 求在闭区间[1,8]范围内(即1,2,3,4,5,6,7,8)的数字,哪几个没有出现在数组 …

华为OD机试 - 二叉树计算(Java JS Python C C++)

题目描述 给出一个二叉树如下图所示: 请由该二叉树生成一个新的二叉树,它满足其树中的每个节点将包含原始树中的左子树和右子树的和。 左子树表示该节点左侧叶子节点为根节点的一颗新树;右子树表示该节点右侧叶子节点为根节点的一颗新树。 输入描述 2行整数,第1行表示二叉…

MySQL数据库-备份恢复

一、MySQL日志管理 1.为什么需要日志 用于排错用来做数据分析了解程序的运行情况,了解MySQL的性能 2.日志作用 在数据库保存数据时,有时候不可避免会出现数据丢失或者被破坏,这样情况下,就必须保证数据的安全性和完整性&#…

Spring AI (五) Message 消息

5.Message 消息 在Spring AI提供的接口中,每条信息的角色总共分为三类: SystemMessage:系统限制信息,这种信息在对话中的权重很大,AI会优先依据SystemMessage里的内容进行回复; UserMessage:用…

c++笔记4

目录 深度优先搜索DFS DFS的复杂度 DFS与递归 递归与暴力枚举 递归树 DFS与栈 DFS的搜索剪枝 搜索剪枝与优化 可行性剪枝 最优化剪枝 减少等效的分支 优化搜索顺序 搜索的记忆化 搜索的复杂度 大多时候,搜索的复杂度都是指数级的。各种剪枝方案&#…

RK3568笔记四十三:MPU6050驱动开发(硬件I2C_3)

若该文为原创文章,转载请注明原文出处。 正点原子提供的I2C有测试ap3216c,SH3001等传感器,根据手册操作可以实现效果。 这里记录使用I2C3驱动MPU6050. 记录原因是前面有模拟I2C,但硬件如何使用,有点不是很清楚&#…

[C++] string管理:深浅拷贝写时拷贝

文章目录 拷贝问题的引入问题代码string类的构造函数String 类的析构函数测试入口函数(问题)详细分析 浅拷贝深拷贝传统版与现代版的String类传统String类现代版String类 写时拷贝先构造的对象后析构的影响写时拷贝举例及测试样例代码举例测试用例 拷贝问…

BGP之选路MED

原理概述 当一台BGP路由器中存在多条去往同一目标网络的BGP路由时,BGP协议会对这些BGP路由的属性进行比较,以确定去往该目标网络的最优BGP路由。BGP路由属性的比较顺序为Preferred Value属性、Local Preference属性、路由生成方式、AS_Path属性、Origin属…

react中路由跳转以及路由传参

一、路由跳转 1.安装插件 npm install react-router-dom 2.路由配置 路由配置:react中简单的配置路由-CSDN博客 3.实现代码 // src/page/index/index.js// 引入 import { Link, useNavigate } from "react-router-dom";function IndexPage() {const …

大数据之Oracle同步Doris数据不一致问题

数据同步架构如下: 出现的问题: doris中的数据条数 源库中的数据条数 总数完全不一致。 出现问题的原因: 在Dinky中建立表结构时,缺少对主键属性的限制 primary key(ID) not enforced 加上如上语句,数据条数解决一致 …

WPF+Mvvm项目入门完整教程-仓储管理系统(二)

目录 一、搭建一个主界面框架二、实现步骤1.主界面区域划分2.主界面区域实现 一、搭建一个主界面框架 主要实现主界面的框架样式和基础功能。这里特别说明一下,由于MvvmLight 已经过时不在维护,本项目决定将MvvmLight框架变更为 CommunityToolkit.Mvvm …

标题:探索pdf2image:将PDF文档转化为图像的Python魔法

标题:探索pdf2image:将PDF文档转化为图 像的Python魔法 背景 在数字时代,我们经常需要处理各种格式的文档,尤其是PDF文件。PDF以其跨平台的可读性和稳定性而广受欢迎。然而,有时我们需要将PDF文件转换成图像格式&am…

Golang | Leetcode Golang题解之第282题给表达式添加运算符

题目: 题解: func addOperators(num string, target int) (ans []string) {n : len(num)var backtrack func(expr []byte, i, res, mul int)backtrack func(expr []byte, i, res, mul int) {if i n {if res target {ans append(ans, string(expr))}…

Linux--Socket编程预备

目录 1. 理解源 IP 地址和目的 IP 地址 2.端口号 2.1端口号(port)是传输层协议的内容 2.2端口号范围划分 2.3理解 "端口号" 和 "进程 ID" 2.4理解 socket 3.传输层的典型代表 3.1认识 TCP 协议 3.2认识 UDP 协议 4. 网络字节序 5. socket 编程接…

【数据结构】--- 栈和队列

前言 前面学习了数据结构的顺序表、单链表、双向循环链表这些结构;现在就来学习栈和队列,这里可以简单的说栈和队列是具有特殊化的线性表 一、栈 1.1、栈的概念和结构 栈是一种遵循先入后出逻辑的线性数据结构。 栈是一种特殊的线性表,它只允…

矿场运输车4G视频监控管理解决方案

一、背景介绍 随着科技的不断进步和智能化时代的来临,矿业运输行业也在寻求更高效率与安全的管理手段。矿场运输车4G视频监控管理解决方案是一种基于4G网络技术的视频监控系统,专门用于监测和管理矿场内运输车辆的工作状态和安全情况。该方案为矿场运输…