echarts自定义图例显示名称、数值、占比

先上代码

		legend: {orient: 'vertical',left: 10,top:20,data: data,textStyle: {color: '#9FB7D5' // 设置图例文字颜色为白色},// type: 'plain', // 设置图例类型为普通类型itemWidth: 10, // 设置图例项的宽度itemHeight: 10, // 设置图例项的高度formatter: function(name) {let item = data.find(item => item.name === name);let percentage = ''; // 初始化百分比为空字符串if (percent) {let sum = data.reduce((acc, cur) => acc + parseInt(cur.value), 0);percentage = ` (${(data.find(data => data.name === name).value / sum * 100).toFixed(2)}%)`; // 在百分比前后添加括号}return `${name} ${item.value}${percentage}`; // 返回格式化后的字符串}},

重点在于.reduce方法的运用,计算出总数。再用当前值除以总数得到百分比。

let sum = data.reduce((acc, cur) => acc + parseInt(cur.value), 0);
percentage = ` (${(data.find(data => data.name === name).value / sum * 100).toFixed(2)}%)`; // 在百分比前后添加括号

其他修改图例大小的很简单

最后模板化输出。

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

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

相关文章

Python专题:十、字典(2)

字典定义x{} get()函数 get(参数一,参数二) 参数一: 需要查找的关键词 参数二: 如果关键词不存在get返回的默认值 字典的更新 update()函数,字典y的元素,去更新字…

学生管理系统初级

根据题目要求生成大纲 总结: 1.在书写时,考虑到了书写时id可是是abc... 类型是String,但在根据id获取集合中元素时 list.get() ,get()里面是int类型。 2.在书写还有一点功能并不完全, 2.1查找时是打印所有…

十.吊打面试官系列-Tomcat优化-通过压测Tomcat调优实战

前言 上一篇文章我们讲解了一下Tomcat底层的结构和执行原理,我们需要重点去掌握的是Tomcat的高内聚低耦合的设计,以及责任链模式,以及Tomcat NIO编程模式,这些是Tomcat比较核心的点,本篇文章我们将对Tomcat的参数做一…

Java学习【类与对象】

类和对象 开始我们就不讲那些把大象放冰箱需要几步来引入面向对象的例子了,直接上干货。 在Java中,类是对现实世界中某一类事物的抽象描述。它包含了该类事物的属性和方法。属性用于描述事物的状态,而方法则用于描述事物可以做的事情。对象也…

Redis 支持的 Java 客户端都有哪些?

Redis 是一种高性能的键值存储系统,它以其快速、灵活和可扩展的特性而闻名。在 Java 开发中,与 Redis 交互的方式通常是通过使用 Redis 的 Java 客户端。 这些客户端提供了访问 Redis 数据库的接口,使开发人员能够在 Java 应用程序中轻松地使…

电脑设置在哪里打开?Window与Mac双系统操作指南

随着科技的不断发展,电脑已经成为我们日常生活和工作中不可或缺的一部分。然而,对于许多初学者来说,如何找到并熟悉电脑的设置界面可能是一个挑战。特别是对于那些同时使用Windows和Mac双系统的用户来说,更是需要一篇详尽的指南来…

qml 和 c++类的数据交互

1、 新建一个需要交互的C++类 1)添加QObject头文件 2)添加自QObject的继承 3)添加Q_OBJECT宏 4)使用Q_PROPERTY,定义两个交互的属性,并设置读写的方法和变更属性的信号。 5)添加方法、槽函数和变量 2、在main.cpp中添加实例化对象的QML上下文 1)添加需要QML交互的…

在做题中学习(54):点名

LCR 173. 点名 - 力扣(LeetCode) 此题有不同的几种解法: 解法一:暴力枚举 O(n); 解法二:哈希表 把原数组丢入哈希表,遍历哈希表,看看哪个数值为0即可。 O(n)空间O(n)时间 解法三&…

Redis如何避免数据丢失?——RDB

目录 1. RDB机制的配置 2. fork()函数和写时复制(Copy On Write) 什么是Copy On Write 系统fork中使用Copy On Write机制 3. RDB文件结构 RDB文件内容和内容顺序 InfoAuxFields是rdb信息数据 数据库数据 数据 数据存储格式 字符串编码 操作码 4. RDB的2…

【自研网关系列】数字签名和url动态加密

🌈Yu-Gateway::基于 Netty 构建的自研 API 网关,采用 Java 原生实现,整合 Nacos 作为注册配置中心。其设计目标是为微服务架构提供高性能、可扩展的统一入口和基础设施,承载请求路由、安全控制、流量治理等…

【Java EE】数据库连接池详解

文章目录 🎍数据库连接池🌸Hikari🌸Druid 🍀MySQL开发企业规范⭕总结 🎍数据库连接池 在上⾯Mybatis的讲解中,我们使⽤了数据库连接池技术,避免频繁的创建连接,销毁连接 下⾯我们来了解下数据库连接池 数据库连接池负…

「ETL实战」搭建数仓,解决多源业务系统关联分析难题(定制化业务)

在大数据分析盛行的今天,关联分析作为数据挖掘和业务洞察的重要手段,受到了极大关注。然而,随着数据量的激增和源业务系统的复杂性增加,关联分析的性能问题逐渐成为了一个不可忽视的挑战。 本文将介绍借助ETL工具,如何…

大数据面试题 —— 数据库

目录 关系型数据库与非关系型数据库的区别数据库三范式MySQL中 drop、delete、truncate的区别MySQL中 char和 varchar 的区别MySQL中inner join、left join、right join以及full join的区别MySQL中 having 和 where 的区别count(*)、count(1)、count(列名)的区别MySQL中视图和表…

Threejs 学习笔记 | 灯光与阴影

文章目录 Threejs 学习笔记 | 灯光与阴影如何让灯光照射在物体上有阴影LightShadow - 阴影类的基类平行光的shadow计算投影属性 - DirectionalLightShadow类平行光的投射相机 聚光灯的shadow计算投影属性- SpotLightShadow类聚光灯的投射相机 平行光 DirectionalLight聚光灯 Sp…

12.轻量级锁原理及其实战

文章目录 轻量级锁原理及其实战1.轻量级锁的核心原理2.轻量级锁的演示2.1.轻量级锁的演示代码2.2.结果分析 3.轻量级锁的分类3.1.普通自旋锁3.2.自适应自旋锁 4.轻量级锁的膨胀 轻量级锁原理及其实战 引入轻量级锁的主要目的是在多线程环境竞争不激烈的情况下, 通过…

verilog中不重叠序列检测

编写一个序列检测模块,检测输入信号(a)是否满足011100序列, 要求以每六个输入为一组,不检测重复序列,例如第一位数据不符合,则不考虑后五位。一直到第七位数据即下一组信号的第一位开始检测。当…

C++下使用Matplotlib-cpp的一些配置

Aconda3安装使用 https://mirrors.tuna.tsinghua.edu.cn/help/anaconda/下载 切换清华源 conda config --add channels https://mirrors.tuna.tsinghua.edu.cn/anaconda/pkgs/free/ conda config --add channels https://mirrors.tuna.tsinghua.edu.cn/anaconda/pkgs/main/ con…

修改latex中block中公式与block标题间隔过大的问题

修改block中公式与block间隔过大的问题 如图的block中公式出现了空白:代码见下方 \begin{proof}[证明]\begin{align*}&Z\alpha \beta _XX\beta _YY\varepsilon \rightarrow XZ\alpha X\beta _XX^2\beta _YXY\varepsilon X&\\&E\left( Z \right) \alpha \beta _XE\…

STM32实现1.8寸液晶屏 LCD SPI串口显示屏模块 TFT彩屏(标准库和HAL库实现)

目录 一、所选模块 液晶模块选择(淘宝上均有售卖) 模块引脚 二、嵌入式单片机型号 三、接线表设计 四、开发环境版本说明 五、标准库实现 六、HAL库实现 七、完整工程(内含标准库和HAL库源码) 代码链接 一、所选模块 液…

pycharm如何对for循环中第n次循序执行断点

目录 在 PyCharm 中,您可以设置条件断点来实现这个功能,这样只有在满足特定条件时断点才会被触发。以下是设置仅在 for 循环的第 n 次迭代时触发断点的步骤: 设置断点: 首先,找到您想要在 for 循环中设置断点的行。点击…