echarts bar图表实现多个label显示

2024.0.23今天我学习了使用bar组件,可以渲染多个label显示的效果,如:

当我们有一个这样的图表时,根据需求需要在

这上面的顶部再显示一个空置床位数+占用床位数的合计总值,如果直接添加一个label肯定是不行,因为我们每一个柱状图系列都使用了label,所以只能在添加一个柱状图系列,这个柱状图的stack要和前面(空置床位数,占用床位数的stack相同)相对于再堆叠一个柱状图,然后设置颜色透明,只显示label

新的柱状图代码如下(只提供隐藏柱状图的代码):

          {
            name: '',//名称设置为空,防止legend显示
            type: 'bar',
            tooltip: {
              show: false,//提示框也不显示
            },
            stack: 'a',//系列要和前面两个堆叠柱状图相同
            data: Array(all_data.length).fill(10),//值根据数组长度随意填充
            itemStyle: {
              color: 'transparent',//颜色透明
            },
            label: {
              show: true,
              formatter: params => {
                return demo[params.dataIndex].xxx + demo[params.dataIndex].yyy,//可以设置两个数相加的合
              },
              textStyle: {
                fontSize: '1rem'
              }
            }
          },

效果如下:

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

深度学习-线性代数

目录 标量向量矩阵特殊矩阵特征向量和特征值 标量由只有一个元素的张量表示将向量视为标量值组成的列表通过张量的索引来访问任一元素访问张量的长度只有一个轴的张量,形状只有一个元素通过指定两个分量m和n来创建一个形状为mn的矩阵矩阵的转置对称矩阵的转置逻辑运…

[MYSQL索引优化] 分页查询优化

这里一共介绍两种常见的分页索引优化技巧,let go! 示例表: CREATE TABLE t_product (id int(0) NOT NULL,pname varchar(200) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL,price double(7, 2) NULL DEFAULT 0.00,promoteSales varchar(200) CHARA…

Linux进程详解三:进程状态

文章目录 进程状态Linux下的进程状态运行态-R阻塞态浅度休眠-S深度睡眠-D暂停状态-T暂停状态-t 终止态僵尸-Z死亡-X 孤儿进程 进程状态 进程的状态,本质上就是一个整型变量,在task_struct中的一个整型变量。 状态的存在决定了你的后续行为动作。 Linu…

DRF: 序列化器、View、APIView、GenericAPIView、Mixin、ViewSet、ModelViewSet的源码解析

前言:还没有整理,后续有时间再整理,目前只是个人思路,文章较乱。 注意路径匹配的“/” 我们的url里面加了“/”,但是用apifox等非浏览器的工具发起请求时没有加“/”,而且还不是get请求,那么这…

C++字符串中单词的提取以及按符号分隔

句子中的单词提取利用stringstream即可 如果要分割需配合getline使用 两者前提都是要先转化为字符串流。

Linux套接字编程详解

Linux套接字编程 预备知识IP地址和MAC地址套接字结构网络字节序 UDP套接字编程服务端代码客服端代码 TCP 套接字守护进程 计算器模块1 日志头文件序列化和反序列化 预备知识 IP地址和MAC地址 MAC地址用来在局域网中标识唯一主机 Ip地址用于在广域网中标识唯一主机 &#xff0…

李廉洋:4.24-4.25现货黄金,WTI原油区间震荡,走势分析。

黄金消息面分析:金银近日回调。随着伊朗方面淡化以色列最新反击,中东地区局势没有进一步发酵下,风险溢价下降金银出现较大幅度调整。由于近期高于预期的通胀数据,降息预期持续降温。昨日疲软的美国PMI以及以色列在加沙攻击的加剧支…

【Unity】AssetBundle加载与卸载

unity官方apiAssetBundle-LoadFromFileAsync - Unity 脚本 API 异步加载AB包 using UnityEngine; using System.Collections; using System.IO;public class LoadFromFileAsyncExample : MonoBehaviour {IEnumerator Start(){var bundleLoadRequest AssetBundle.LoadFromFil…

消息服务应用1——java项目使用websocket

在当前微服务项目中,由于业务模块众多,消息服务的使用场景变得异常活跃。而WebSocket由于其自身的可靠性强,实时性好,带宽占用更小的优势,在实时通讯应用场景中独占鳌头,加上HTML5标准的普及流行&#xff0…

OpenCompass 大模型评测实战——笔记

OpenCompass 大模型评测实战——笔记 一、评测1.1、为什么要做评测1.2、如何通过能力评测促进模型发展1.2.1、面向未来拓展能力维度1.2.2、扎根通用能力1.2.3、高质量1.2.4、性能评测 1.3、评测的挑战1.3.1、全面性1.3.2、评测成本1.3.3、数据污染1.3.4、鲁棒性 二、OpenCompas…

java-junit单元测试

问题 Junit框架 代码 工具类 // 工具类 public class StringUtils {// 获取字符串的最大下标public static int getMaxIndex(String str){// 这个地方是有问题的,应该是str.length() - 1 也没有进行str是否为空的判断return str.length() ;} }测试类 测试类类名&…

vcontact2:病毒聚类(失败)

Bitbucket 安装 mamba create --name vContact2 biopython1.78 mamba install -c bioconda vcontact20.11.3vim ~/envs/vContact2/lib/python3.9/site-packages/vcontact2/exports/summaries.py 把 np.warnings.filterwarnings(ignore) 改成 import warnings warnings.filte…

递归、搜索与回溯算法:FloodFill 算法

例题一 算法思路: 可以利⽤「深搜」或者「宽搜」,遍历到与该点相连的所有「像素相同的点」,然后将其修改成指定的像素即可。 全局变量: int dx[4] { 0,0,1,-1 }, dy[4] { 1,-1,0,0 }; int m, n; int precolor;//记录原先的颜色…

【Linux】日志分析与管理

作为一个运维,如果不会看日志,就好比是冬天刚刚用热水泡完了脚,接着就立马让人把水喝掉。 目录 一、Inode介绍 1.1 什么是inode 1.2 inode表内容 1.3 查看inode号的方式 二、日志分析 2.1 日志的用途 2.2 日志的分类 2.3 日志级别 2…

Flink学习(七)-单词统计

前言 Flink是流批一体的框架。因此既可以处理以流的方式处理,也可以按批次处理。 一、代码基础格式 //1st 设置执行环境 xxxEnvironment env xxxEnvironment.getEnvironment;//2nd 设置流 DataSource xxxDSenv.xxxx();//3rd 设置转换 Xxx transformation xxxDS.…

简述MASM宏汇编

Hello , 我是小恒不会java。今天写写x86相关底层的东西 寄存器 8086由BIU和EU组成 8088/8086寄存器有14个。8通用,4段,1指针,1标志 8个通用寄存器:这些寄存器可以用来存储任意类型的数据,包括整数、地址等。8086有8个…

Modbus转Profinet网关接电表与工控机通讯

Modbus转Profinet网关(XD-MDPN100/300)的主要功能是实现Modbus协议和Profinet协议之间的转换和通信。Modbus转Profinet网关集成了Modbus和Profinet两种协议,支持Modbus RTU主站/从站,并可以与RS485接口的设备,如变频器…

找对方法,单位信息宣传工作向媒体投稿其实也简单

曾经,作为一名肩负单位信息宣传重任的我,每当面对那堆叠如山的稿件与闪烁不定的电脑屏幕,心中总会涌起一股无尽的焦虑与疲惫。尤其在向媒体投稿这个环节,我仿佛陷入了一个难以挣脱的漩涡,邮箱投稿的艰辛、审核的严苛、出稿的迟缓以及成功发表的少之又少,如同一座座无形的大山压…

力扣面试 150二叉搜索树迭代器 中序遍历 栈模拟递归 步骤拆分

Problem: 173. 二叉搜索树迭代器 思路 &#x1f469;‍&#x1f3eb; 三叶 复杂度 时间复杂度: O ( 1 ) O(1) O(1) 空间复杂度: O ( h ) O(h) O(h) Code class BSTIterator { Stack<TreeNode> d new Stack<>();public BSTIterator(TreeNode root){dfsLe…

书生·浦语大模型第二期实战营第七节-OpenCompass 大模型评测实战 笔记和作业

来源&#xff1a; 视频教程&#xff1a;https://www.bilibili.com/video/BV1Pm41127jU/?spm_id_from333.788&vd_sourcef4a51f7f5a63e756f73ad0dff318c1a3 文字教程&#xff1a;https://github.com/InternLM/Tutorial/blob/camp2/opencompass/readme.md 作业来源&#x…