В echarts при изменении маштаба графика необходимо делать запрос и отрисовывать новые данные при этом сохраняя приближение

Использую следующую связку angular+ionic+echarts. Необходимо реализовать следующее: Есть график который мониторит скорость загрузки и снимает значение каждую минуту. При отображении данных за день у нас получается 1440 точек. При отображении данных за неделю данные "разряжены" т.е. информация за каждый час 168 точек (Сделано это для оптимизации графика). Однако хотелось бы при приближении графика до определенного дня, делать запрос и отображать все точки за день (т.е. 1440 точек) и соответственно при отдалении возвращать обратно на "разряженные" данные(т.е. 168 точек). Проблемы следующие : 1)Не могу разобраться как в echarts реализован datazoom event 2)Как не перерисовывать а апдейтить график, потому что при перерисовке график немного скачет,а так же параметры приближения скидываются на дефолтные. Если у кого то есть опыт реализации хотя бы одного из двух пунктов поделитесь пожалуйста, заранее спасибо. Код option:

 this.options = {
            tooltip: {
                trigger: 'axis',
                position: {right: '10%', top: 0},
                showContent: true,
                axisPointer: {
                    type: 'line',
                    axis: 'x',
                    position: (pt) => {
                        return [pt[0], '10%'];
                    },
                }
            },
            toolbox: {
                orient: 'vertical',
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none',
                    },
                    restore: {
                        title: 'Сбросить',
                    },
                    saveAsImage: {
                        title: 'Сохранить',
                    }
                },
                right: '1.1%',
                itemSize: 22,
                itemGap: 15
            },
            xAxis: [{
                type: 'time',
                boundaryGap: false,
                axisLabel: {
                    formatter: {
                        year: '{yyyy}',
                        month: '{dd}.{MM}.{yyyy}',
                        day: '{dd}.{MM}.{yy}',
                        hour: '{HH}:{mm}',
                        minute: '{HH}:{mm}',
                    },
                    fontFamily: 'rostelecom-basic',
                    fontSize: 12,
                },
            }],
            yAxis: {
                type: 'value',
                boundaryGap: [0, '100%'],
            },
            dataZoom: [this.zoom, {
                start: 0,
                end: 100,
                backgroundColor: 'rgba(235,235,235,0)',
                fillerColor: 'rgba(123,147,155,0.2)',
                selectedDataBackground: {
                    areaStyle: {
                        color: 'rgb(229,233,235)'
                    },
                    lineStyle: {
                        color: 'rgb(210,218,221)'
                    },
                }
                }
            }],
            series: {
                type: 'line',
                smooth: false,
                symbol: 'none',
                sampling: 'lttb',
                emphasis: {focus: 'series'},
                data: []
            };,
            animationEasing: 'elasticOut',
        };
    }