echarts：dataZoom slider 不显示正确的数据预览

Question

我正在尝试使用 echarts 创建一个可缩放的折线图。 图表最初应该只显示 5 天。 我使用 dataZoom 类型“内部”和“滑块”。 但是 slider 盒子没有正确显示。

我玩了一下代码，但我无法解决这个问题。

这是我的代码：

 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);

 <script src="//unpkg.com/echarts/dist/echarts.min.js"></script> <div id="main" style="width: 800px;height:600px;"></div>

实际结果：slider 没有在底部的框中显示正确的数据预览。 如您所见，如果他们查看 slider 框，每个人都会假设有第一周的数据。

预期结果：slider 框应显示正确的数据预览，以便用户知道存在哪些日期数据。

谢谢你的帮助！

Answer 1

是的，Echart 没有这样的功能，我也有同样的场景。 您需要获取inside zoom level并根据您的时间计算缩放级别并更新inside zoom级别。

例子：

// This initial zoom level
const dataZoom = [
  {
    type: 'inside',
    start: 0,
    end: 100
  },
  {
    start: 0,
    end: 10,
    handleSize: '80%'
  }
]

当您的时间发生变化时，您需要获取 dataZoom 并找出start和end缩放级别并将其设置为 dataZoom。

const end = 100 // always 100%
const totalTime = new Date(lastIndexOfYourDataTime).getTime() - new Date(firstIndexOfYourDataTime).getTime() // Calculate total Data time band.
const start = 100 - ((5 Days time here(in ms) / totalTime) * 100) // you will get the start zoom level.
dataZoom[0].start = start
dataZoom[0].end = end