ECharts设置X轴axisLabel自适应

àì夳堔傛蜴生んèń 2022-12-10 07:20 961阅读 0赞

制作echarts的柱状图时我们发现axisLabel的长度过长时文字会堆叠在一起:

![c1e9da62fbf86c4710488d22eef4f3ad.png][]

有些网站选择倾斜axisLabel来显示,或者让axisLabel完全竖直,效果都很差,我这里采用计算x轴刻度宽度的方法来进行换行处理:

![d7fa3a5e20d44ff1bd4baaa9e6fd262c.png][]

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工具是时候:

![027446c3cd26dfcd67bb60bc3b404e35.png][]

为了让我们的缩放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就会随着缩放而改变每行显示的字:

![20200924171631965.png][]

链接：https://www.jianshu.com/p/0082ae8bea3a

[c1e9da62fbf86c4710488d22eef4f3ad.png]: /images/20221123/10c1da1792fb41ada44dee74eaed32ec.png
[d7fa3a5e20d44ff1bd4baaa9e6fd262c.png]: /images/20221123/5fd72424bd194d9584811657531e97a9.png
[027446c3cd26dfcd67bb60bc3b404e35.png]: /images/20221123/47d511deb8f045beaddfedf8320bccec.png
[20200924171631965.png]: /images/20221123/d582cba428014e548bdb159dcf7a6633.png