Bars go outside x axis

by tmtron

HTML

<html>
  <body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.9.0-rc.1/echarts.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ==" crossorigin="anonymous"></script>
    <div id="main"></div>
  </body>
</html>

CSS

#main {
  width: 1200px;
  height: 400px;
  border: 1px solid red;
}

JavaScript

var container = document.getElementById('main');
var chart = echarts.init(container);


const min = "2020-11-25T06:10";
const max = "2020-11-25T08:10";
function getData() {
      const data = [];
      let now = +new Date(2020, 10, 25);
      const oneDay = 10 * 60 * 1000;
      const randomData = ()=> {
        now = new Date(+now + oneDay);
        return {
          value: [
            now.toISOString().substring(0,16),
            Math.floor(Math.random() * 100),
          ],
        };
      };
      for (let i = 0; i < 72; i++) {
        data.push(randomData());
      }
      return data;
}
const data = getData();
chart.setOption({
    xAxis: [
      {
      	splitNumber: 24,
        scale: false,
        min, 
        max,
        type: "time",
        axisLabel: {
          formatter(value) {
            return moment(value).format("HH");
          }
        }
      }
    ],
    yAxis: [
      {
        type: "value"
      }
    ],
    series: [
      {
        data,
        type:'bar',
        clip: true
      }
    ]
  });