如何封装 ECharts 并导入动态数据-526互联

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

 1 function renderChart(container, data, options) {
 2   const chart = echarts.init(container);
 3   chart.setOption({
 4     ...options,
 5     series: [{data}],
 6   });
 7 }
 8 
 9 // 在 HTML 中为每个图表容器指定一个唯一 ID，如 chart1, chart2 等
10 const chart1 = document.getElementById('chart1');
11 const chart2 = document.getElementById('chart2');
12 
13 // 动态获取数据并渲染图表
14 fetch('/api/chart-data')
15   .then(response => response.json())
16   .then(data => {
17     renderChart(chart1, data.chart1, { /* chart1 的配置项 */ });
18     renderChart(chart2, data.chart2, { /* chart2 的配置项 */ });
19   });

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

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