NiceGUI项目中ECharts图表双重渲染问题分析与解决方案

问题背景

在NiceGUI项目中使用ECharts图表组件时，开发者发现当图表包含大量数据点（如50,000个散点）时，图表会被渲染两次，这会导致性能问题。经过分析，这个问题源于ResizeObserver的实现方式。

技术分析

原始实现的问题

NiceGUI最初通过监听ECharts的"finished"事件来创建ResizeObserver，目的是为了解决动画持续时间的问题。但这种实现方式会导致：

1. 图表首次渲染完成后触发"finished"事件
2. 创建ResizeObserver并立即执行一次resize
3. resize操作触发图表重新渲染

这种机制对于包含大量数据的图表会造成明显的性能损耗，因为50,000个点的渲染本身就是计算密集型操作。

根本原因

ECharts的渲染流程如下：

1. 初始化图表并设置选项
2. 完成首次渲染，触发"finished"事件
3. ResizeObserver触发resize操作
4. 图表响应resize事件，重新渲染

对于大数据量图表，这种双重渲染会显著增加页面加载时间。

解决方案

优化思路

借鉴其他开源项目（如vue-echarts）的经验，采用以下优化策略：

1. 直接附加ResizeObserver，而不是等待"finished"事件
2. 记录图表容器的初始尺寸
3. 在首次resize时检查尺寸是否变化
4. 如果尺寸未变，则跳过resize操作

实现代码

const el = document.getElementById("chart");
const chart = echarts.init(el);
const iniHeight = el.offsetHeight;
const iniWidth = el.offsetWidth;
let initialResizeTriggered = false;

function resizeChart() {
    if (!initialResizeTriggered) {
        initialResizeTriggered = true;
        if (el.offsetWidth === iniHeight && el.offsetHeight === iniWidth) {
            return;
        }
    } else {
        chart.resize();
    }
};

new ResizeObserver(resizeChart).observe(el);

方案优势

1. 避免不必要的渲染：通过检查初始尺寸，避免了首次渲染后的无效resize操作
2. 保持功能完整性：仍然能够响应后续的真实尺寸变化
3. 通用性强：适用于各种类型的ECharts图表，包括动画图表和大数据量图表

实际效果

大数据量散点图

优化后，包含20,000个散点的图表：

• 首次加载只渲染一次
• 窗口或容器尺寸变化时正常响应

动画折线图

对于使用动画效果的折线图：

• 动画效果不会被中断
• 尺寸变化时仍能正确响应

技术要点

1. ResizeObserver API：现代浏览器提供的观察元素尺寸变化的接口
2. ECharts渲染机制：理解图表生命周期和事件触发时机
3. 性能优化：通过减少不必要的操作提升大数据量场景下的用户体验

总结

通过优化ResizeObserver的附加方式，NiceGUI项目成功解决了ECharts图表双重渲染的问题。这一改进不仅提升了大数据量图表的性能，也保持了动画图表的流畅性，为开发者提供了更好的使用体验。这种基于尺寸检查的优化思路也可以应用于其他类似的图表渲染场景。