echarts 自定义y轴(不均匀刻度)

Posted on | In
Words count in article: 198 | Reading time ≈ 1

Demand

不均匀刻度的数值 实现在 y 轴固定区间的数值展示;
(例如: 初始数据有 0-10000 的数值, 需要 y 轴集中展示 0-1000 的数据)

Implete

思路: 将初始数据 0-1000 的放大 n 倍数, 大于 1000 的缩小 n 倍

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function formatData(arr, n) {
  const newHashArray = [];
  for (let i = 0; i < arr.length; i += 1) {
    const obj = {};
    const temp = arr[i];
    if (arr[i] > 0 && arr[i] <= 1000) {
      arr[i] = arr[i] * n < 1000 ? arr[i] : arr[i] * n;
    } else if (arr[i] > 1000 && arr[i] <= 1000 * n) {
      arr[i] = 1000 * n + arr[i] / 15;
    }
    obj.value = arr[i];
    obj.formatV = temp;
    newHashArray.push(obj);
  }
  return newHashArray;
}

对应的 yAxis axisLabel 配置

1
2
3
4
5
6
7
8
9
formatter: (v) => {
              let item = '';
              if (v > 1000) {
                item = Math.floor(v / 15) <= 1000 ? Math.floor(v / 15) : v;
              } else {
                item = v;
              }
              return item;
            },