vue中使用echarts实现人体动态图
最近一直处于开发大屏的项目,在开发中遇到了一个小知识点,在大屏中如何实现人体动态图。然后看了下echarts官方文档,根据文档中的示例调整出来自己想要的效果。

根据文档上发现 series 中 type 类型设置为 象形柱形图,象形柱图是可以设置各种具象图形元素(如图片、SVG PathData 等)的柱状图。然后边采用SVG PathData来实现,通过SVG PathData实现后发现图片更省事。这也算是长见识了,哈哈。

详细的文档大家也可以参考下官方文档:https://echarts.apache.org/zh/option.html#series-pictorialBar
接下来还是老规矩,看代码:
let symbols = [/*这里我使用的是base64方式,大家也可以根据喜好设置为 path://*/"image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgA","image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgA","image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgA","image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgA",
];option = {tooltip: {show: false, //鼠标放上去显示悬浮数据},grid: {left: '5%',right: '20%',top: "20%",bottom: "20%",containLabel: true,},xAxis: {data: ["a", "x", "b"],axisTick: {show: false,},axisLine: {show: false,},axisLabel: {show: false,},},yAxis: {max: 100,splitLine: {show: false,},axisTick: {show: false,},axisLine: {show: false,},axisLabel: {show: false,},},series: [{name: "",type: "pictorialBar",symbolClip: true,symbolBoundingData: 100,label: {normal: {show: true,position: "bottom",offset: [0, 10],formatter: "{b}\n{c}%",textStyle: {fontSize: 16,color: "#686868",},},},symbolSize: ['50%', '100%'],data: [{name: "低体重",value: 35,//采用base64方式symbol: symbols[0],//symbolSize: ['50%', '50%'],itemStyle: {normal: {color: "rgba(73, 107, 168)", //单独控制颜色},},},{name: "正常",value: 25,symbol: symbols[1],itemStyle: {normal: {color: "rgba(98, 123, 81)", //单独控制颜色},},},{name: "超重",value: 20,symbol: symbols[2],itemStyle: {normal: {color: "rgba(163, 126, 46)", //单独控制颜色},},},{name: "肥胖",value: 30,symbol: symbols[3],itemStyle: {normal: {color: "rgba(180, 79, 33)", //单独控制颜色},},},],z: 10,},{// 设置背景底色,不同的情况用这个name: "",type: "pictorialBar", //异型柱状图 图片、SVG PathDatasymbolBoundingData: 100,animationDuration: 10,z: 10,symbolSize: ['50%', '100%'],data: [{itemStyle: {normal: {color: "rgba(73, 107, 168, 0.2)",opacity: 0.4,},},value: 100,symbol: symbols[0],},{itemStyle: {normal: {color: "rgba(98, 123, 81,0.40)", //单独控制颜色opacity: 0.4,},},value: 100,symbol: symbols[1],},{itemStyle: {normal: {color: "rgba(163, 126, 46,0.40)", //单独控制颜色opacity: 0.4,},},value: 100,symbol: symbols[2],},{itemStyle: {normal: {color: "rgba(180, 79, 33, 0.4)", //单独控制颜色opacity: 0.4,},},value: 100,symbol: symbols[3],},],},],
};
以上代码便是使用base64方式实现,
另外后面优化代码采用了 图片方式,其实与base64方式区别在于引用。
const option = {tooltip: {show: false, //鼠标放上去显示悬浮数据},grid: {left: '5%',right: '25%',top: "10%",bottom: "20%",containLabel: true,},xAxis: {data: ["a", "x", "b"],axisTick: {show: false,},axisLine: {show: false,},axisLabel: {show: false,},},yAxis: {max: 100,splitLine: {show: false,},axisTick: {show: false,},axisLine: {show: false,},axisLabel: {show: false,},},series: [{name: "",type: "pictorialBar",symbolClip: true,symbolBoundingData: 100,label: {normal: {show: true,position: "bottom",offset: [0, 10],formatter: "{b}\n{c}%",textStyle: {fontSize: 14,color: "#fff",},},},data: [{name: "低体重",value: 35,symbol: 'image://' + require("../assets/images/1-image.png"),symbolSize: ['50%', '100%'],itemStyle: {normal: {color: "rgba(73, 107, 168)", //单独控制颜色},},},{name: "正常",value: 25,symbol: 'image://' + require("../assets/images/2-image.png"),symbolSize: ['50%', '100%'],itemStyle: {normal: {color: "rgba(98, 123, 81)", //单独控制颜色},},},{name: "超重",value: 20,symbol: 'image://' + require("../assets/images/3-image.png"),symbolSize: ['50%', '100%'],itemStyle: {normal: {color: "rgba(163, 126, 46)", //单独控制颜色},},},{name: "肥胖",value: 30,symbol: 'image://' + require("../assets/images/4-image.png"),symbolSize: ['50%', '100%'],itemStyle: {normal: {color: "rgba(180, 79, 33)", //单独控制颜色},},},],z: 10,},{// 设置背景底色,不同的情况用这个name: "",type: "pictorialBar", //异型柱状图 图片、SVG PathDatasymbolBoundingData: 100,animationDuration: 10,z: 10,data: [{itemStyle: {normal: {opacity: 0.6,},},value: 100,symbol: 'image://' + require("../assets/images/1-image.png"),symbolSize: ['50%', '100%'],},{itemStyle: {normal: {opacity: 0.6,},},value: 100,symbol: 'image://' + require("../assets/images/2-image.png"),symbolSize: ['50%', '100%'],},{itemStyle: {normal: {opacity: 0.6,},},value: 100,symbol: 'image://' + require("../assets/images/3-image.png"),symbolSize: ['50%', '100%'],},{itemStyle: {normal: {opacity: 0.6,},},value: 100,symbol: 'image://' + require("../assets/images/4-image.png"),symbolSize: ['50%', '100%'],},],},], };
相关文章:
vue中使用echarts实现人体动态图
最近一直处于开发大屏的项目,在开发中遇到了一个小知识点,在大屏中如何实现人体动态图。然后看了下echarts官方文档,根据文档中的示例调整出来自己想要的效果。 根据文档上发现 series 中 type 类型设置为 象形柱形图,象形柱图是…...
结构化思维助力Prompt创作:专业化技术讲解和实践案例
结构化思维助力Prompt创作:专业化技术讲解和实践案例 最早接触 Prompt engineering 时, 学到的 Prompt 技巧都是: 你是一个 XX 角色… 你是一个有着 X 年经验的 XX 角色… 你会 XX, 不要 YY.. 对于你不会的东西, 不要瞎说!…对比什么技巧都不用, 直接像使用搜索引…...
【0272】postgres内核分配 MyBackendId 实现原理(MyBackendId、MyProc、shmInvalBuffer)(三)
相关文章: 【0255】揭晓pg内核中MyBackendId的分配机制(后端进程Id,BackendId)(一) 【0256】揭晓pg内核中MyBackendId的分配机制(后端进程Id,BackendId)(二) 第一个backend process前,shmInvalBuffer的值情况 (gdb) p *shmInvalBuffer $153 = {minMsgNum =...
AUKFUKF的MATLAB程序,含源码
adaptive UKF与UKF效果对比 只有一个m文件,直接拖到MATLAB上面就能运行并输出结果了 部分结果 程序源码 % adaptive UKF与UKF效果对比 % author:Evand % 作者联系方式:evandjiang@qq.com(除前期达成一致外,付费咨询) % date: 2023-11-07 % Ver1 clear;clc;close all; %%…...
STM32(13)串口
串口的数据帧 1.空闲 2.起始位 3.数据位 4.校验位(可有可无) 为了验证数据传输是否出错而设立的比特位 1和4传输方式比较常见 校验规则: 根据1的个数,校验位会自己补0或1 5.停止位 例子: 同步通信 异步通信 波特率 …...
Element(Java后端入门篇)
Element(Java后端入门篇) Element:是饿了么公司前端开发团队提供的一套基于Vue的网站组件库,用于快速构建网页组件:组成网页的部件,例如超链接、按钮、图片、表格等等~ Element快速入门 引入Element的css、js文件和V…...
qt5和gstreamer开发环境安装配置
构建KDE虚拟机环境 1、安装virtualBox 2、导入镜像 配置QtCreator开发环境 https://blog.csdn.net/weixin_45824067/article/details/131970558(安装的是qt6) https://blog.csdn.net/m0_70849943/article/details/132472950 (安装的qt版本为5.14.2&…...
基于Python3的数据结构与算法 - 10 计数排序
一、问题 对列表进行排序,已知列表中的数范围都在0到100之间。设计时间复杂度为O(n)的算法。 二、解决思路 我们已知数字的范围,那么我们可以将数字的个数得到: 例如:有一个0~5的列表 [1,3,2,4,1,2,3,1,3,5] 则共有0个0&am…...
力扣206反转链表
206.反转链表 力扣题目链接(opens new window) 题意:反转一个单链表。 示例: 输入: 1->2->3->4->5->NULL 输出: 5->4->3->2->1->NULL 1,双指针 2,递归。递归参考双指针更容易写, 为什么不用头插…...
【python实战】--图片创作视频
系列文章目录 文章目录 系列文章目录前言一、VideoWriter_fourcc()常见的编码参数二、使用步骤1.引入库 总结 前言 一、VideoWriter_fourcc()常见的编码参数 cv2.VideoWriter_fourcc(‘M’, ‘P’, ‘4’, ‘V’)MPEG-4编码 .mp4 可指定结果视频的大小cv2.VideoWriter_fourcc…...
数据挖掘实战 —— 抖音用户浏览行为数据分析与挖掘(代码部分)
文章: 数据挖掘实战 —— 抖音用户浏览行为数据分析与挖掘(一) 数据挖掘实战 —— 抖音用户浏览行为数据分析与挖掘(二) 数据挖掘实战 —— 抖音用户浏览行为数据分析与挖掘(总) 代码: 数据挖掘实战 —— 抖音用户浏览行为数据分析与挖掘(代码…...
AWS EKS(AWS云里面的K8S)
问题 初步使用EKS 步骤 安装AWS CLI 第一步是在自己的笔记本电脑上面安装AWS提供的CLI(命令行工具),这里就不详细介绍了,都是next的步骤。具体可以参考啊aws cli安装的相关教程网页,具体地址如下: http…...
Azkaban 大数据 任务调度
参考视频:尚硅谷大数据Azkaban 3.x教程(全新发布)_哔哩哔哩_bilibili Azkaban: 是一个定时、批量工作流任务调度器(工作流程调度,定时调度) 常见的开源调度系统: 简单单一的任务调度: Linux的…...
从预训练到通用智能(AGI)的观察和思考
1.预训练词向量 预训练词向量(Pre-trained Word Embeddings)是指通过无监督学习方法预先训练好的词与向量之间的映射关系。这些向量通常具有高维稠密特征,能够捕捉词语间的语义和语法相似性。最著名的预训练词向量包括Google的Word2Vec&#…...
四种垃圾回收算法
1.标记清除算法 该算法先标记,后清除,将所有需要回收的算法进行标记,然后清除;这种算法的缺点是:效率比较低;标记清除后会出现大量不连续的内存碎片,这些碎片太多可能会使存储大对象会触发GC回…...
stm32f103zet6笔记1-led工程
1、选择串口调试 2、LED0连接到PB5,PB5设置为推挽输出。PE5同理。 3、生成成对的.c,.h文件。 4、debugger选择j-link。 5、connection选择SWD。 6、编写bsp_led.c,bsp_led.h文件。 7、下载调试,可以看到LED0 500ms闪烁一次,LED1 1000ms闪烁一…...
OpenDDS的Qos策略
目录 1、前言2、QoS策略2.1、LIVELINESS2.2、RELIABILITY2.3、HISTORY2.4、DURABILITY2.5、DURABILITY_SERVICE2.6 、RESOURCE_LIMITS2.7、PARTITION2.8、DEADLINE2.9、LIFESPAN2.10、USER_DATA2.11、TOPIC_DATA2.12、GROUP_DATA2.13、TRANSPORT_PRIORITY2.14、LATENCY_BUDGET2…...
string基本操作(C++)
增 1.1 “” str str ss;cout << str << endl; //234561提取字串 2.1 substr substr(pos): 提取从位置pos开始到末尾的子串。 #include <iostream> #include <string> using namespace std;int main(){string str "123456";//substr(pos…...
【网站项目】123网上书城系统
🙊作者简介:拥有多年开发工作经验,分享技术代码帮助学生学习,独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。🌹赠送计算机毕业设计600个选题excel文件,帮助大学选题。赠送开题报告模板ÿ…...
LeetCode148.排序链表
题目 给你链表的头结点 head ,请将其按 升序 排列并返回 排序后的链表 。 示例 输入:head [4,2,1,3] 输出:[1,2,3,4] 输入:head [-1,5,3,4,0] 输出:[-1,0,3,4,5] 输入:head [] 输出:[] 思路…...
OpenClaw效率对比:Qwen2.5-VL-7B与传统OCR工具在文档处理中的表现
OpenClaw效率对比:Qwen2.5-VL-7B与传统OCR工具在文档处理中的表现 1. 测试背景与动机 最近在整理公司历史项目文档时,遇到了一个棘手的问题:大量扫描版PDF和图片格式的技术文档需要数字化处理。这些文档包含代码片段、手写注释和复杂表格&a…...
鸿蒙与微信开发深度融合:技术适配、实操指南与生态展望
鸿蒙与微信开发深度融合:技术适配、实操指南与生态展望 随着鸿蒙系统(HarmonyOS NEXT)的全面普及,其分布式架构、原生生态的优势日益凸显,成为移动应用开发的新赛道。微信作为国民级应用,其鸿蒙版的适配与开…...
从STM32F207到F030:多路ADC采样的那些坑与填坑实录
从STM32F207到F030:多路ADC采样的那些坑与填坑实录 在嵌入式开发领域,STM32系列MCU因其出色的性能和丰富的生态而广受欢迎。然而,当开发者从高端系列(如STM32F207)转向入门级系列(如STM32F030)时…...
保姆级教程:在绿联NAS的Docker里部署PaddleOCR,打造本地私有化文字识别服务
绿联NASDockerPaddleOCR:三步构建家庭级隐私文字识别中心 想象一下这样的场景:周末整理书房时,你翻出一叠泛黄的老照片和手写笔记,想将它们数字化保存却又担心上传到云端OCR服务会泄露家庭隐私;或是收到一份重要合同需…...
GAPSO-LSTM:遗传粒子群优化算法优化LSTM超参数的数据回归预测方法
GAPSO-LSTM,即遗传粒子群优化算法优化LSTM的超参数做数据回归预测,多输入单输出,预测精度高于PSO-LSTM,算法原理为串行GAPSO,PSO的寻优结果再引入高斯变异和个体杂交,可以解决PSO容易陷入局部最优的问题。一…...
2026届最火的五大降AI率方案推荐
Ai论文网站排名(开题报告、文献综述、降aigc率、降重综合对比) TOP1. 千笔AI TOP2. aipasspaper TOP3. 清北论文 TOP4. 豆包 TOP5. kimi TOP6. deepseek 得从语言、逻辑以及细节这三方面着手,来降低AI生成内容所留下的痕迹。在语言方面…...
STM32单片机技术解析与应用实践
1. STM32的崛起背景与市场格局演变在2007年之前,单片机市场呈现"三足鼎立"的格局:以STC为代表的51系列8位机占据教学和工业控制领域,MSP430在低功耗应用场景表现突出,AVR和PIC则在特定细分市场各有所长。这些8位和16位单…...
DSI3协议四大模式(CRM/PDCM/BDM/DM)全解析:从汽车胎压监测到电池管理,看它如何工作
DSI3协议四大模式深度解析:从胎压监测到电池管理的实战应用 汽车电子系统正经历着从分布式架构向集中式控制的转型,而DSI3(Distributed System Interface 3)协议凭借其独特的单线通信设计,正在成为连接各类车载传感器的…...
PanSearch网盘影视资源搜索聚合工具源码解析:集成多引擎搜索技术,畅享跨平台资源检索
在数字化信息爆炸的时代,影视资源的获取方式日益多样化,但如何在海量资源中快速定位所需内容,成为用户面临的一大挑战。PanSearch网盘影视资源搜索聚合工具应运而生,它通过集成多引擎搜索技术,支持百度网盘、阿里云盘等…...
x86汇编如何使用伪指令实现if,else,while,dowhile,switch-case
x86汇编如何使用伪指令实现if,else,while,dowhile,switch-case 1)汇编伪指令介绍 伪指令是汇编器提供的语法规则,它主要为程序员提供语法糖简化汇编代码的编写。常见的伪指令包括条件汇编类(IF&…...
