EChart-坐标轴数值处理

news2024/9/21 3:35:17

写图表时,Y轴的数值过大,不太可能直接展示,这时候就得简写了,如图:

红框圈起来的数值表示如下:

1K1000
1M1000,000
1B

1000,000,000

1KB1000,000,000,000

export function toBMK(value) {
  const vblValue = Math.abs(value);
  const newValue = ['', '', ''];
  let fr = 1000;
  let num = 3;
  while (vblValue / fr >= 1) {
    fr *= 10;
    num += 1;
  }
  if (num <= 4) {
    newValue[1] = 'K';
    newValue[0] = vblValue / 1000 >= 10 ? `${parseInt(vblValue / 1000, 10)}` : (vblValue / 1000).toFixed(1);
  } else if (num <= 7) {
    const text1 = parseInt(num - 3, 10) / 3 > 1 ? 'M' : 'K';
    const fm = text1 === 'K' ? 1000 : 1000000;
    newValue[1] = text1;
    newValue[0] = `${vblValue / fm}`;
  } else {
    let text1 = (num - 6) / 3 > 1 ? 'B' : 'M';
    text1 = (num - 9) / 3 > 1 ? 'KB' : text1;
    let fm = 1;
    if (text1 === 'M') {
      fm = 1000000;
    } else if (text1 === 'B') {
      fm = 1000000000;
    } else if (text1 === 'KB') {
      fm = 1000000000000;
    }
    newValue[1] = text1;
    newValue[0] = `${parseInt(vblValue / fm, 10)}`;
  }
  if (vblValue < 1000) {
    newValue[1] = '';
    newValue[0] = `${vblValue}`;
  }
  return `${value < 0 ? '-' : ''}${newValue.join('')}`;
}

使用:

Y轴yAxis的属性,数值格式化,对应的大数值就会转换为简写,图表看起来美观,简明一些。

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

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

相关文章

为什么IDEA中使用@Autowired会被警告

我们在使用IDEA编码时&#xff0c;如果用到了Autowired注解注入bean&#xff0c;会发现IDEA会给代码标个波连线&#xff0c;鼠标移动上去&#xff0c;会发下idea提示&#xff1a;不推荐使用Filed injection&#xff0c;这是Spring的核心DI&#xff08;Dendency Injection&#…

python easygui库常用方法介绍

msgbox() 弹出对话框 这是最基本的弹出对话框&#xff0c;用于显示简单的消息或提示。例如&#xff1a; import easygui easygui.msgbox("欢迎使用EasyGUI!") buttonbox() 带有多个按钮的对话框 它会显示一个带有多个按钮的对话框&#xff0c;用户点击后返回所选…

三养食品:火鸡面太辣?远不及小米辣的三分之一!

不久前&#xff0c;三养火鸡面在丹麦被召回的消息引起了全球媒体的关注。面对这一情况&#xff0c;三养食品迅速回应&#xff0c;指出丹麦方面在辣椒素的测算方法上存在错误&#xff0c;并提出了异议。大约一个月后&#xff0c;丹麦兽医和食品管理局&#xff08;以下简称DVFA&a…

ArcGIS小技巧:图斑变化分析

在做规划的过程中&#xff0c;经常会有这么个需求&#xff0c;用地方案确定后&#xff0c;需求找出规划用地和三调现状用地之间具体有哪些变化。 一方面可以用作具体规划内容的分析&#xff0c;另一方面也可以避免因为误操作而导致的错误图斑的出现。 以下图为例&#xff0c;…

FPGA实现LCD1602控制

目录 注意&#xff01; 本工程采用野火征途PRO开发板&#xff0c;外接LCD1602部件进行测试。 有偿提供代码&#xff01;&#xff01;&#xff01;可以定制功能&#xff01;&#xff01;&#xff01;有需要私信&#xff01;&#xff01;&#xff01; 一、基础知识 1.1 引脚…

Ubuntu22.04重装系统+基础配置

重装系统 note&#xff1a;备份数据&#xff0c;重装系统后home下的文件会丢失&#xff0c;所以先备份一下home的数据到其他的盘/mnt/下里。记住之前系统的DNS&#xff0c;IP和掩码。 先在Ubuntu官网下载22.04桌面版&#xff08;种子链接要用迅雷下载&#xff09;。但是版本还…

JavaScrip中删除的应用

实现功能&#xff1a; 点击删除超链接删掉 var lisdocument.getElementsByTagName("li");for (let i 0; i < lis.length; i) {lis[i].onclickfunction () {if (confirm("确定删除" this.firstChild.nodeValue "信息吗")) {this.parentNod…

聊聊,IEEE论文的含金量!这四本超赞的IEEE系列期刊,发文量超2000,谁投谁中!

关注GZH【欧亚科睿学术】&#xff0c;第一时间了解期刊最新动态&#xff01; 在学术界&#xff0c;IEEE (电气电子工程师协会) 论文被公认为高质量的研究成果。IEEE作为全球最大的专业技术组织之一&#xff0c;在电气、电子、计算机工程和科学领域具有广泛的影响力。其出版的论…

HarmonyOs~UIAbility组件的启动模式及交互

单实例模式 首先在该模块的module.json5配置 "abilities": [{..."launchType": "singleton",...}], 然后我们看一下UIAbility单实例的执行过程 tips&#xff1a;首次启动为冷启动 如果是冷启动 系统就新建该UIAbility组件的实力 若不是冷启…

【MQTT(5)】php 做一个mqtt按钮,发布触发信号

在之前博客php 做一个文件下载服务器&#xff0c;得避免跨路径工具&#xff0c;安全很重要 中加了一个按钮&#xff0c;触发物联网设备返回数据。基于mqtt开发&#xff0c;如果想知道mqtt如何搭建&#xff0c;可以看我的博客【MQTT&#xff08;1&#xff09;】服务端的搭建 效…

day13:函数基本使用

1、什么是函数 函数就相当于具备某一功能的工具 函数的使用必须遵循一个原则&#xff1a;先定义后调用2、为何要用函数 1、组织结构不清晰&#xff0c;可读性差 2、代码冗余 3、可维护性、扩展性差3、如何用函数 先定义三种定义方式后调用三种调用方式返回值三种返回值的形式…

醒醒,别睡了...讲《数据分析pandas库》了—/—<6>

一、 1、长宽格式转换 基于多重索引&#xff0c;Pandas 可以很容易地完成长型、宽型数据格式的相互转换。 1.1 转换为最简格式 stack&#xff08;&#xff09;其使用法如下&#xff1a; stack函数用于将DataFrame中的列转换为行&#xff0c;即将宽格式数据转换为长格式数据。…

【python】PyQt5中QToolButton的详细用法教学与应用实战

✨✨ 欢迎大家来到景天科技苑✨✨ &#x1f388;&#x1f388; 养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; &#x1f3c6; 作者简介&#xff1a;景天科技苑 &#x1f3c6;《头衔》&#xff1a;大厂架构师&#xff0c;华为云开发者社区专家博主&#xff0c;…

jeecguniapp开发小结

一、问题:app发行后图片不显示 解决:绝对路径改成相对路径 另外&#xff1a;避免发行上线图片变形要给到图标或图片具体宽高 //绝对路径 <img src"/static/home/128/wendang.png" style"width:90rpx;height:90rpx;"/> //相对路径 <img src"…

Anaconda环境迁移方法

前言 当我们需要将在一个新电脑上配置Anaconda的环境时&#xff0c;联网的情况下是需要在Anaconda Prompt上安装python环境以及一堆库&#xff1b;离线的情况下则需要用wheel文件一个一个装&#xff0c;十分麻烦。因此方便起见&#xff0c;我们可以将当前电脑上已有的Anaconda…

预测元器件温度的十大技巧——高级操作指南

元器件温度预测为什么很重要&#xff1f; 元器件温度预测在很多方面都有重要意义。一直以来&#xff0c;元器件温度关系到可靠性&#xff0c;早期研究认为现场故障率与稳态元器件温度相关。近来&#xff0c;基于物理学的可靠性预测将电子组件的故障率与工作周期&#xff08;开…

“论大数据处理架构及其应用”写作框架,软考高级论文,系统架构设计师论文

论文真题 大数据处理架构是专门用于处理和分析巨量复杂数据集的软件架构。它通常包括数据收集、存储、处理、分析和可视化等多个层面&#xff0c;旨在从海量、多样化的数据中提取有价值的信息。Lambda架构是大数据平台里最成熟、最稳定的架构&#xff0c;它是一种将批处理和流…

apache2和httpd web服务器

apache2和httpd web服务器 apache2和httpd web服务器是啥apache是软件基金会apache2是一个web服务httpd和apache2是同一个东西&#xff0c;但是不同linux发行版中叫法不一样。就是同一个东西&#xff0c;但是看上去有一些不一样。 apache2和httpd web服务器是啥 apache是软件基…

使用chainlit快速构建类似OPEN AI一样的对话网页

快速开始 创建一个文件&#xff0c;例如“chainlit_chat” mkdir chainlit_chat进入 chainlit_chat文件夹下&#xff0c;执行命令创建python 虚拟环境空间(需要提前安装好python sdk。 Chainlit 需要python>3.8。,具体操作&#xff0c;由于文章长度问题就不在叙述&#xf…

CUDA编程之grid和block详解

CUDA 文章目录 CUDAgrid和block基本的理解1维 遍历2维 遍历3维 遍历3维 打印对应的thread grid和block基本的理解 Kernel&#xff1a;Kernel不是CPU&#xff0c;而是在GPU上运行的特殊函数。你可以把Kernel想象成GPU上并行执行的任务。当你从主机&#xff08;CPU&#xff09;调…