如何封装 ECharts 并导入动态数据

首先，通过封装Echarts代码为一个函数，接收数据和配置各项参数

function renderChart(container, data, options) {
  const chart = echarts.init(container);
  chart.setOption({
    ...options,
    series: [{data}],
  });
}

// 在 HTML 中为每个图表容器指定一个唯一 ID，如 chart1, chart2 等
const chart1 = document.getElementById('chart1');
const chart2 = document.getElementById('chart2');

// 动态获取数据并渲染图表
fetch('/api/chart-data')
  .then(response => response.json())
  .then(data => {
    renderChart(chart1, data.chart1, { /* chart1 的配置项 */ });
    renderChart(chart2, data.chart2, { /* chart2 的配置项 */ });
  });

'renderChart' 函数接受一个图表容器、数据和配置项参数，并将其用于创建一个新的 ECharts 实例并设置选项。'fetch' 函数用于从服务器动态获取数据，然后在 then 块中调用 renderChart 函数渲染每个图表。

通过这种方式，可以封装 ECharts 代码，并在 HTML 页面中使用它来显示多个图表，并动态更新它们的数据。