title: echarts: dataZoom slider doesn't show the correct data preview
body: <p>I'm trying to create a zoomable line chart with echarts. The chart should show at first only 5 days. I use the dataZoom type 'inside' and also 'slider'. But the slider box isn't shown properly.</p>
  
  <p>I played around a bit with the code, but I'm not able to fix this problem.</p>
  
  <p>Here is my code: </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>var myChart = echarts.init(document.getElementById('main'));
  
  option = {
      xAxis: {
          type: 'time',
      },
      yAxis: {
          type: 'value',
          min: 0,
          max: 10
      },
       dataZoom: [
          {
              type: 'slider',
              show: true,
              xAxisIndex: [0],
              startValue: '2019-10-21 00:00:00',
              endValue: '2019-10-28 12:35:06',
              minValueSpan: 3600 * 24 * 1000 * 7,
              filterMode: 'filter'
          },
          {
              type: 'inside',
              xAxisIndex: [0],
              startValue: '2019-10-21 00:00:00',
              endValue: '2019-10-28 12:35:06',
              minValueSpan: 3600 * 24 * 1000 * 7,
              filterMode: 'filter'
              },
      ],
      series: [{
          data: [
              {name: '2019-10-28 12:35:06', value: ['2019-10-28 12:35:06', null]},
              {name: '2019-10-15 12:35:06', value: ['2019-10-15 12:35:06', 6]},
              {name: '2019-10-10 12:35:06', value: ['2019-10-10 12:35:06', 8]},
              {name: '2019-10-05 12:35:06', value: ['2019-10-05 12:35:06', 10]},
              {name: '2019-10-01 12:35:06', value: ['2019-10-01 12:35:06', 1]},
              {name: '2019-09-28 12:35:06', value: ['2019-09-28 12:35:06', 4]},
              {name: '2019-09-20 12:35:06', value: ['2019-09-20 12:35:06', 5]},
              {name: '2019-09-15 12:35:06', value: ['2019-09-15 12:35:06', 0]},
              {name: '2019-09-10 12:35:06', value: ['2019-09-10 12:35:06', 1]},
              {name: '2019-09-09 12:35:06', value: ['2019-09-09 12:35:06', 0]},
              {name: '2019-09-08 12:35:06', value: ['2019-09-08 12:35:06', 5]},
              {name: '2019-09-05 12:35:06', value: ['2019-09-05 12:35:06', 9]},
              {name: '2019-09-01 12:35:06', value: ['2019-09-01 12:35:06', 3]},
              {name: '2019-08-03 12:35:06', value: ['2019-08-03 12:35:06', 2]},
              {name: '2019-08-02 12:35:06', value: ['019-08-02 12:35:06', 5]},
              {name: '2019-08-01 12:35:06', value: ['019-08-02 12:35:06', 7]},
              ],
          type: 'line',
      },
      ]
  };
  
  
  myChart.setOption(option);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="//unpkg.com/echarts/dist/echarts.min.js"&gt;&lt;/script&gt;
  &lt;div id="main" style="width: 800px;height:600px;"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>actual result: The slider doesn't show the correct data preview in the box at the bottom. As you can see, everyone would assume if they look to the slider box, that there is data for the first week. </p>
  
  <p>expected result: The slider box should show a correct data preview, so that the user knows for which dates data exists.</p>
  
  <p>Thanks for your help!</p>