ECharts - 坐标轴刻度数值处置惩罚

写图表时，Y轴的数值过大，不太可能直接展示，这时候就得简写了，大概百分比展示的也要处置惩罚，如下图：

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

复制代码

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

1K	1000
1M	1000,000
1B	1000,000,000
1KB	1000,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);
16.   } else if (num <= 7) {
17.     const text1 = parseInt(num - 3, 10) / 3 > 1 ? 'M' : 'K';
18.     const fm = text1 === 'K' ? 1000 : 1000000;
19.     newValue[1] = text1;
20.     newValue[0] = `${vblValue / fm}`;
21.   } else {
22.     let text1 = (num - 6) / 3 > 1 ? 'B' : 'M';
23.     text1 = (num - 9) / 3 > 1 ? 'KB' : text1;
24.     let fm = 1;
25.     if (text1 === 'M') {
26.       fm = 1000000;
27.     } else if (text1 === 'B') {
28.       fm = 1000000000;
29.     } else if (text1 === 'KB') {
30.       fm = 1000000000000;
31.     }
32.     newValue[1] = text1;
33.     newValue[0] = `${parseInt(vblValue / fm, 10)}`;
34.   }
35.   if (vblValue < 1000) {
36.     newValue[1] = '';
37.     newValue[0] = `${vblValue}`;
38.   }
39.   return `${value < 0 ? '-' : ''}${newValue.join('')}`;
40. }

复制代码

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





免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。