Echarts 里面获取纵坐标刻度的间距
概述
今天 PM 说,需要把 echarts 图表的纵坐标调成这样:如果全是 4 位数就用 K 为单位。冷静分析,就是说如果纵坐标刻度的间距是四位数,就用 K 为单位。那要如何获取纵坐标刻度的间距呢?我们都知道,Echarts 纵坐标刻度的间距是它自己生成的,而且会变。于是我去看 Echarts 源码碰碰运气,竟然让我发现了 Echarts 的纵坐标刻度的间距的生成方法!!!记录下来,供以后开发时参考,相信对其他人也有用。
参考资料:
源码
简单来说,它是用如下方法生成的:
// this.data 是数据
const round = true;
const splitNumber = 4;
const max = this.data.reduce((x,y) => x > y ? x : y);
let val = max / splitNumber;
// echart 内部计算 interval 的方法
// https://github.com/apache/incubator-echarts/blob/fd064123626c97b36cbd6da1b5fc73385c280abd/src/util/number.js
const exponent = Math.floor(Math.log(val) / Math.LN10);
const exp10 = Math.pow(10, exponent);
const f = val / exp10; // 1 <= f < 10
let nf;
if (round) {
if (f < 1.5) { nf = 1; }
else if (f < 2.5) { nf = 2; }
else if (f < 4) { nf = 3; }
else if (f < 7) { nf = 5; }
else { nf = 10; }
}
else {
if (f < 1) { nf = 1; }
else if (f < 2) { nf = 2; }
else if (f < 3) { nf = 3; }
else if (f < 5) { nf = 5; }
else { nf = 10; }
}
val = nf * exp10;
// Fix 3 * 0.1 === 0.30000000000000004 issue (see IEEE 754).
// 20 is the uppper bound of toFixed.
return exponent >= -20 ? +val.toFixed(exponent < 0 ? -exponent : 0) : val;
可以看到:
- 间距只和数据的最大值还有 splitNumber 有关,与其它值都没有关系。
- Echarts 使用 log10 来获取最优的间距。具体算法原理不知道。
- Math.log(val) / Math.LN10 是 lgx(以10为对数);Math.log(val) / Math.LN2 是 lgx(以2为对数)
Echarts 里面获取纵坐标刻度的间距的更多相关文章
- 坐标轴刻度取值算法-基于魔数数组-源于echarts的y轴刻度计算需求
本文链接:https://blog.csdn.net/qq_26909801/article/details/96966372数值型坐标轴刻度计算算法前言算法描述上代码代码运行效果结语前言因实习的公司 ...
- ECharts动态获取后台传过来的json数据进行多个折线图的显示,折线的数据由后台传过来
ECharts 多个折线图动态获取json数据 效果图如下: 一.html部分 <p id="TwoLineChart" style="width:100%; he ...
- matlab 设置横纵坐标刻度的字体!!
set(gca,'FontSize',16) %%设置横纵坐标字体的大小
- echarts 修改y轴刻度间隔问题
其中min.max可以自定义可以动态获取数据 yAxis : [ { type : 'value', axi ...
- echarts 实时获取数据
html: <div id="realTimeInvoke" class="chart" style="height: 400px;" ...
- Django+Xadmin+Echarts动态获取数据legend颜色显示灰色问题已解决
前段时间做的使用Django的Xadmin后台和百度Echarts进行后台数据可视化,功能虽然实现,展示出来的legend图例,都是灰色的,只有鼠标放上去才会显示彩色的.百度都快被我刨穿了,看到有类似 ...
- echarts Y轴的刻度 跟数据对应---tooltip-formatter
var xAxisData = ['2018-01', '2018-02', '2018-03', '2018-04', '2018-05', '2018-06', '2018-07', '2018- ...
- 关于Echarts的原生js获取DOM元素与动态加载DOM元素的冲突问题
1.前言: 最近在做的看板项目,因为需要循环加载后台数据,并且用Echarts做数据呈现,所以jQuery和angular等库统统靠边站,Echarts用的是原生js获取DOM元素,至于诸多不兼容等深 ...
- Jquery + echarts 使用
常规用法,就不细说了,按照官网一步步来. 本文主要解决问题(已参考网上其他文章): 1.把echarts给扩展到JQuery上,做到更方便调用. 2.多图共存 3.常见的X轴格式化,钻取时传业务实体I ...
随机推荐
- Linux 的帐号与群组:有效与初始群组、groups, newgrp
关于群组: 有效与初始群组.groups, newgrp 认识了帐号相关的两个档案 /etc/passwd 与 /etc/shadow 之后,您或许还是会觉得奇怪, 那么群组的设定档在哪里?还有,在 ...
- shell脚本中的日期处理
Ps:这篇文章只是为了做个分类,以后有看到比较好的时间处理命令都会列在这里,您如果有什么好的时间处理命令,可以评论中添加,我会定期查看更新,谢谢! 1.定义一个参数DATE_TODAY,用于记录当天时 ...
- JVM-类加载原理
写在前面 我们知道我们编写的java代码,会经过编译器编译成字节码文件(class文件),再把字节码文件装载到JVM中,映射到各个内存区域中,我们的程序就可以在内存中运行了.那么字节码文件是怎样装载到 ...
- 生产者消费者问题--synchronized
# 代码 public class App { public static void main(String[] args) { Depot depot = new Depot(100); Produ ...
- 批量处理window下^M符号
#!/bin/ksh #set -x # #去掉文件中的^M 符号 # usage() { echo "Usage : sh ToAscll.sh [Option] [value]" ...
- 牛客练习赛47 DongDong数颜色 (莫队算法)
链接:https://ac.nowcoder.com/acm/contest/904/E 来源:牛客网 DongDong数颜色 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 5242 ...
- BZOJ3555 [Ctsc2014]企鹅QQ[暴力+字符串hash]
菜到自闭,一道省选小水题都能给我做繁. 要求有一位不同,则对每个串每一位暴力枚举把这一位删掉,放一个分隔符,算一下hash,插表,相似的都应该会被插入同一个桶.最后把hash统计一下即可.复杂度$O( ...
- Linux设置程序开机自启动,系统命令chkconfig及linux /etc/rc.d/目录的详解
整理了linux下程序开启几种方式,转载相关博客做统一记录 <linux程序设置开机自启动>转载自:https://www.cnblogs.com/flcz/p/7691532.html ...
- DOM修改
㈠DOM标准 核心DOM: HTML DOM ...
- hdu 4451 Dressing 衣服裤子鞋 简单容斥
Dressing Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total S ...