dataZoom with rangeMode: 'value' is broken

Version

4.5.0

Steps to reproduce

When dataZoom is used with rangeMode: ‘value’, zoom gets reset immediately when data is added or changed. When rangeMode is left to the default value, it works. But rangeMode: ‘value’ is required since we need the chart to stay still when zoomed in and new data is added. This worked correctly in v4.2.1.

This is a slight adaptation of the dynamic data example that shows the problem. Just execute in the try editor, zoom in with the mouse wheel. When the next data updated is added, zoom, resets immediately.

function randomData() {
    now = new Date(+now + oneDay);
    value = value + Math.random() * 21 - 10;
    return {
        name: now.toString(),
        value: [
            [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
            Math.round(value)
        ]
    }
}

var data = [];
var now =  new Date(1997, 9, 3);
var oneDay = 24 * 3600 * 1000;
var value = Math.random() * 1000;
for (var i = 0; i < 1000; i++) {
    data.push(randomData());
}

option = {
    xAxis: {
        type: 'time',
    },
    yAxis: {
        type: 'value',
    },
    series: [{
        name: 'test',
        type: 'line',
        showSymbol: false,
        hoverAnimation: false,
        data: data
    }],
    dataZoom: [{
        type: 'inside',
        rangeMode: 'value'
    }]
};

setInterval(function () {
    for (var i = 0; i < 5; i++) {
        data.shift();
        data.push(randomData());
    }
    myChart.setOption({ series: [{ data: data }] });
}, 1000);

What is expected?

current zoom should remain unchanged

What is actually happening?

zoom is reset when data is added/changed

[100pah]

@dr-itz

I think rangeMode: 'value' is not broken, but is a break change that I didn’t noticed. The previous behavior supports your usage but it is buggy in some cases. So I fixed it in the subsequent version, and clarified the definition of dataZoom.rangeMode. That makes your code work in the previous version but probably logically incorrect in the current definition.

Please try this code. I hope it can match your requirement:

var myChart = echarts.init(document.getElementById('main0'));

function randomData() {
    now = new Date(+now + oneDay);
    value = base++;
    return {
        name: now.toString(),
        value: [now, value]
    }
}

var data = [];
var base = 10;
var now = new Date(1997, 9, 3);
var oneDay = 24 * 3600 * 1000;
for (var i = 0; i < 100; i++) {
    data.push(randomData());
}

option = {
    tooltip: {
        confine: true
    },
    xAxis: {
        type: 'time',
    },
    yAxis: {
        type: 'value',
        scale: true
    },
    series: [{
        name: 'test',
        type: 'line',
        hoverAnimation: false,
        data: data
    }],
    dataZoom: [{
        type: 'inside'
        // Do not set rangeMode here
    }]
};

setInterval(function () {
    for (var i = 0; i < 5; i++) {
        data.shift();
        data.push(randomData());
    }
    myChart.setOption({
        series: [{ data: data }]
    });
}, 1000);

// Listen to dataZoom event, and set `startValue` and `endValue` to 
// fix the data window if zoomed.
myChart.on('dataZoom', function (event) {
    var dzCurrOpt = myChart.getOption().dataZoom[0];

    var dzOpt = {};
    dzCurrOpt.start > 0 ? (dzOpt.startValue = dzCurrOpt.startValue) : (dzOpt.start = 0);
    dzCurrOpt.end < 100 ? (dzOpt.endValue = dzCurrOpt.endValue) : (dzOpt.end = 100);

    myChart.setOption({
        dataZoom: dzOpt
    }, {lazyUpdate: true});
});

myChart.setOption(option);

And next, we should think of whether to add an option to support your case instead of the code above.

[echarts-bot[bot]]

This issue is closed due to not being active. Please feel free to open it again (for the author) or create a new one and reference this (for others) if you have further questions.