当前位置: 首页 > news >正文

vue中使用echarts实现人体动态图

最近一直处于开发大屏的项目,在开发中遇到了一个小知识点,在大屏中如何实现人体动态图。然后看了下echarts官方文档,根据文档中的示例调整出来自己想要的效果。
在这里插入图片描述
根据文档上发现 seriestype 类型设置为 象形柱形图,象形柱图是可以设置各种具象图形元素(如图片、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网上书城系统

&#x1f64a;作者简介&#xff1a;拥有多年开发工作经验&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。&#x1f339;赠送计算机毕业设计600个选题excel文件&#xff0c;帮助大学选题。赠送开题报告模板&#xff…...

LeetCode148.排序链表

题目 给你链表的头结点 head &#xff0c;请将其按 升序 排列并返回 排序后的链表 。 示例 输入&#xff1a;head [4,2,1,3] 输出&#xff1a;[1,2,3,4] 输入&#xff1a;head [-1,5,3,4,0] 输出&#xff1a;[-1,0,3,4,5] 输入&#xff1a;head [] 输出&#xff1a;[] 思路…...

【Axure高保真原型】引导弹窗

今天和大家中分享引导弹窗的原型模板&#xff0c;载入页面后&#xff0c;会显示引导弹窗&#xff0c;适用于引导用户使用页面&#xff0c;点击完成后&#xff0c;会显示下一个引导弹窗&#xff0c;直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...

XCTF-web-easyupload

试了试php&#xff0c;php7&#xff0c;pht&#xff0c;phtml等&#xff0c;都没有用 尝试.user.ini 抓包修改将.user.ini修改为jpg图片 在上传一个123.jpg 用蚁剑连接&#xff0c;得到flag...

java 实现excel文件转pdf | 无水印 | 无限制

文章目录 目录 文章目录 前言 1.项目远程仓库配置 2.pom文件引入相关依赖 3.代码破解 二、Excel转PDF 1.代码实现 2.Aspose.License.xml 授权文件 总结 前言 java处理excel转pdf一直没找到什么好用的免费jar包工具,自己手写的难度,恐怕高级程序员花费一年的事件,也…...

SCAU期末笔记 - 数据分析与数据挖掘题库解析

这门怎么题库答案不全啊日 来简单学一下子来 一、选择题&#xff08;可多选&#xff09; 将原始数据进行集成、变换、维度规约、数值规约是在以下哪个步骤的任务?(C) A. 频繁模式挖掘 B.分类和预测 C.数据预处理 D.数据流挖掘 A. 频繁模式挖掘&#xff1a;专注于发现数据中…...

基于数字孪生的水厂可视化平台建设:架构与实践

分享大纲&#xff1a; 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效 近几年&#xff0c;数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段&#xff0c;基于数字孪生的水厂可视化平台的…...

数据链路层的主要功能是什么

数据链路层&#xff08;OSI模型第2层&#xff09;的核心功能是在相邻网络节点&#xff08;如交换机、主机&#xff09;间提供可靠的数据帧传输服务&#xff0c;主要职责包括&#xff1a; &#x1f511; 核心功能详解&#xff1a; 帧封装与解封装 封装&#xff1a; 将网络层下发…...

解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错

出现的问题 安装 flash-attn 会一直卡在 build 那一步或者运行报错 解决办法 是因为你安装的 flash-attn 版本没有对应上&#xff0c;所以报错&#xff0c;到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本&#xff0c;cu、torch、cp 的版本一定要对…...

【C语言练习】080. 使用C语言实现简单的数据库操作

080. 使用C语言实现简单的数据库操作 080. 使用C语言实现简单的数据库操作使用原生APIODBC接口第三方库ORM框架文件模拟1. 安装SQLite2. 示例代码:使用SQLite创建数据库、表和插入数据3. 编译和运行4. 示例运行输出:5. 注意事项6. 总结080. 使用C语言实现简单的数据库操作 在…...

JVM暂停(Stop-The-World,STW)的原因分类及对应排查方案

JVM暂停(Stop-The-World,STW)的完整原因分类及对应排查方案,结合JVM运行机制和常见故障场景整理而成: 一、GC相关暂停​​ 1. ​​安全点(Safepoint)阻塞​​ ​​现象​​:JVM暂停但无GC日志,日志显示No GCs detected。​​原因​​:JVM等待所有线程进入安全点(如…...

C++.OpenGL (14/64)多光源(Multiple Lights)

多光源(Multiple Lights) 多光源渲染技术概览 #mermaid-svg-3L5e5gGn76TNh7Lq {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-3L5e5gGn76TNh7Lq .error-icon{fill:#552222;}#mermaid-svg-3L5e5gGn76TNh7Lq .erro…...