ECharts设置X轴axisLabel自适应

江汉曾为客，相逢每醉还。
浮云一别后，流水十年间。

制作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就会随着缩放而改变每行显示的字: