0


ECharts - 坐标轴刻度数值处理

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

  1. yAxis: {
  2. type: 'value',
  3. // Y轴轴线
  4. axisLine: { show: false },
  5. // 刻度线
  6. axisTick: { show: false },
  7. // 轴刻度值
  8. axisLabel: {
  9. interval: 0, //坐标轴值与坐标轴间距
  10. rotate: 0, //旋转角度
  11. // 值格式化 (toBMK函数 处理 Y轴数字值)
  12. formatter(val) {
  13. return `${toBMK(val)}${option.series[0].data[0].indexOf('%') > -1 ? '%' : ''}`;
  14. },
  15. },
  16. }

红框圈起来的数值表示如下:
1K10001M1000,0001B
1000,000,000
1KB1000,000,000,000
toBMK函数:

  1. export function toBMK(value) {
  2. const vblValue = Math.abs(value);
  3. const newValue = ['', '', ''];
  4. let fr = 1000;
  5. let num = 3;
  6. while (vblValue / fr >= 1) {
  7. fr *= 10;
  8. num += 1;
  9. }
  10. if (num <= 4) {
  11. newValue[1] = 'K';
  12. newValue[0] = vblValue / 1000 >= 10
  13. ? `${parseInt(vblValue / 1000, 10)}`
  14. : (vblValue / 1000).toFixed(1);
  15. } else if (num <= 7) {
  16. const text1 = parseInt(num - 3, 10) / 3 > 1 ? 'M' : 'K';
  17. const fm = text1 === 'K' ? 1000 : 1000000;
  18. newValue[1] = text1;
  19. newValue[0] = `${vblValue / fm}`;
  20. } else {
  21. let text1 = (num - 6) / 3 > 1 ? 'B' : 'M';
  22. text1 = (num - 9) / 3 > 1 ? 'KB' : text1;
  23. let fm = 1;
  24. if (text1 === 'M') {
  25. fm = 1000000;
  26. } else if (text1 === 'B') {
  27. fm = 1000000000;
  28. } else if (text1 === 'KB') {
  29. fm = 1000000000000;
  30. }
  31. newValue[1] = text1;
  32. newValue[0] = `${parseInt(vblValue / fm, 10)}`;
  33. }
  34. if (vblValue < 1000) {
  35. newValue[1] = '';
  36. newValue[0] = `${vblValue}`;
  37. }
  38. return `${value < 0 ? '-' : ''}${newValue.join('')}`;
  39. }

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

标签: 前端 echarts

本文转载自: https://blog.csdn.net/qq_33242126/article/details/140769961
版权归原作者 云胡不喜? 所有, 如有侵权,请联系我们删除。

“ECharts - 坐标轴刻度数值处理”的评论:

还没有评论