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.hqwc.cn/news/688874.html

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

相关文章

构建高效干部管理系统:驱动组织持续发展的核心引擎

在日新月异的社会变革中,干部管理已成为组织发展的核心驱动力。一个高效、科学的干部管理系统,不仅能显著提高组织的运营效率,更是确保组织战略目标得以实现的关键所在。本文将深入探讨如何精心打造这样的管理系统,并阐明其对组织…

云效 Pipeline as Code 来了!这些场景,用好它效率翻倍!

从可视化编排到支持 YAML 编排 云效流水线 Flow 是开箱即用的企业级持续集成和持续交付工具,支持丰富的代码源、构建、自动化测试工具、多种部署类型和部署方式,与阿里云深度集成,还提供多种企业级特性,助力企业高效完成从开发到…

【Linux】环境变量是什么?如何配置?详解

💐 🌸 🌷 🍀 🌹 🌻 🌺 🍁 🍃 🍂 🌿 🍄🍝 🍛 🍤 📃个人主页 :阿然成长日记 …

什么是Unreal Engine游戏引擎?它有什么优势?

大家好,我是咕噜土豆,很高兴又和大家见面了。在游戏开发行业中,选择合适的游戏引擎是非常重要的。其中,Unreal Engine作为一款功能强大的游戏引擎,在业界非常受欢迎。今天我带大家简单的了解一下。 什么是Unreal Engi…

数据分析——业务指标分析

业务指标分析 前言一、业务指标分析的定义二、业务问题构建问题构建的要求 三、业务问题的识别在识别问题的阶段对于企业内部收益者的补充 四、竞争者分析竞争者分析的内容竞争者分析目的案例 五、市场机会识别好的市场机会必须满足的条件市场机会案例 六、风险控制数据分析师常…

iLogtail 社区开源之夏活动来了!

作者:玄飏 在这个充满活力的夏日,随着阳光一同灿烂的是开源精神的光辉与创新的火花。iLogtail 社区高兴地宣布,我们正式加入开源之夏 2024 的行列,诚邀每一位怀揣梦想与激情的学生开发者,共同开启一场探索技术前沿、贡…

发布一个属于自己的 npm工具包

我们可以发布一个属于自己的工具包到 npm 服务上,方便自己和其他开发者使用,参与社区贡献,操作步骤如下: 创建与发布 npm 初始化工具包,package.json 填写包的信息 (包的名字是唯一的)注册账号 https://www.npmjs.co…

第一条腿:工作中解决技术问题的记录

系列文章目录 提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加 TODO:写完再整理 文章目录 系列文章目录前言系列文章目录前言速度规划S曲线机械臂轨迹规划碰撞检查感知导航感知似然场局部规划(很像DWA但是不依赖地图&#…

Debian12 Linux lsof 查询端口 并杀进程 sh文件编写过程记录

目录 一、需求描述 二、需求处理思路 1、根据关键字查询进程号 2、根据端口查询进程号 3、根据进程号杀进程 三、编写shell 脚本 总结 一、需求描述 在linux环境上,已知某个进程的运行关键字以及运行端口,要求根据已知信息查杀对应进程。要求编写…

如何在OpenHarmony设置静态IP?

介绍 本文适用于所有RK3566/RK3568/RK3588平台产品在OpenHarmony系统上设置静态IP。本文以Purple Pi OH开发板为例,在OpenHarmony系统上进行设置。触觉智能的Purple Pi OH鸿蒙开源主板,是华为Laval官方社区主荐的一款鸿蒙开发主板。 该主板主要针对学生…

2. 感知机算法和简单 Python 实现

目录 1. 感知机介绍 1.1 背景 1.2 定义 1.2.1 权重 1.2.2 阈值 1.2.3 偏置 1.3 逻辑处理:与门、非门、或门 2. 感知机实现 2.1 与门的 Python 实现 2.2 非门的 Python 实现 2.3 或门的 Python 实现 1. 感知机介绍 1.1 背景 感知机1957年由 Rosenblatt 提…

Android NDK开发(一)生成指定平台的ndk及根据native接口生成jni接口

为了初步了解Android NDK开发&#xff0c;本文记录了Android Studio使用过程中的部分内容。 本专栏知识点是通过<零声教育>的音视频流媒体高级开发课程进行系统学习&#xff0c;梳理总结后写下文章&#xff0c;对音视频相关内容感兴趣的读者&#xff0c;可以点击观看课程…