echarts x轴标签文字过多导致显示不全/x轴旋转/x轴显示完全

最新推荐文章于 2024-07-30 16:51:37 发布

林强181

最新推荐文章于 2024-07-30 16:51:37 发布

阅读量721

点赞数

本文链接：https://blog.csdn.net/qlin_11/article/details/115716816

版权

解决Echarts中柱状图X轴标签过长导致显示不全的问题，通过设置grid属性增加下方空白以及axisLabel的rotate属性进行文字旋转，确保所有标签清晰可见。具体实现可在Echarts官方实例中调整参数观察效果。

摘要由CSDN通过智能技术生成

echarts x轴标签文字过多导致显示不全/x轴旋转/x轴显示完全
这主要涉及两点：
1.grid设置距下端有距离
2.x轴rotate 设置
下面直接放在echarts官网的的普通柱状图实例里，调整就明白了。注意对比去掉grid和axisLabel的不同效果。

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat3333', 'Su332'],
        axisLabel: {
      rotate: 40
    }
    },
      grid: {
      left: "3%",
      top: 130,
      right: 60,
      bottom: 50,
      containLabel: true,
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar'
    }]
};

参考：https://blog.csdn.net/superlover_/article/details/79714823