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%'],},],},],	};

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

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

相关文章

SpringCloud之Nacos入门与实战系列

目录 一、Nacos介绍 1.1、配置中心和注册中心的概念 1.2 Nacos 优点 二、Nacos的使用 2.1 以单机模式启动Nacos 2.2 Nacos部署方式介绍 2.3 配置数据源 2.4 开启控制台权限登录 三、配置中心的使用 3.1 创建配置信息 3.2 SpringBoot使用配置中心 四、注册中心的使用 4…

图书推荐|Word文稿之美

让你的文档从平凡到出众! 本书内容 《Word文稿之美》是一本全面介绍Word排版技巧和应用的实用指南。从初步认识数字排版到高效利用模板、图文配置和表格与图表的排版技巧,再到快速修正错误和保护文件,全面系统地讲解数字排版的技术和能力&…

基于Docker部署本地ChatGPT环境

基于Docker部署本地ChatGPT环境 一、拉取镜像 docker pull pengzhile/pandora二、运行镜像 docker run -e PANDORA_CLOUDcloud -e PANDORA_SERVER0.0.0.0:8899 -p 8899:8899 -d pengzhile/pandora三、查看容器是否启动成功 docker ps四、登录 http://IP:8899 这里有两种方…

ssm+springboot音乐播放器网站mybatis+jsp

测试流程 (1) 登录系统、填写用户名、密码选择角色,主要内容:进行权限控制。 (2) 用户查看音乐信息、音乐资讯功能,主要是测试系统实用性、方便性。 (3) 信息修…

【C++】类和对象之初始化列表与static成员

个人主页 : zxctscl 文章封面来自:艺术家–贤海林 如有转载请先通知 文章目录 1. 前言2. 再谈构造函数2.1 构造函数体赋值2.2 初始化列表2.3 explicit关键字 3. static成员3.1 概念3.2 特性 1. 前言 在前面的博客中已经分享有关构造函数 【C】构造函数和…

9.WEB渗透测试-Linux基础知识-Linux用户权限管理(上)

免责声明:内容仅供学习参考,请合法利用知识,禁止进行违法犯罪活动! 内容参考于: 易锦网校会员专享课 上一个内容:8.WEB渗透测试-Linux基础知识-Linux基础操作(二)-CSDN博客 用户管…

uniapp实现进度条组件

首先&#xff0c;在uniapp项目中创建一个自定义组件&#xff0c;可以命名为Progress.vue。在Progress.vue中&#xff0c;编写如下代码&#xff1a; <template><view class"progress"><view class"progress-bar" :style"{width: progr…

缓存淘汰策略看完这篇就够了

LFU 缓存淘汰算法 LFU 是 Least Frequently Used 的缩写&#xff0c;即 最少使用 缓存淘汰算法。LFU算法根据数据项在缓存中的访问频率来决定淘汰哪些数据项。访问频率越高 的数据项被认为是更重要的&#xff0c;访问频率越低 的数据项被认为是更不重要的。 LFU算法的具体工作原…

Kali Linux 2024.1

Kali Linux 2024.1刚刚发布&#xff0c;标志着这个备受欢迎的安全重点Linux发行版在今年的首次重大更新。以其先进的渗透测试和安全审计功能而闻名&#xff0c;它是安全专业人员和爱好者的首选工具。 Kali 2024.1 亮点 本次发布由 Linux 内核 6.6 提供支持&#xff0c;突出了…

C语言qsort函数介绍

前言 学到了函数指针&#xff0c;那这篇博客我们可以根据函数指针&#xff0c;了解一个函数qsort的应用与模拟实现 欢迎关注个人主页&#xff1a;小张同学zkf 若有疑问 评论区见 目录 1.回调函数 2.qsort函数使用 3.qsort模拟实现 1.回调函数 讲这个东西之前我们来认识一下…

mq基础类设计

消息队列就是把阻塞队列这样的数据结构单独提取成一个程序独立进行部署。——>实现生产者消费者模型。 但是阻塞队列是在一个进程内部进行的&#xff1b; 消息队列是在进程与进程之间进行实现的&#xff0c; 解耦合&#xff1a;就是在分布式系统中&#xff0c;A服务器调用B…

Tomcat -2

① 单机反向代理 7-2 代理服务器 7-5 tomcat 设置 7-3 测试&#xff1a; 代理服务器那里写什么就显示什么 ② 多机反向代理 实现动静分离和负载均衡 7-2 nginx 7-3 7-5 测试&#xff1a; 看静态&#xff1a; 看动态&#xff1a; ③ 反向代理多机多级 7-2 7-1 和 7-4 7-3…

【STM32】STM32学习笔记-读写内部FLASH 读取芯片ID(49)

00. 目录 文章目录 00. 目录01. FLASH概述02. 读写内部FLASH接线图03. 读写内部FLASH相关API04. 读写内部FLASH程序示例05. 读写芯片ID接线图06. 读写芯片ID程序示例07. 程序示例下载08. 附录 01. FLASH概述 STM32F10xxx内嵌的闪存存储器可以用于在线编程(ICP)或在程序中编程(…

华为OD机试 - 数字排列 - 深度优先搜索dfs算法(Java 2024 C卷 100分)

目录 专栏导读一、题目描述二、输入描述三、输出描述1、输入2、输出3、说明 四、解题思路五、Java算法源码六、效果展示1、输入2、输出3、说明 华为OD机试 2024C卷题库疯狂收录中&#xff0c;刷题点这里 专栏导读 本专栏收录于《华为OD机试&#xff08;JAVA&#xff09;真题&a…

外部存储器接口(EMIF)

外部存储器接口&#xff08;EMIF&#xff09; 该设备支持双核架构&#xff1b;为了为每个CPU子系统提供一个专用的EMIF&#xff0c;该设备支持两个EMIF模块——EMIF1和EMIF2。两个模块完全相同&#xff0c;具有相同的功能集&#xff0c;但具有不同的地址/数据大小。EMIF1在CPU…

Unity 角色控制(初版)

角色控制器组件&#xff0c;当然是将组件放在角色上了。 using System.Collections; using System.Collections.Generic; using UnityEngine;public class c1 : MonoBehaviour {// 获取角色控制器private CharacterController player;void Start(){// 加载角色控制器player …

机器学习 | 模型性能评估

目录 一. 回归模型的性能评估1. 平均平方误差(MSE)2. 平均绝对误差(MAE)3. R 2 R^{2} R2 值3.1 R 2 R^{2} R2优点 二. 分类模型的性能评估1. 准确率&#xff08;Accuracy&#xff09;2. 召回率&#xff08;Recall&#xff09;3. 精确率&#xff08;Precision&#xff09;4. …

大模型学习笔记五:RAG

文章目录 一、RAG介绍1)局限性2)通过检索增强生成二、RAG系统的基本搭建流程1)搭建流程简介2)文档的加载和切割3)检索引擎4)LLM接口封装5)prompt模板6)RAG Pipeline初探7)关键字检索局限性三、向量检索1)文本向量2)向量相似度计算3)向量数据库4)基于向量检索的RAG…

电源完整性设计的重要三步!

电源模块布局布线 电源模块是电子设备的能量来源&#xff0c;其性能与布局直接影响到整个系统的稳定性和效率。正确的布局和走线不仅能减少噪声干扰&#xff0c;还能确保电流的顺畅流通&#xff0c;从而提高整体性能。 1、电源模块布局 ● 源头处理&#xff1a;电源模块作为…

Java 面试题

Java 基础 以下代码执行结果&#xff1f; 示例1&#xff1a; public static void main(String[] args) {int a 0;Integer b 0;String c "0";String d new String("0");change(a, b, c, d);System.out.println(a "|" b "|" …