亲宝软件园·资讯

展开

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

fanjiajia 人气:0

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

 

问题背景

  使用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'
    }]
};

 

 

 

 

 

 

 

 

 

加载全部内容

相关教程
猜你喜欢
用户评论