Echarts 里面獲取縱坐標刻度的間距

概述

今天 PM 說，需要把 echarts 圖表的縱坐標調成這樣：如果全是 4 位數就用 K 為單位。冷靜分析，就是說如果縱坐標刻度的間距是四位數，就用 K 為單位。那要如何獲取縱坐標刻度的間距呢？我們都知道，Echarts 縱坐標刻度的間距是它自己生成的，而且會變。於是我去看 Echarts 源碼碰碰運氣，竟然讓我發現了 Echarts 的縱坐標刻度的間距的生成方法！！！記錄下來，供以后開發時參考，相信對其他人也有用。

參考資料：

Echarts源碼1

Echarts源碼2

源碼

簡單來說，它是用如下方法生成的：

// 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;

可以看到：

1. 間距只和數據的最大值還有 splitNumber 有關，與其它值都沒有關系。
2. Echarts 使用 log10 來獲取最優的間距。具體算法原理不知道。
3. Math.log(val) / Math.LN10 是 lgx(以10為對數)；Math.log(val) / Math.LN2 是 lgx(以2為對數)