echarts中多个图表异步加载

在使用 ECharts 时，我们可以通过异步加载的方式动态地向页面中添加图表，以提高页面加载速度和用户体验。

下面是一个简单的示例，展示如何使用异步加载多个 ECharts 图表：

// 异步加载 ECharts 图表
function loadChart(chartId, chartOption) {
  var chart = echarts.init(document.getElementById(chartId));
  chart.showLoading();

  // 使用 ajax 加载数据
  $.get('data.json', function (data) {
    chart.hideLoading();

    // 设置 ECharts 图表选项
    chart.setOption(chartOption);
  });
}

// 加载多个 ECharts 图表
loadChart('chart1', chartOption1);
loadChart('chart2', chartOption2);
loadChart('chart3', chartOption3);

在上面的代码中，我们定义了一个 `loadChart` 函数，用于异步加载 ECharts 图表。该函数接受两个参数：`chartId` 表示图表的 DOM 元素 ID，`chartOption` 表示图表的选项。

在函数内部，我们首先创建一个 ECharts 实例，并显示加载动画。然后使用 jQuery 的 `get` 函数异步加载数据，并在加载完成后隐藏加载动画，并设置图表选项。

最后，我们调用 `loadChart` 函数，传入不同的图表 ID 和选项，即可异步加载多个 ECharts 图表。

需要注意的是，在使用异步加载时，需要确保数据的正确性和完整性，并且需要处理加载数据失败的情况。