vue中解决数值过大显示问题,适用echarts

减少废话,直接看效果

可以看到Y轴的数值过大,全部显示直观,此时封装了一个方法,只需传入参数,超过'万', 会自动添加'万', 超过'亿'则会自动添加'亿'

export const unitTranslate = ({value = 0, unit = '', base = 1, places = 2} = {}) => {
	const vLength = String(parseInt((value *= base), 10)).length;
	if (vLength >= 4 && vLength < 8) {
		unit = `万${unit}`;
		value /= Math.pow(10, 4);
	} else if (vLength >= 8) {
		unit = `亿${unit}`;
		value /= Math.pow(10, 8);
	}

	return {
		value: maxDecimalPlaces({value: value, places}),
		unit,
		formatter: `${maxDecimalPlaces({value: value, places})}${unit}`
	};
};

此时只需要将数值传入进去即可,具体如下图

axisLabel: {		
	formatter(value) {
		return unitTranslate({value, unit: '', base: 1, places: 1}).formatter;
	}
}

注意: 传入的是对象格式, 默认 value,得到效果如下

不仅是echarts,任何需要修改数值的地方都可以使用

以上