如何通过循环传入的参数声明变量？解决ECharts实例初始化报错

原本手动初始化多个ECharts实例并绑定窗口resize事件的代码如下：

let test1 = echarts.init(document.getElementById('test1'));
let test2 = echarts.init(document.getElementById('test2'));
let test3 = echarts.init(document.getElementById('test3'));
window.onresize = () => {
  test1.resize({
    height: 400,
    width: document.documentElement.clientWidth - 60,
  });
  test2.resize({
    height: 400,
    width: document.documentElement.clientWidth - 60,
  });
  test3.resize({
    height: 400,
    width: document.documentElement.clientWidth - 60,
  });
};

尝试用遍历数组实现时，在forEach循环中对参数value赋值出现「无法重新声明变量」的错误，错误代码如下：

const report = [
    'test1',
    'test2',
    'test3',
];

report.forEach((value) => {
    value = echarts.init(document.getElementById(value));
    window.onresize = () => {
        value.resize({
        height: 400,
        width: document.documentElement.clientWidth - 60,
        });
    };
});

需求是通过循环正确声明变量，解决报错问题。

核心问题分析 #

1. 直接修改forEach的参数value无意义，它是循环迭代的临时变量；且每次循环会覆盖window.onresize，最终只有最后一个实例的resize逻辑生效。
2. 需要统一存储所有ECharts实例，绑定一次resize事件处理所有实例的尺寸调整。

正确实现方式 #

用数组存储所有实例，统一绑定resize事件：

const reportIds = ['test1', 'test2', 'test3'];
// 存储所有ECharts实例
const chartInstances = [];

// 初始化所有实例
reportIds.forEach(id => {
    const chart = echarts.init(document.getElementById(id));
    chartInstances.push(chart);
});

// 绑定一次resize事件，遍历所有实例执行resize
window.onresize = () => {
    const resizeOptions = {
        height: 400,
        width: document.documentElement.clientWidth - 60
    };
    chartInstances.forEach(chart => {
        chart.resize(resizeOptions);
    });
};

额外优化（可选） #

如果需要保留类似原代码中独立变量的访问方式，可用对象存储实例：

const reportIds = ['test1', 'test2', 'test3'];
const charts = {};

reportIds.forEach(id => {
    charts[id] = echarts.init(document.getElementById(id));
});

window.onresize = () => {
    const resizeOptions = {
        height: 400,
        width: document.documentElement.clientWidth - 60
    };
    // 遍历对象中的所有实例执行resize
    Object.values(charts).forEach(chart => {
        chart.resize(resizeOptions);
    });
};
// 之后可通过charts.test1、charts.test2单独访问对应实例

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