e-chart折线图坐标轴刻度标签旋转后刻度超出grid 区域

时间:2021-01-29 fanjiajia 人气:0

问题背景

　　使用e-chart画折线图时，如果x轴刻度值过长则会展示不完全
　　如图：

option = {
    grid:{
      top:'10%', 
      left:'10%',
      right:'10%',
      bottom:'10%',
    },
    xAxis: {
        type: 'category',
        data: ['11111111111', '1111111111111', '1111111111111111', '1111111111111111', '1111111111111', '11111111', '1111111111'],
        axisLabel: {
            interval: 'auto'
        }
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [150, 230, 224, 218, 135, 147, 260],
        type: 'line'
    }]
};

这个时候设置x轴数据旋转即可全部显示

rotate:50,

如图，聪明的同学可能已经发现了，旋转了的x轴可能超出grid区域导致隐藏，可能有同学可能会说：‘那我就重新设置一个新的grid就可以了’，这是一个解决方案，但是当x轴数据不确定长度时改怎么计算新的grid呢，在翻遍e-chart文档时我发现一个叫containLabel的属性，

是不是一目了然，有了这个属性值，我们给grid添加这个属性就解决了。整个grid的大小就包含了坐标刻度了，无论怎么旋转都可以保证刻度值一直在grid里面了

option = {
    grid:{
      top:'10%', 
      left:'10%',
      right:'10%',
      bottom:'10%',
     containLabel:true
    },
    xAxis: {
        type: 'category',
        data: ['11111111111', '1111111111111', '1111111111111111', '1111111111111111', '1111111111111', '11111111', '1111111111'],
        axisLabel: {
            rotate:50,
            interval: 'auto'
        }
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [150, 230, 224, 218, 135, 147, 260],
        type: 'line'
    }]
};

加载全部内容