如何将 eCharts DataZoom 添加到图表中

Question

我已经实现了一个 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”之后。

如何像本示例中那样在 xAxis 上使用 DataZoom 扩展该图？ https://echarts.apache.org/examples/en/editor.html?c=custom-error-scatter

Answer 1

echarts 提供了一个配置键，例如

coordinateSystem

。了解更多信息：点击这里

在这里，我实现了基本示例：示例