Как добавить eCharts DataZoom на график

Я реализовал график eCharts. Посмотрите эту скрипку:

https://jsfiddle.net/qgf4c2jy/3/

    option = {
        title: {
            text: 'Basic Graph'
        },
        tooltip: {},
        animationDurationUpdate: 1500,
        animationEasingUpdate: 'quinticInOut',
        series: [
            {
                type: 'graph',
                layout: 'none',
                symbolSize: 50,
                roam: true,
                label: {
                    show: true
                },
                edgeSymbol: ['circle', 'arrow'],
                edgeSymbolSize: [4, 10],
                edgeLabel: {
                    fontSize: 20
                },
                data: [
                    {
                        name: 'A',
                        x: 300,
                        y: 300
                    },
                    {
                        name: 'B',
                        x: 800,
                        y: 300
                    },
                    {
                        name: 'C',
                        x: 550,
                        y: 100
                    },
                    {
                        name: 'D',
                        x: 550,
                        y: 500
                    },
                    {
                        name: 'E',
                        x: 1000,
                        y: 300
                    },
                    {
                        name: 'F',
                        x: 1200,
                        y: 300
                    }
                ],
                // links: [],
                links: [
                    {
                        source: 'A',
                        target: 'C'
                    },
                    {
                        source: 'B',
                        target: 'C'
                    },
                    {
                        source: 'B',
                        target: 'D'
                    },
                    {
                        source: 'A',
                        target: 'D'
                    },
                    {
                        source: 'B',
                        target: 'E'
                    },
                    {
                        source: 'E',
                        target: 'F'
                    }
                ],
                lineStyle: {
                    opacity: 0.9,
                    width: 2,
                    curveness: 0
                }
            }
        ]
    };

Итоговый график в основном выглядит так:

Положение x каждого узла соответствует оси времени. Таким образом, в этом примере графика «E» находится перед «F» и после «B».

Как я могу расширить этот график с помощью DataZoom на оси x, как в этом примере? https://echarts.apache.org/examples/en/editor.html?c=custom-error-scatter