Question: Dynamically change data existing data on Zoom event

[shredder11]

One-line summary [问题简述]

How to Dynamically change existing data (data contained in the shown window) on Zoom event?

Version & Environment [版本及环境]

• ECharts version [ECharts 版本]: 3.4
• Browser version [浏览器类型和版本]: chrome 54
• OS Version [操作系统类型和版本]: windows 10

Expected behaviour [期望结果]

asking here for lack of a better place: I'd like to know whether there was a get the values referring to the Zoom Area and apply a function on them. in my case it would be very nice to have if I could access the data. in the API there does not seem to be an explicit way so I was hoping for some DOM coordinates (like series.data.values[0])

specifically, I was looking at this: https://github.com/ecomfe/echarts/blob/master/test/connect-manually.html

ECharts option [ECharts配置项]

option = {
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        data:['最高','最低']
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataZoom : {show: true},
            dataView : {show: true},
            magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    dataZoom : {
        show : true,
        realtime : true,
        start : 20,
        end : 80
    },
    xAxis : [
        {
            type : 'category',
            boundaryGap : false,
            data : [
                "2013/1/24", "2013/1/25", "2013/1/28", "2013/1/29", "2013/1/30",
                "2013/1/31", "2013/2/1", "2013/2/4", "2013/2/5", "2013/2/6", 
                "2013/2/7", "2013/2/8", "2013/2/18", "2013/2/19", "2013/2/20", 
                "2013/2/21", "2013/2/22", "2013/2/25", "2013/2/26", "2013/2/27", 
                "2013/2/28", "2013/3/1", "2013/3/4", "2013/3/5", "2013/3/6", 
                "2013/3/7", "2013/3/8", "2013/3/11", "2013/3/12", "2013/3/13", 
                "2013/3/14", "2013/3/15", "2013/3/18", "2013/3/19", "2013/3/20", 
                "2013/3/21", "2013/3/22", "2013/3/25", "2013/3/26", "2013/3/27", 
                "2013/3/28", "2013/3/29", "2013/4/1", "2013/4/2", "2013/4/3", 
                "2013/4/8", "2013/4/9", "2013/4/10", "2013/4/11", "2013/4/12", 
                "2013/4/15", "2013/4/16", "2013/4/17", "2013/4/18", "2013/4/19", 
                "2013/4/22", "2013/4/23", "2013/4/24", "2013/4/25", "2013/4/26", 
                "2013/5/2", "2013/5/3", "2013/5/6", "2013/5/7", "2013/5/8", 
                "2013/5/9", "2013/5/10", "2013/5/13", "2013/5/14", "2013/5/15", 
                "2013/5/16", "2013/5/17", "2013/5/20", "2013/5/21", "2013/5/22", 
                "2013/5/23", "2013/5/24", "2013/5/27", "2013/5/28", "2013/5/29", 
                "2013/5/30", "2013/5/31", "2013/6/3", "2013/6/4", "2013/6/5", 
                "2013/6/6", "2013/6/7", "2013/6/13"
            ]
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:'最高',
            type:'line',
            data:[
                13560434, 8026738.5, 11691637, 12491697, 12485603, 
                11620504, 12555496, 15253370, 12709611, 10458354, 
                10933507, 9896523, 10365702, 10633095, 9722230, 
                12662783, 8757982, 7764234, 10591719, 8826293, 
                11591827, 11153111, 14304651, 11672120, 12536480, 
                12608589, 8843860, 7391994.5, 10063709, 7768895.5, 
                6921859, 10157810, 8148617.5, 7551207, 11397426, 
                10478607, 8595132, 8541862, 9181132, 8570842, 
                10759351, 7335819, 6699753.5, 7759666.5, 6880135.5, 
                7366616.5, 7313504, 7109021.5, 6213270, 5619688, 
                5816217.5, 6695584.5, 5998655.5, 6188812.5, 9538301,
                8224500, 8221751.5, 7897721, 8448324, 6525151, 
                5987761, 7831570, 8162560.5, 7904092, 8139084.5, 
                9116529, 8128014, 7919148, 7566047, 6665826.5, 
                10225527, 11124881, 12884353, 11302521, 11529046, 
                11105205, 9202153, 9992016, 12035250, 11431155, 
                10354677, 10070399, 9164861, 9237718, 7114268, 
                7526158.5, 8105835, 7971452.5
            ]
        }
    ]
};

Other comments [其他信息]

FYI: Echarts is, by all accounts, exceptional work

[100pah]

I am afraid that I am not quite sure about what you expect exactly. I guess that you what to do something about data in according to the zoom window, isn't it? In the sample (https://github.com/ecomfe/echarts/blob/master/test/connect-manually.html) you mentioned you can see that in the zoom event start and end can be obtained, which is the values on the axes that dataZoom controlled, and can be used to filter the original data and get the items in the zoom window. For example,

var originalData = [
    [12, 323, 443],
    [44, 33, 77],
    [6, 78, 13],
    [12, 13, 94]
];

chart.setOption({
    ...,
    dataZoom: {
        xAxisIndex: 0,
        ...
    },
    series: [{
        ...,
        data: originalData
    }]
});

chart.on('dataZoom', function (params) {
    var start = params.batch[0].start;
    var end = parasm.batch[0].end;

    var dataInWindow = originalData.filter(function (item) {
        return item[0] >= start || item[0] <= end;
    });

    // do something others ...
});

[shredder11]

it works but when I apply a function after that (dividing all the values in dataInWindow by the initial value => thus rescaling the data on window) it takes forever to compute which means I can't use as a production tool for obvious reasons. do you happen to know whether some shortcuts are available?

thank you for your quick answer

[mobimation]

From what I see dataZoom event start and end params is percentage values of the total range of a data array. So a calculation can be made of at what indexes in a data array the zoom window is set. Something like

var start_index=Math.round(data.values.length*(param.start/100))-1;
var   end_index=Math.round(data.values.length*(param.end/100))-1;

[dan5000]

Another way to do it is using the current chart instancexAxis[0].rangeStart/rangeEnd Then filter the original data array against the xAxis times. This only works for timeseries, just thought someone might find it useful. Here's an example:

const DATA = [[1319846400000, 0.0911189678976507], [1319932800000, 0.088428855674535],…]

onDataZoom(zoom, chart) {
    const option = chart.getOption()

    const start = option.xAxis[0].rangeStart
    const end = option.xAxis[0].rangeEnd
    const cropped = DATA.filter(r => r[0] > start && r[0] < end)
    const transformed = your_transform_function(cropped)
    option.series[10].data = transformed
    chart.setOption(option)
  }

[daniilc-magnumwm]

@dan5000 I tired to replicate your example, but my when I assign new series, my dataZoom line disables. Can you have a look at this issue please

[aheritier]

Sadly it seems that the workaround proposed by @dan5000 doesn't work anymore with echarts 5. xAxis[0].rangeStart/rangeEnd are undefined.

[Thisisnarayan]

myChart.on('datazoom', (evt) => { const option = myChart.getOption() console.log(option.xAxis[0].data[option.dataZoom[0].startValue],option.xAxis[0].data[option.dataZoom[0].endValue]) });

[joankuah]

Im using vue echarts and this is how im changing the startValue/endValue instead:

this.option.dataZoom[indexOfTheAxisYouWantToSetTheRange].startValue = number/date/string accepted this.option.dataZoom[indexOfTheAxisYouWantToSetTheRange].endValue= number/date/string accepted

[Zamlos]

Is there any way to apply this in React? Any experience?