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 应用程序中轻松地使…

MongoDB聚合运算符:$topN

MongoDB聚合运算符:$topN 文章目录 MongoDB聚合运算符:$topN语法用法关于null和缺失值的处理BSON数据类型排序 举例查找三个得分最高的查找全部游戏中三个最高的得分基于分组key来计算参数n $topN聚合运算符返回分组中指定顺序的最前面 n个元素&#xf…

使得安全团队难以准确评估网络的真实安全状况

防火墙策略管理与策略分析:如何准确评估网络真实安全状况 摘要 随着信息技术的飞速发展,网络安全问题日益严重。防火墙作为网络安全的第一道防线,对于保障网络的安全具有重要意义。然而,在实际应用中,由于防火墙策略管…

704. 二分查找

Problem: 704. 二分查找 🐷我的leetcode主页 文章目录 题目分类思路什么是二分查找如何理解时间复杂度 解题方法Code 题目 给定一个 n 个元素有序的(升序)整型数组 nums 和一个目标值 target ,写一个函数搜索 nums 中的 target&a…

电脑设置在哪里打开?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交互的…

【QT教程】QT6音视频性能优化技巧 QT音视频

QT6音视频性能优化技巧 使用AI技术辅助生成 QT界面美化视频课程 QT性能优化视频课程 QT原理与源码分析视频课程 QT QML C扩展开发视频课程 免费QT视频课程 您可以看免费1000个QT技术视频 免费QT视频课程 QT统计图和QT数据可视化视频免费看 免费QT视频课程 QT性能优化视频免费…

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

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

责任链模式案例

需求背景&#xff1a; 请你设计一个员工休假审批流程&#xff0c;当员工的休假天数<1时&#xff0c;由直接领导审批&#xff0c;休假天数<2时&#xff0c;分别由直接领导、一级部门领导审批&#xff0c;休假天数>3时&#xff0c;分别由直接领导、一级部门领导、分管领…

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

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

ES6(ES2015) 之后,新增的哪些特性是你日常使用的

ES2016 Array.prototype.includes&#xff1a;用来判断一个数组是否包含一个指定的值&#xff0c;根据情况&#xff0c;如果包含则返回 true&#xff0c;否则返回 false。 [1, 2, 3].includes(2); // true [1, 2, 3].includes(4); // false [1, 2, 3].includes(3, 3); // fal…

VS2022常用快捷键

1.注释 快捷键 操作 说明 CtrlK,CrtrC 注释选定内容 需要两步操作 CtrlK,CrtrU 取消选定注释内容 需要两步操作 2.缩进 快捷键 操作 说明 Tab 增加缩进 ShiftTab 减少缩进 3.行操作 快捷键 操作 说明 CtrlEnter 在当前行上面插入一个空行 CtrlShift…

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

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

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

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

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

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