ECharts 异步加载数据教程
ECharts 支持非常简单的异步数据加载机制：初始化图表后，使用 fetch、axios 或其他方式获取数据，然后调用 myChart.setOption() 更新数据即可。ECharts 会自动计算新旧数据的差异，并添加合适的动画过渡。
1. 基本异步加载（现代方式，使用 fetch + Promise）
推荐使用原生 fetch（无需 jQuery）。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>ECharts 异步加载数据示例</title>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 800px; height: 600px;"></div>
<script>
// 初始化图表（先设置空数据，避免空白等待）
const myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
title: { text: '异步加载柱状图' },
tooltip: {},
legend: { data: ['销量'] },
xAxis: { data: [] },
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: []
}]
});
// 显示 loading 动画（推荐，改善用户体验）
myChart.showLoading();
// 异步获取数据（这里用公开 JSON 示例）
fetch('https://echarts.apache.org/examples/data/asset/data/life-expectancy-table.json')
.then(response => response.json())
.then(data => {
// 假设取前6条数据作为示例
const categories = data.slice(0, 6).map(item => item[1]); // 国家
const values = data.slice(0, 6).map(item => item[4]); // 预期寿命
myChart.hideLoading(); // 隐藏 loading
myChart.setOption({
xAxis: { data: categories },
series: [{ data: values }]
});
})
.catch(err => {
myChart.hideLoading();
console.error('数据加载失败:', err);
});
</script>
</body>
</html>2. 带 loading 动画的完整流程
- 先
setOption空数据 + 样式。 - 调用
myChart.showLoading()显示默认加载动画（可自定义样式）。 - 数据到来后
hideLoading()+setOption更新。
loading 配置示例（自定义）：
myChart.showLoading({
text: '数据加载中...',
color: '#5470c6',
textColor: '#000',
maskColor: 'rgba(255, 255, 255, 0.8)',
zlevel: 0
});3. 动态实时更新数据（例如每秒刷新）
setInterval(() => {
fetch('/api/new-data')
.then(res => res.json())
.then(newData => {
myChart.setOption({
series: [{ data: newData.values }]
});
});
}, 2000); // 每2秒更新一次ECharts 会自动动画显示数据变化。
注意事项
- 系列匹配：更新时建议用
name属性匹配系列，避免顺序错乱。 - 大数据：ECharts 支持百万级数据，异步加载时可结合
dataset或按需加载。 - 框架中：在 Vue/React 中，使用
ref获取实例，在mounted/useEffect中异步加载。
官方文档（最新版）：https://echarts.apache.org/handbook/zh/how-to/data/dynamic-data/
如果你有具体后端接口、图表类型（如折线实时数据）或框架需求，告诉我，我可以给出更精确的代码！
