关于使用echarts柱状图时,由于缩放或宽度太小引发的坐标轴标签消失问题的解决办法

    技术2025-09-24  82

    在不设置横向滚动时,当数据条目过多,可能会造成坐标轴里的标签由于宽度不足以放下所有标签,导致部分标签无法渲染出来,如下图:

     

    var option= { dataset: { source: [ { name: '2020年7月3日', value: Math.random() * 30 }, { name: '2020年7月4日', value: Math.random() * 30 }, { name: '2020年7月5日', value: Math.random() * 30 }, { name: '2020年7月6日', value: Math.random() * 30 }, { name: '2020年7月7日', value: Math.random() * 30 }, { name: '2020年7月8日', value: Math.random() * 30 }, { name: '2020年7月9日', value: Math.random() * 30 }, { name: '2020年7月10日', value: Math.random() * 30 }, { name: '2020年7月11日', value: Math.random() * 30 }, { name: '2020年7月12日', value: Math.random() * 30 }, { name: '2020年7月13日', value: Math.random() * 30 }, { name: '2020年7月14日', value: Math.random() * 30 }, { name: '2020年7月15日', value: Math.random() * 30 }, { name: '2020年7月16日', value: Math.random() * 30 }, { name: '2020年7月17日', value: Math.random() * 30 }, ] } }

    可见,数据被隔行的隐藏。

    如果此时,希望在不调整宽度也不添加横向滚动的情况下让标签全部显示出来,可以设置xAxis.axisLabel.intreval为0,强制显示标签。设置完后标签就可全部强制显示出来了。不仅是横坐标,纵坐标也可以有一样的设置。

     但显示效果其实也不佳,还不如做样式调整或者横向滚动。

    附上文档对这个属性的介绍:

     

    Processed: 0.008, SQL: 9