echarts柱状图x轴文字太多如何解决?超出省略显示成点例子代码

 分类:echarts时间:2022-04-07点击: 2022前端视频教程(自学必看)

在前端开发任务中使用echarts柱状图时,会出现x轴某项文字太长了这种情况,那么echarts柱状图x轴文字太多如何解决?办法是超出省略显示成点就行效果图看下图所示,在x轴的axisLabel里加一个formatter函数,index等于3表示字数为3个超出就显示成点。

echarts柱状图x轴文字太多如何解决

echarts柱状图x轴文字太多超出省略显示成点例子代码:

xAxis: {
type: 'category',
data: this.rows.xAxis,
axisLine: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.1)'
}
},
axisLabel: {
interval:0,
textStyle: {
color: '#CCCCCC',
fontSize:'12px'
},
//多出字可以省略显示成点
formatter: function (params){
var index = 3; //字数为3个超出就显示成点
var newstr = '';
for(var i = 0; i< params.length; i += index){
var tmp = params.substring(i, i+index);
newstr += tmp +'';
}
if( newstr.length > 3)
return newstr.substring(0, 3) + '...';
else
return '\n'+newstr;
},
},
},
除注明外的文章,均为来源:老汤博客,转载请保留本文地址!
原文地址: