echarts柱状图坐标轴的内容太长导致显示不全的两种解决办法(echarts柱状图坐标轴)

发布时间：2024-01-16

echarts柱状图坐标轴的内容太长导致显示不全的两种解决办法情况一：坐标上的内容是文字时

推荐整理分享echarts柱状图坐标轴的内容太长导致显示不全的两种解决办法(echarts柱状图坐标轴)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:echarts柱状图formatter,echarts 柱状图,echarts柱状图坐标错位,echarts 柱状图,Echarts柱状图坐标轴颜色,echarts柱状图坐标错位,Echarts柱状图坐标轴颜色,Echarts柱状图坐标轴颜色,内容如对您有帮助，希望把文章链接给更多的朋友！

如上图这样一个横向的柱状图，y坐标轴的内容太长后会导致显示不全。

因为数据是由后端传过来的，有些会很长有些会比较短，如果只是一味的调整grid会导致短数据前的留白过于多，布局不合理。这个时候就需要用一些别的属性。

解决办法：

在yAxis中的axisLabel中加入以下属性配置：

注释：

width: 60,//将内容的宽度固定overflow: 'truncate',//超出的部分截断truncate: '...',//截断的部分用...代替

附上官方文档截图：

echarts柱状图坐标轴的内容太长导致显示不全的两种解决办法(echarts柱状图坐标轴)

情况二：如果纵坐标上是数字

如图，左侧的数据会展示不全

一、首先可以配置grid自适应

grid: { top: "15%", left: "2%", right: "2%", bottom: "2%", containLabel: true },

这样设置之后数字就会展示全了：

但是新的需求又来了，如果在数据特别大的情况下，左边数据占得位置就会越来越宽，导致布局不好看，所以我们可以对这种数字进行处理一下

在yAxis的axisLabel属性中进行配置formatter

formatter(v) { v = v.toString() if (v >= 100000000000) { return (v.substring(0, 5) / 10) + '亿' } else if (v >= 10000000000) { return (v.substring(0, 4) / 10) + '亿' } else if (v >= 1000000000) { return (v.substring(0, 3) / 10) + '亿' } else if (v >= 100000000) { return (v.substring(0, 2) / 10) + '亿' } else if (v >= 10000000) { return v.substring(0, 4) + '万' } else if (v >= 1000000) { return v.substring(0, 3) + '万' } else if (v >= 100000) { return v.substring(0, 2) + '万' } else if (v >= 10000) { return (v.substring(0, 2) / 10) + '万' } else if (v >= 1000) { return v } else { return v } },

这样设置之后的效果如下图：

这样设置的好处是左侧不会因为数据过大而一度扩展表格左侧宽度

本文链接地址:https://www.jiuchutong.com/zhishi/297339.html 转载请保留说明！

上一篇：微信小程序自定义组件（超详细）(微信小程序自定义tabbar)

下一篇：如何在 Vue.js 中使用 Axios(vue.js in action)