ECharts - 坐标轴刻度数值处理

news2024/12/26 9:20:57

写图表时,Y轴的数值过大,不太可能直接展示,这时候就得简写了,或者百分比展示的也要处理,如下图:

 yAxis: {
   type: 'value',

   // Y轴轴线
   axisLine: { show: false }, 

   // 刻度线
   axisTick: { show: false },

   // 轴刻度值
   axisLabel: {
     interval: 0, //坐标轴值与坐标轴间距

     rotate: 0, //旋转角度
    
     // 值格式化 (toBMK函数 处理 Y轴数字值)
     formatter(val) {
       return `${toBMK(val)}${option.series[0].data[0].indexOf('%') > -1 ? '%' : ''}`;
     },
   },
 }

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

1K1000
1M1000,000
1B

1000,000,000

1KB1000,000,000,000

toBMK函数:

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/1960577.html

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

相关文章

ECharts实现按月统计和MTBF统计

一、数据准备 下表是小明最近一年的旅游记录 create_datecity_namecost_money2023-10-10 10:10:10北京14992023-11-11 11:11:11上海29992023-12-12 12:12:12上海19992024-01-24 12:12:12北京1232024-01-24 12:12:12上海2232024-02-24 12:12:12广州5642024-02-24 12:12:12北京…

学习笔记之Java篇(0729)

p 数组 大纲知识点数组的概念数组的定义、四个特点数组的常见操作普通遍历、for-each遍历、java.util.Array类用法多维数组多维数组的内存结构、存储表格、Javabean和数组存储表格常见算法冒泡排序基础算法、冒泡排序优化算法、二分法查找&#xff08;折半查找&#xff09; 1、…

【JavaWeb】Filter

基本使用 使用了过滤器之后&#xff0c;要想访问web服务器上的资源&#xff0c;必须先经过滤器&#xff0c;过滤器处理完毕之后&#xff0c;才可以访问对应的资源。过滤器一般完成一些通用的操作&#xff0c;比如&#xff1a;登录校验、统一编码处理、敏感字符处理等。 使用操…

nginx 子路径映射配置

如果子路径转发到另一个服务器IP&#xff0c;配置如下&#xff0c;注意都要以“/”结尾。 #指定nginx进程数 worker_processes 1; pcre_jit on;events {# 连接数上限worker_connections 30000; }#http服务 http {server {listen 20012;# 监听的端口号server_name localho…

Spring IoC DI(笔记)

一.了解SpringIoC&DI 1.1IoC 通过前面的学习,我们知道了Spring是一个开源框架,他让我们的开发更加简单.他支持广泛的应用场 景,有着活跃而庞大的社区,这也是Spring能够长久不衰的原因&#xff0c;但是这个概念相对来说,还是比较抽象&#xff0c;我们用一句更具体的话来概…

纯原创【车牌识别】基于图像处理的车牌识别——matlab项目实战(含GUI界面)详解

摘要 车牌识别系统乃计算机视觉与模式识别技术于智能交通领域的重要研究课题之一。其作用在于从复杂背景里提取运动中的汽车牌照&#xff0c;进而识别出车牌号码。车牌识别技术在高速公路电子收费、日常停车场管理以及交通违章监控等场景得到广泛运用。它的问世对于维护交通安全…

代码随想录二刷(链表章节)

代码随想录二刷(链表章节) 链表就是通过指针串联在一起的线性结构&#xff0c;每个节点都是由一个数据域和指针域(存放下一个节点的指针)。 双链表就是每个节点中既有指向前一个节点的&#xff0c;也有指向后一个节点的。 循环链表就是把头和尾连起来。 性能分析如下&#xf…

Java面试八股之@Autowired 和 @Resource的区别

Autowired 和 Resource的区别 在Spring框架中&#xff0c;Autowired 和 Resource 是两个常用的依赖注入注解&#xff0c;但它们有一些关键的区别。下面是这两个注解的主要差异&#xff1a; 1. 注解来源 Autowired&#xff1a; 是Spring框架提供的注解&#xff0c;位于包 or…

TerraSAR-XTanDEM-X卫星详解(一)

全球SAR卫星大盘点与回波数据处理专栏目录 1. TerraSAR-X简介 TerraSAR-X(Terra Synthetic Aperture Radar-X)和TanDEM-X(TerraSAR-X add-on for Digital Elevation Measurement)是由德国宇航中心(DLR)和EADS Astrium公司共同推出的一对双子卫星。Terra源自拉丁语,是地…

解决win10蓝屏“选择一个选项”的问题!

今天台式机开机&#xff0c;出现蓝屏问题&#xff0c;记录一下。 一、问题 启动修复不行&#xff0c;系统还原没还原点&#xff0c;系统映像恢复没有文件。难道要重装系统&#xff1f;手上只能Win7和XP的启动盘。此路不通。 二、解决 使用命令提示符。输入&#xff1a; bcdb…

《花100块做个摸鱼小网站! · 序》灵感来源

序 大家好呀&#xff0c;我是summo&#xff0c;这次来写写我在上班空闲(摸鱼)的时候做的一个小网站的事。去年阿里云不是推出了个活动嘛&#xff0c;2核2G的云服务器一年只要99块钱&#xff0c;懂行的人应该知道这个价格在业界已经是非常良心了&#xff0c;虽然优惠只有一年&a…

PMP考试难吗?好不好学?

PMP 并不难&#xff0c;虽然新考纲大家都说开盲盒&#xff0c;做阅读理解&#xff0c;但线上考试成绩出的快&#xff0c;晒 3A 的也不少。给大家分享下我的备考经历&#xff0c;希望能给后面备考的同学一点参考吧。 现在的新考纲是要学习三本书的&#xff0c;《PMBOK》第六版、…

弘景光电:技术实力与创新驱动并进

在光学镜头及摄像模组产品领域&#xff0c;广东弘景光电科技股份有限公司&#xff08;以下简称“弘景光电”&#xff09;无疑是一颗耀眼的明星。自成立以来&#xff0c;弘景光电凭借其强大的研发实力、卓越的产品性能、精密的制造工艺以及严格的质量管理体系&#xff0c;在光学…

使用 useSeoMeta 进行 SEO 配置

title: 使用 useSeoMeta 进行 SEO 配置 date: 2024/7/30 updated: 2024/7/30 author: cmdragon excerpt: 摘要&#xff1a;本文介绍了Nuxt3中的useSeoMeta组合函数&#xff0c;用于简化和优化网站的SEO配置。通过这个工具&#xff0c;开发者可以在Nuxt3项目中方便地设置页面…

C++ - 负载均衡式在线OJ

目录 一.项目的宏观结构 1.1 只实现类似 leetcode 的题⽬列表在线编程功能 1.2 项⽬宏观结构 1.3编写思路 二.所⽤技术与开发环境 2.1 所用技术 2.2 开发环境 三.compiler 服务设计 3.1 编译功能 3.2 日志功能 3.3 运⾏功能 3.4 编译并运⾏功能 3.5 把编译并运⾏功…

OpenBayes 教程上新 | 文生图、图生图、图像修复三合一神器, HiDiffusion 一键启动教程现已上线!

扩散模型已成为高分辨率图像合成的主流方法&#xff0c;传统的扩散模型虽然在图像合成方面取得了显著进展&#xff0c;但在扩展到更高分辨率时往往面临对象重复和计算成本增加的问题。 旷世科技开源的高分辨率框架 HiDiffusion&#xff0c;由分辨率感知 U-Net (RAU-Net) 和改进…

【手撕数据结构】链表高频面试题

目录 移除链表元素反转链表链表的中间节点倒数第k个节点反转链表(初阶)快慢指针法(进阶) 合并两个有序链表链表分割链表的回文结构 移除链表元素 思路:由题目可知我们需要在给定的一个链表中移除值为val的节点&#xff0c;这里需要注意的情况就是全是val的链表移除后为空链表和…

收藏!2024年GPU算力最新排名

​GPU&#xff08;图形处理单元&#xff09;算力的提升是驱动当代科技革命的核心力量之一&#xff0c;尤其在人工智能、深度学习、科学计算和超级计算机领域展现出了前所未有的影响力。2024年的GPU技术发展&#xff0c;不仅体现在游戏和图形处理的传统优势上&#xff0c;更在跨…

吴恩达老师机器学习-ex2

有借鉴网上的部分 第一题 导入库&#xff0c;读取数据并且展示前五行&#xff08;基本操作&#xff09; import numpy as np import pandas as pd import matplotlib.pyplot as plt #读取数据 path "./ex2data1.txt" data pd.read_csv(path,headerNone,names[&q…

Netty技术全解析:PooledByteBufAllocator源码视角下的详解

❃博主首页 &#xff1a; 「码到三十五」 &#xff0c;同名公众号 :「码到三十五」&#xff0c;wx号 : 「liwu0213」 ☠博主专栏 &#xff1a; <mysql高手> <elasticsearch高手> <源码解读> <java核心> <面试攻关> ♝博主的话 &#xff1a…