ECharts – 坐标轴刻度数值处理

15,618次阅读
没有评论

共计 983 个字符,预计需要花费 3 分钟才能阅读完成。

写图表时,Y 轴的数值过大,不太可能直接展示,这时候就得简写了,或者百分比展示的也要处理,如下图:

ECharts - 坐标轴刻度数值处理

ECharts - 坐标轴刻度数值处理

 yAxis: {
   type: 'value',

   // Y 轴轴线
   axisLine: {show: false}, 

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

   // 轴刻度值
   axisLabel: {
     interval: 0, // 坐标轴值与坐标轴间距

     rotate: 0, // 旋转角度
    
     // 值格式化 (toBMK 函数 处理 Y 轴数字值)
     formatter(val) {return `${toBMK(val)}${option.series[0].data[0].indexOf('%') > -1 ? '%' : ''}`;
     },
   },
 }

红框圈起来的数值表示如下:

1K 1000
1M 1000,000
1B

1000,000,000

1KB 1000,000,000,000

toBMK 函数:

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 = 10 
    ? `${parseInt(vblValue / 1000, 10)}` 
    : (vblValue / 1000).toFixed(1);

  } else if (num  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 

Y 轴 yAxis 的属性,数值格式化,对应的大数值就会转换为简写,图表看起来美观,简明一些。

原文地址: ECharts – 坐标轴刻度数值处理

    正文完
     0
    Yojack
    版权声明:本篇文章由 Yojack 于2024-10-07发表,共计983字。
    转载说明:
    1 本网站名称:优杰开发笔记
    2 本站永久网址:https://yojack.cn
    3 本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长进行删除处理。
    4 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
    5 本站所有内容均可转载及分享, 但请注明出处
    6 我们始终尊重原创作者的版权,所有文章在发布时,均尽可能注明出处与作者。
    7 站长邮箱:laylwenl@gmail.com
    评论(没有评论)