江汉曾为客，相逢每醉还。
浮云一别后，流水十年间。
制作echarts的柱状图时我们发现axisLabel的长度过长时文字会堆叠在一起:
有些网站选择倾斜axisLabel来显示,或者让axisLabel完全竖直,效果都很差,我这里采用计算x轴刻度宽度的方法来进行换行处理:
echarts将柱状图分为grid,X轴Label和Y轴Label三个部分;
我们首先计算每个X轴Label大致可以显示多少个字:
var xAxisData = ["something...","something...","something...","something..."]
var gridWidth = 681; //可以根据canvas的宽度和grid的right,left,width进行计算
var fontsize = 14; //字体大小
var wordNum = parseInt((gridWidth / xAxisData.length) / fontsize);
然后在xAxis.axisLabel的formatter中设置换行:
xAxis: {
data: xAxisData,
type: 'category',
axisLabel: {
interval: 0,
formatter: function (value, index) {
var strs = value.split('');
var str = ''
for (var i = 0, s; s = strs[i++];) {
str += s;
if (!(i % wordNum)) str += '\n';
}
return str
}
}
}
这时我们发现如果grid的bottom默认为60,意味着x轴到canvas底部只能放下3行文字,所以我们需要调整grid的高度来放下更多的行:
计算最多有多少行,并根据最大行数设置chart容器高度:
var xAxisData = ["something...", "something...", "something...", "something..."]
var gridWidth = 681;
var fontsize = 14; //字体大小默认12px,这里设置成14可以保证label之间的间距
var wordNum = parseInt((gridWidth / xAxisData.length) / fontsize);
var maxLine = 0;
for (var i = 0; i < xAxisData.length; i++) {
var flag = parseInt(xAxisData[i].length / wordNum) + 1;
if (flag > maxLine) maxLine = flag;
}
//改变chart容器高度,340为dom的height减去grid的高度和top:
//此句放在echarts.init(dom)之前:
document.getElementById(id).style.height += (340 + max * 12) + "px";
设置grid的bottom:
grid: {
bottom: (max + 1) * 12, //字体大小默认12px
}
这样设置好就可以像上图那样自适应显示
当我们使用的dataZoom工具是时候:
为了让我们的缩放grid的时候重新计算每行显示多少字体,我们可以使用监听datazoom事件来完成:
myChart.on('datazoom', function (params) {
if (params.batch) {
var start = params.batch[0].start;
var end = params.batch[0].end;
} else {
var start = params.start;
var end = params.end;
}
var cur_col_num = ((end - start) / 100) * xAxisData.length; //计算缩放后可以显示几个柱子
wordNum = parseInt(Math.ceil((gridWidth / cur_col_num)) / 14);//重新计算wordNum
});
因为缩放的时候会触发我们设置的axisLabel的formatter,所以只要重新计算wordNum,我们的label就会随着缩放而改变每行显示的字:
