本文探讨了Echarts中y轴刻度标签的格式化技巧，通过设置`yAxis.axisLabel.formatter`实现数值的简化展示，如将大数值转换为'万'或'千万'。同时，调整`grid.left`属性优化图表布局。通过缩短数据长度并结合自定义 formatter 函数，实现了数据可视化的清晰易读。
yAxis.axisLabel.formatter：刻度标签的内容格式器，支持字符串模板和回调函数两种形式。比如可以设置太长了换行之类的。
grid.left：grid 组件离容器左侧的距离。默认值是10%。
解决思路：
既然样式不好解决，那就缩短数据长度。
我的做法就是数据太大就除以1万，特别大就除以一千万，然后数字显示样式这块加上‘万’字或者‘千万’
代码：
option = {
…
yAxis: {
type: ‘value’,
name: ‘营业额(元)’,
axisTick: {
inside: true
},
《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】 scale: true,
axisLabel: {
margin: 2,
formatter: function (value, index) {
if (value >= 10000 && value < 10000000) {
value = value / 10000 + “万”;
} else if (value >= 10000000) {
value = value / 10000000 + “千万”;
}
return value;
}
},
},
grid: {
left: 35
},
最终效果：
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
