mpvue-echarts柱状图数据偏少时不自适应拉开柱子间距

UI设计图是这样的,放6个数据,

 但是调接口时,数据偏少时,echarts就会自适应加大柱子之间间距,3个数据时看着还好,一条两条数据时它自己在空白区域居中或者分散就比较单调稍微影响美观,这时想让图表展示出从上向下不扩大间距的依次排列,怎么办呢?百度上竟然没百度出来有什么属性来控制,那就只能自己创造条件来实现了

调完接口,给数组赋值时,判断如果没有达到6个数据时就push空字符串,这样就出来了想要的效果了。

 if (this.flowRankData.typeName.length < 6) {
    for (var i = 0, lackLength = 9 - this.flowRankData.typeName.length;i<lackLength;
i++) {
        this.flowRankData.typeName.push('')
      }
  }

 

 

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值