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…

android 使用协程CoroutineScope 实现定时器

满足延迟执行、立即执行,每次任务间隔时长,总时长的任务 使用1 class TimeViewModel:Viewmodel(){//测试延迟5秒开始执行任务,然后每隔1秒执行1次,总执行时间60秒fun testTime(){var startTime System.currentTimeMillis()log(…

图书推荐|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) 信息修…

你喜欢在那种迷宫中探索呢?

迷宫中的探索者:程序员的多元职业赛道 在信息时代的洪流中,程序员们就像是勇敢的探险家,穿梭于由代码构建的迷宫之中。这座迷宫中,既有前端的绚烂花园,也有后端的深邃洞穴,更有数据科学的神秘密室。每个程…

Maven能解决什么问题?为什么要用?

如果没有maven,我们在开发一个应用的时候,需要自己先确定要引入哪些第三方的jar包,并且要去找到这些jar包,把他们导入到项目中,而且最痛苦的时候各个jar包之间的兼容性和冲突的问题。 jar包弄好了之后,我们…

mysql 8 修改账号密码

一 进入Mysql bin目录 cmd 运行(跳过密码),运行完不要关闭 mysqld --console --skip-grant-tables --shared-memory 二 新打开一个cmd mysql bin 目录下登录,密码输入时,直接回车 mysql -uroot -p 三 修改密码 m…

【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博客 用户管…

kafka在linux环境下的执行命令

#创建topic /data/app/kafka/bin/kafka-topics.sh --create --bootstrap-server 127.0.0.1:8318 --replication-factor 1 --partitions 12 --topic yunpei-track --command-config /data/app/kafka/config/admin.conf #新增用户,新建用户mytest /data/app/kafka/bin/kafka-…

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算法的具体工作原…

c# 查询dataset数据集

1、读取xml&#xff0c;见上一个博客 2、加载到dataset中&#xff0c;按照条件进行dataset数据集查询后返回满足条件结果 public static string GetStrByID(string ID) { string str string.Empty; DataSet ds FromXmlFileToDataSet(); Dat…

HarmonyOS4开发 数据持久化-用户首选项 封装

import preferences from ohos.data.preferences;class PreferencesUtil {prefMap: Map<string, preferences.Preferences> new Map()async loadPreference(context, name: string) {try { //加载preferencesconst pref await preferences.getPreferences(context, nam…

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…

LeetCode45:搜索插入位置

问题描述 给定一个排序数组和一个目标值&#xff0c;在数组中找到目标值&#xff0c;并返回其索引。如果目标值不存在于数组中&#xff0c;返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) 的算法。 示例 1: 输入: nums [1,3,5,6], target 5 输出: 2 示例…