echarts 屏幕变化重新获取数据重新拼接图表

ECharts是一个强大的JavaScript数据可视化库，当屏幕大小发生变化，如用户从桌面切换到移动端设备，或者浏览器窗口调整尺寸，你可能需要对图表进行响应式的重新渲染。这通常涉及到以下几个步骤：

1. **监听视口变化**：使用`echarts.getInstanceByDom()`获取当前页面上的ECharts实例，然后添加一个窗口resize事件监听器，如`window.addEventListener('resize', function() { ... })`。

2. **判断是否需要更新**：在事件处理函数中，检查当前视口的宽度或者其他关键尺寸变化，如果达到重新加载数据和刷新图表的阈值，那就继续下一步。

3. **获取新数据**：根据新的屏幕条件，可能需要向服务器请求新的数据，或者从本地存储中读取。

4. **清除旧图表**：调用ECharts的`dispose()`方法清理旧的图表元素，释放内存资源。

5. **重新初始化图表**：创建一个新的ECharts实例，并传入最新的数据配置项，以及适应新视口的图表选项，如宽度、高度等。

6. **绘制新图表**：使用`setOption()`方法设置新的配置并绘制图表。

function handleResize() {
    const chart = echarts.getInstanceByDom(document.getElementById('your-chart-id'));
    if (shouldReloadData(chart)) {
        const newData = fetchData(); // 获取新的数据

        chart.dispose();
        const newChart = echarts.init(document.getElementById('your-chart-id'), 'your-chart-type');
        newChart.setOption({
            data: newData,
            width: window.innerWidth, // 根据新视口设置宽度
            height: window.innerHeight // 设置高度
        });
    }
}

// 在页面加载完成后启动事件监听
handleResize();

// 检查条件是否满足，这里只是一个示例，实际应根据需求编写判断逻辑
function shouldReloadData(chart) {
    return chart && chart.getWidth() !== window.innerWidth;
}