在前端开发任务中使用echarts柱状图时，会出现x轴某项文字太长了这种情况，那么echarts柱状图x轴文字太多如何解决？办法是超出省略显示成点就行效果图看下图所示，在x轴的axisLabel里加一个formatter函数,index等于3表示字数为3个超出就显示成点。
横坐标倾斜加省略
rotate: 30, 倾斜30度
xAxis: [{
type: 'category',
data: xData,
axisPointer: {
type: 'shadow'
},
axisLabel: {
interval: 0,
rotate: 30,
//多出字可以省略显示成点
formatter: function (params){
var index = 6; //字数为6个超出就显示成点
var newstr = '';
for(var i = 0; i< params.length; i += index){
var tmp = params.substring(i, i+index);
newstr += tmp +'';
}
if( newstr.length > 6)
return newstr.substring(0, 6) + '...';
else
return '\n'+newstr;
},
}
}],展示效果如下
横坐标换行展示
interval: 0,属性展示全部，当横坐标的空间不足也会存在隐藏
xAxis: [{
type: 'category',
data: xData,
axisPointer: {
type: 'shadow'
},
axisLabel: {
interval: 0,
formatter: function (params) {
let newParamsName = '';
const paramsNameNumber = params.length; // 文字总长度
const provideNumber = 6; //一行显示几个字
const rowNumber = Math.ceil(paramsNameNumber / provideNumber);
if (paramsNameNumber > provideNumber) {
for (let p = 0; p < rowNumber; p++) {
const start = p * provideNumber;
const end = start + provideNumber;
const tempStr = p === rowNumber - 1 ? params.substring(start, paramsNameNumber) : params.substring(start, end) + '\n';
newParamsName += tempStr;
}
} else {
newParamsName = params;
}
return newParamsName;
},
}
}],文章来源：https://www.toymoban.com/news/detail-744063.html
文章来源地址https://www.toymoban.com/news/detail-744063.html
到了这里，关于echarts柱状图x轴文字太多如何解决?超出省略显示成点例子代码的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
