title: I want to create a timeline-like bar chart using ECharts
body: <p>I want to change the label of the xAxis into hours with 1 hour interval. How do I format the xAxis data? I cannot use time type for the xAxis because it usually is for continuos data.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>option = {
  tooltip : {
          trigger: 'axis',
          axisPointer : {
              type : 'shadow'
          },
          formatter: function (params) {
              var tar;
              if (params[1].value != '-') {
                  tar = params[1];
              }
              else {
                  tar = params[0];
              }
              return tar.name + '&lt;br/&gt;' + tar.seriesName + ' : ' + tar.value + ' min';
          }
      },
      legend: {
          data: ['Duration (minutes)']
      },
      grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
      },
      xAxis:  {
          type: 'value',
          formatter: '{value} kg'
      },
      yAxis: {
          type: 'category',
          data: ['2019-02-01','2019-02-02','2019-02-03','2019-02-04','2019-02-05','2019-02-06','2019-02-07']
      },
      series: [
  
          {
              type: 'bar',
              stack: '总量',
              itemStyle: {
                  normal: {
                      barBorderColor: 'rgba(0,0,0,0)',
                      color: 'rgba(0,0,0,0)'
                  },
                  emphasis: {
                      barBorderColor: 'rgba(0,0,0,0)',
                      color: 'rgba(0,0,0,0)'
                  }
              },
              data: [150, 212, 201, 154, 190, 330, 410]
          },
          {
              name: 'Duration (minutes)',
              type: 'bar',
              stack: '总量',
              itemStyle: {
                  color: '#88c149'
              },
              label: {
                  normal: {
                      show: true,
                      position: 'insideRight'
                  }
              },
              data: [820, 832, 901, 934, 1290, 1330, 1320]
          }
      ]
  };</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://i.stack.imgur.com/72uEa.png" rel="nofollow noreferrer">I want to change the label of the xAxis into hours with 1 hour interval. How do I format the xAxis data?</a></p>