echarts: dataZoom滑块没有显示正确的数据预览。

Posted 2023-01-09

我试图用echarts创建一个可缩放的线形图。该图表应该在最初只显示5天。我使用dataZoom类型'inside'和'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>

实际结果： 滑块没有在底部的框中显示正确的数据预览。如你所见，如果大家看向滑块框，就会认为有第一周的数据。

预期的结果。滑块框应该显示正确的数据预览，这样用户就会知道哪些日期的数据存在。

谢谢你的帮助

答案

是的，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 和`结束缩放级别，并设置为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