如何为ECharts Graph图添加X轴DataZoom组件

实现步骤 #

1. 添加笛卡尔坐标系的X轴：DataZoom依赖坐标轴，因此需要在配置中新增xAxis项，设置类型为数值型，范围匹配节点的X坐标区间（示例中节点X从300到1200，可适当扩展范围让显示更美观）。同时添加隐藏的Y轴（仅用于支撑坐标系，无需显示）。
2. 配置Graph使用笛卡尔坐标系：将Graph系列的coordinateSystem设置为'cartesian2d'，让节点的X/Y坐标对应到坐标轴上。
3. 添加DataZoom组件：新增dataZoom数组，配置滑块型DataZoom，指定控制X轴，设置过滤模式为'filter'，自动筛选出可视范围内的节点和关联边。

完整配置代码 #

option = {
    title: {
        text: 'Basic Graph with DataZoom'
    },
    tooltip: {},
    animationDurationUpdate: 1500,
    animationEasingUpdate: 'quinticInOut',
    // 新增X轴配置
    xAxis: {
        type: 'value',
        min: 200,
        max: 1300,
        axisLine: {onZero: false}
    },
    // 新增Y轴（隐藏，仅用于支撑笛卡尔坐标系）
    yAxis: {
        type: 'value',
        show: false
    },
    // 新增DataZoom组件
    dataZoom: [
        {
            type: 'slider',
            xAxisIndex: 0,
            start: 0,
            end: 100,
            filterMode: 'filter'
        }
    ],
    series: [
        {
            type: 'graph',
            layout: 'none',
            symbolSize: 50,
            roam: true,
            label: {
                show: true
            },
            edgeSymbol: ['circle', 'arrow'],
            edgeSymbolSize: [4, 10],
            edgeLabel: {
                fontSize: 20
            },
            // 指定使用笛卡尔坐标系
            coordinateSystem: 'cartesian2d',
            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: [
                {
                    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
            }
        }
    ]
};

关键说明 #

• filterMode: 'filter'会自动隐藏不在DataZoom范围内的节点，以及一端节点被隐藏的边，保证视图整洁。
• Y轴设置为show: false是因为我们仅用其支撑坐标系，不需要显示Y轴刻度。
• 若需要鼠标滚轮缩放X轴，可在dataZoom中新增一个type: 'inside'的配置项。

内容的提问来源于stack exchange，提问作者itsame69