ECharts 异步加载数据学习笔记

什么是异步加载数据？

在 ECharts 中，异步加载数据指的是在图表渲染过程中，通过异步请求获取数据并动态更新图表展示。这种方式可以优化页面渲染速度和用户体验。

如何实现异步加载数据？

ECharts 提供了 setOption 和 dispatchAction 两种方法实现动态更新图表数据。其中，setOption 方法可以用于初始化图表和更新整个图表，而 dispatchAction 方法可以用于更新部分数据或响应用户操作。

使用 setOption 方法

使用 setOption 方法实现异步加载数据的步骤如下：

1. 定义一个函数，用于获取异步请求返回的数据；
2. 在回调函数中，将返回的数据格式化为 ECharts 能够识别的数据格式；
3. 调用 setOption 方法更新图表数据。

示例代码如下：

javascriptCopy Code
function getData() {
  // 发送异步请求获取数据
  return axios.get('https://example.com/api/echarts-data');
}

getData().then(res => {
  const data = res.data;
  // 格式化数据
  const option = {
    xAxis: {
      type: 'category',
      data: data.xData
    },
    series: [{
      data: data.yData,
      type: 'bar'
    }]
  };
  // 更新图表数据
  myChart.setOption(option);
});

使用 dispatchAction 方法

使用 dispatchAction 方法实现异步加载数据的步骤如下：

1. 定义一个函数，用于获取异步请求返回的数据；
2. 在回调函数中，将返回的数据格式化为 ECharts 能够识别的数据格式；
3. 调用 dispatchAction 方法更新图表数据。

示例代码如下：

javascriptCopy Code
function getData() {
  // 发送异步请求获取数据
  return axios.get('https://example.com/api/echarts-data');
}

getData().then(res => {
  const data = res.data;
  // 格式化数据
  const option = {
    series: [{
      data: data.yData,
    }]
  };
  // 更新图表数据
  myChart.dispatchAction({
    type: 'updateSeries',
    option: option
  });
});

示例

以下是一个使用 setOption 方法实现异步加载数据的示例：

htmlCopy Code
<div id="chart" style="width: 600px; height: 400px;"></div>
<script src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.min.js"></script>
<script>
  // 初始化图表
  const myChart = echarts.init(document.getElementById('chart'));
  const option = {
    xAxis: {
      type: 'category',
      data: []
    },
    series: [{
      data: [],
      type: 'bar'
    }]
  };
  myChart.setOption(option);

  // 获取异步数据并更新图表
  function getData() {
    // 发送异步请求获取数据
    return axios.get('https://example.com/api/echarts-data');
  }

  getData().then(res => {
    const data = res.data;
    // 格式化数据
    option.xAxis.data = data.xData;
    option.series[0].data = data.yData;
    // 更新图表数据
    myChart.setOption(option);
  });
</script>

当然，如果你喜欢使用 dispatchAction 方法，也可以将上面的示例中的 myChart.setOption(option) 改为以下代码：

javascriptCopy Code
myChart.dispatchAction({
  type: 'setOption',
  option: option
});

这样，就完成了 ECharts 异步加载数据的学习笔记。