解决ECharts调用setOption后出现异常动画的问题

问题描述 #

使用ECharts生成关系图时，通过监听graphRoam事件根据缩放级别切换节点标签的显隐，代码逻辑如下：

myChart.on("graphRoam", () => {
    const customOptions = myChart.getOption();
    if (
      customOptions.series[0].zoom >= showLabelsAtZoomLevel &&
      !customOptions.series[0].label.show
    ) {
      customOptions.series[0].label.show = true;
      myChart.setOption(customOptions, {
        notMerge: {
          silent: true,
        },
        lazyUpdate: true,
      });
    } else if (
      customOptions.series[0].zoom < showLabelsAtZoomLevel &&
      customOptions.series[0].label.show
    ) {
      customOptions.series[0].label.show = false;
      myChart.setOption(customOptions, {
        notMerge: {
          silent: true,
        },
      });
    }
})

当缩放级别跨越阈值showLabelsAtZoomLevel时，图表出现异常的画布进入动画。尝试全局关闭animation: false无效，关闭series[0].force.layoutAnimation则会失去交互性，需要在保留交互的前提下消除异常动画。

核心问题分析 #

1. setOption参数错误：第二个参数中的notMerge应为布尔值，而非对象。原代码中notMerge: {silent: true}会被解析为notMerge: true，导致每次更新都替换整个配置，触发不必要的布局重绘和动画。
2. 全量更新配置：通过getOption()获取完整配置后修改再回传，会触发布局相关的动画（即使全局关闭animation，力导向布局的layoutAnimation仍可能生效）。

解决方案 #

1. 修正setOption参数，采用增量更新 #

只传递需要修改的标签配置，避免全量替换触发布局动画，同时正确设置更新选项：

myChart.on("graphRoam", () => {
    // 直接从模型获取当前缩放级别和标签状态，避免getOption的全量配置
    const seriesModel = myChart.getModel().getSeries()[0];
    const currentZoom = seriesModel.zoom;
    const isLabelShown = seriesModel.get('label.show');

    if (currentZoom >= showLabelsAtZoomLevel && !isLabelShown) {
        myChart.setOption({
            series: [{
                label: { show: true }
            }]
        }, {
            notMerge: false, // 增量合并配置，而非全量替换
            silent: true,
            lazyUpdate: true,
            animation: false // 强制关闭本次更新的动画
        });
    } else if (currentZoom < showLabelsAtZoomLevel && isLabelShown) {
        myChart.setOption({
            series: [{
                label: { show: false }
            }]
        }, {
            notMerge: false,
            silent: true,
            animation: false
        });
    }
});

2. 精准控制布局动画 #

保留series[0].force.layoutAnimation: true以维持交互性，由于graphRoam的缩放属于视图变换，不会改变节点布局，增量更新标签不会触发layoutAnimation，因此无需修改该参数。

3. 额外优化：防抖处理（可选） #

若缩放时触发事件过于频繁，可添加防抖函数减少不必要的更新：

let roamTimeout;
myChart.on("graphRoam", () => {
    clearTimeout(roamTimeout);
    roamTimeout = setTimeout(() => {
        // 上述更新逻辑
        const seriesModel = myChart.getModel().getSeries()[0];
        const currentZoom = seriesModel.zoom;
        const isLabelShown = seriesModel.get('label.show');

        if (currentZoom >= showLabelsAtZoomLevel && !isLabelShown) {
            myChart.setOption({
                series: [{ label: { show: true } }]
            }, { notMerge: false, silent: true, animation: false });
        } else if (currentZoom < showLabelsAtZoomLevel && isLabelShown) {
            myChart.setOption({
                series: [{ label: { show: false } }]
            }, { notMerge: false, silent: true, animation: false });
        }
    }, 50); // 调整防抖间隔适配需求
});

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