echarts 柱状图-无数据情况

Question

想要的的效果是：柱状图无数据的情况下，不占位置，红框里的空白能移除，柱子都紧挨着

option = {
    tooltip: {trigger:'axis'},
  legend: {
    data: ["Food", "Cloth", "Book"]
  },
  grid: {
    left: "3%",
    right: "4%",
    bottom: "3%",
    containLabel: true
  },
  xAxis: {
    type: "category",
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
  },
  yAxis: {
    type: "value"
  },
  series: [{
    name: "Food",
    type: "bar",
    data: [320, 302, 301, 334, 390, 330, 320]
  }, {
    name: "Cloth",
    type: "bar",
    data: [150, null, 201, null, 190, 330, 410]
  }, {
    name: "Book",
    type: "bar",
    data: [820, 832, 901, 934, 1290, 1330, 1320]
  }]
}

Answer 1

要不通过js判断高度为零就隐藏加移动

Answer 2

可以看下我的解决方案https://blog.csdn.net/weixin_57933935/article/details/144128031