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

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

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 },
        ]
    }
}

可见,label被隔列的隐藏。

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

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

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

  • 6
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值