设置echarts x轴label标签自适应换行

//计算每行存放字体个数
       var width=document.getElementById('defctChart').clientWidth*0.8;//获取x轴长度,可以根据grid设置的左右距离得出
        var num=6;//x轴元素个数即柱体个数
        var fonsize=13;//字体大小
        var wordNum= parseInt((width / num) / fonsize);//计算每个柱体宽度除以字体大小获得每行可存放字体个数
xAxis: [{//配置x轴参数
                type: 'category',
                data: data.factoryList,
                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调整滚动条离x轴距离
    grid: {
                top: '18%',
                left: '10%',
                right: '10%',
                bottom: '20%',
            },
尚未解决的问题

1、如何直接获取自适应柱状图的柱体宽度
2、如何动态设置bottom即根据字体换行数量设置bottom

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值