echarts formatter如何自定义百分比小数位置,比如取整数。{b} {d}%

news/2024/11/16 21:48:30/

echarts formatter如何自定义百分比小数位置,比如取整数。{b} {d}%

一、现状

我有一个 pie 的图表,option 中的 formatter 是这样的:

label: {show: true,position: 'outside',fontSize: 12,formatter: '{b} {d}%'
},

图表数据是这样的
在这里插入图片描述

二、需求

我需要将其百分比的内容改成整数的,而不是两位小数的

三、实现

就还是修改 formatter ,但这次用的不是 echarts 自带的变量,而是自己定义。

1. 确认可操作的变量有哪些

先看看 data 里面有什么:

formatter: data => { console.log(data)} 

在这里插入图片描述

知道我们需要的变量 name percent 之后就可以自定义输出的字符串了。 我的定义如下:

label: {show: true,position: 'outside',fontSize: 12,formatter: data => {return `${data.name}\t${data.percent.toFixed(0)}%`}
},

目前是这种状态:

在这里插入图片描述

2. 消除 0% 的情况

可以发现一个问题是,小于 1% 的都变成了 0%,而这是不合理的,至少应该表示为 1%

所以再改一下,改为向上取整。用 Math.ceil()

label: {show: true,position: 'outside',fontSize: 12,formatter: data => {return `${data.name}\t${Math.ceil(data.percent)}%`}
},

四、结果

最终:

在这里插入图片描述


http://www.ppmy.cn/news/44096.html

相关文章

信息系统分析和数据分析有何区别?

信息系统分析 信息系统分析是指对一个组织或企业的信息系统进行全面的研究和分析,以确定如何最好地支持其业务和管理需求。它通常包括以下几个方面: 确定问题和机会:信息系统分析师会与组织内的各种利益相关者进行交流,了解他们…

Flink、Hudi技术选型

Flink CDC 2.2的优势 相比Flink1.x,2.x的版本有如下的特点: 1) 并发读取,全量数据的读取性能可以水平扩展。 2) 全程无锁,不对线上业务产生锁的风险。 3) 断点续传,支持全量阶段的 Checkpoint。 Flink SQL的优势 …

springboot和vue写个小项目

遵循“约定优于配置”的原则,只需要很少的配置或使用默认的配置。 能够使用内嵌的Tomcat、Jetty服务器,不需要部署war文件。 提供定制化的启动器Starters,简化Maveni配置,开箱即用。 纯)java配置,没有代码生成&#xf…

魔兽世界巫妖王架设教程-娱乐版

相信各位拿到一个优秀的魔兽端,在单机把玩一番之后,肯定都想着能不能假设一个外网服务器,然后让朋友们来到自己的服务器上玩耍,自己还能体会一下在众多凡人面前当神(GM)的乐趣。网上这方面的教程有一些&…

前端如何优雅地使用枚举

枚举(Enumeration)是一种常见的编程数据类型,它用于表示一组有限的取值。在前端开发中,枚举可以用于定义常量、选项等,有助于提高代码的可读性和可维护性。本文将介绍前端如何优雅地使用枚举。 枚举的定义与使用 在J…

大模型混战,阿里百度华为谁将成就AI时代的“新地基”?

从算力基础到用户生态,群雄逐鹿大模型 自2022年stable diffusion模型的进步推动AIGC的快速发展后,年底,ChatGPT以“破圈者”的姿态,快速“吸粉”亿万,在全球范围内掀起了一股AI浪潮,也促使了众多海外巨头竞…

Typora(Mckbook版)的使用方法

1、标题(⌘ 数字) 一级标题:(⌘ 1) 二级标题:(⌘ 2) 三级标题:(⌘ 3) 四级标题:(⌘ 4) ... 六级标…

计算机组成原理——第五章中央处理器

半生风雨半生伤,半醉半醒半心凉 文章目录前言5.1 CPU的功能和基本结构5.2 指令周期的数据流5.3.1 单总线结构5.3.2 专用通路结构前言 之前我们就说过CPU主要包括两个部分,运算器和控制器,运算器主要是实现算数运算.逻辑运算, 运算…