快捷導(dǎo)航

ECharts坐標(biāo)軸刻度數(shù)值處理方法例子

更新時間：2024年11月12日 08:55:42 作者：云胡不喜？

這篇文章主要給大家介紹了關(guān)于ECharts坐標(biāo)軸刻度數(shù)值處理的相關(guān)資料,文章介紹了一個用于圖表Y軸數(shù)值簡寫的函數(shù),它可以將大數(shù)值轉(zhuǎn)換為K、M、B等簡寫形式,從而使圖表更加美觀和易讀,需要的朋友可以參考下

寫圖表時，Y軸的數(shù)值過大，不太可能直接展示，這時候就得簡寫了，或者百分比展示的也要處理，如下圖：

 yAxis: {
   type: 'value',

   // Y軸軸線
   axisLine: { show: false }, 

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

   // 軸刻度值
   axisLabel: {
     interval: 0, //坐標(biāo)軸值與坐標(biāo)軸間距

     rotate: 0, //旋轉(zhuǎn)角度
    
     // 值格式化 (toBMK函數(shù) 處理 Y軸數(shù)字值)
     formatter(val) {
       return `${toBMK(val)}${option.series[0].data[0].indexOf('%') > -1 ? '%' : ''}`;
     },
   },
 }

紅框圈起來的數(shù)值表示如下：

1K	1000
1M	1000,000
1B	1000,000,000
1KB	1000,000,000,000

toBMK函數(shù)：

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的屬性，數(shù)值格式化，對應(yīng)的大數(shù)值就會轉(zhuǎn)換為簡寫，圖表看起來美觀，簡明一些。

總結(jié)

到此這篇關(guān)于ECharts坐標(biāo)軸刻度數(shù)值處理的文章就介紹到這了,更多相關(guān)ECharts坐標(biāo)軸刻度數(shù)值內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: