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 ...
随机推荐
- shell脚本中的日期处理
Ps:这篇文章只是为了做个分类,以后有看到比较好的时间处理命令都会列在这里,您如果有什么好的时间处理命令,可以评论中添加,我会定期查看更新,谢谢! 1.定义一个参数DATE_TODAY,用于记录当天时 ...
- 模拟赛小结:The 2019 China Collegiate Programming Contest Harbin Site
比赛链接:传送门 上半场5题,下半场疯狂挂机,然后又是差一题金,万年银首也太难受了. (每次银首都会想起前队友的灵魂拷问:你们队练习的时候进金区的次数多不多啊?) Problem J. Justify ...
- 修改Anaconda启动时默认路径
1.找到Anoconda启动快捷方式,入下图: 2.右击点击属性,进入下图: 3.将第三行的 目标(T): ......D:\Anoconda\Scripts\jupyter-notebook-sc ...
- 【HDU6703】array
题目大意:给定一个 N 个数字的排列,需要支持两种操作:对某个位置的数字 + 1e7,查询区间 [1, r] 中最小的不等于区间中任何一个数字的数. 题解:本题证明了对于 50W 的数据来说,\(O( ...
- 总结c语言
这个月的总结,我学到的知识虽然不是很多,学的很慢,也不懂什么意思,也没有多加去复习,也许这就是不去敲代码的代价,也只会简单的代码,学的时候真的是找不到思路,觉得这代码跟着老师讲课照着输入进去就可以了, ...
- 关于enter事件的触发
如果您使用了antd的Button组件,那么恭喜已经封装好了,只要加上htmlType='submit', 如果没有使用其他框架,使用onPress或者onKeydown事件,判断e.keycode ...
- 通俗易懂的例子解释 IAAS、SAAS、PAAS 的区别
你一定听说过云计算中的三个“高大上”的你一定听说过云计算中的三个“高大上”的概念:IaaS.PaaS和SaaS,这几个术语并不好理解.不过,如果你是个吃货,还喜欢披萨,这个问题就好解决了!好吧,其实你 ...
- promise,await,async小论
Promise: Promise为了解决异步回调地狱而生的,其解决方法就是链式调用promise.then()或promise.all(); Promise有两个参数,resolve和reject,第 ...
- [深度学习] R-CNN系论文略读
总结: 一.R-CNN 摘要: 在对象检测方面,其性能在前几年就达到了一个比较稳定的状态.性能最好的方法是一种复杂的整体系统,它将多个图片的低级特征通过上下文组合起来. 本文提出了一种简单.可扩展的算 ...
- Cobbler自动装机
preface 我们之前批量安装操作系统的时候都是采用pxe来安装,pxe也是通过网络安装操作系统的,但是PXE依赖于DHCP,HTTP/TFTP,kicstart等支持.安装流程如下所示: 对于上面 ...