echarts 柱状图 底部文字过长

效果

代码

var option = {
tooltip: {
trigger: ‘axis’
},
grid: {
left: ‘10%’,
bottom:‘35%’
},
legend: {
data: [‘使用量’]
},
color: color,
toolbox: {
show: false,
feature: {
dataView: {show: true, readOnly: false},
magicType: {show: true, type: [‘line’, ‘bar’]},
}
},
calculable: true,
xAxis: [
{
type: ‘category’,
data: names,
axisLabel:{ interval: 0,rotate:40,
//文字换行
formatter:function(value)
{
debugger
var ret = “”;//拼接加\n返回的类目项
var maxLength = 20;//每项显示文字个数
var valLength = value.length;//X轴类目项的文字个数
var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
if (rowN > 1)//如果类目项的文字大于3,
{
for (var i = 0; i < rowN; i++) {
var temp = “”;//每次截取的字符串
var start = i * maxLength;//开始截取的位置
var end = start + maxLength;//结束截取的位置
//这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
temp = value.substring(start, end) + “\n”;
ret += temp; //凭借最终的字符串
}
return ret;
}
else {
return value;
}
} }
}
],
yAxis: [
{
type: ‘value’,
axisLine:{
lineStyle:{
color:’#708acc’,
}
}
}
],
series: [
{
name: ‘使用量’,
type: ‘bar’,
barWidth:‘30’,
data: totals,
itemStyle:{
borderType: ‘dotted’,
shadowColor: color1[0],
shadowBlur: 3
}
}
]
};