我要评论写图表时，y轴的数值过大，不太可能直接展示，这时候就得简写了，或者百分比展示的也要处理，如下图：
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 <= 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的属性，数值格式化，对应的大数值就会转换为简写，图表看起来美观，简明一些。
总结
到此这篇关于echarts坐标轴刻度数值处理的文章就介绍到这了,更多相关echarts坐标轴刻度数值内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！
发表评论