Question: Dynamically change data existing data on Zoom event

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

[dan5000]

Another way to do it is using the current chart instance xAxis[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)
  }

[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]) });