ECharts 可以通過使用 Ajax 或 WebSocket 等技術動態加載數據。以下是一種常見的動態加載數據的方法：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts 動態加載數據示例</title>
<script src="echarts.min.js"></script>
<script src="echarts-theme.js"></script>
<script src="echarts-renderer.js"></script>
</head>
<body>
<div id="chart" style="width: 600px; height: 400px;"></div>
<button onclick="loadData()">加載數據</button>
<script>
// 初始化 ECharts 實例
var chart = echarts.init(document.getElementById('chart'));
// 定義圖表的配置項和數據
var option = {
// 圖表的配置項
// ...
};
// 加載數據的函數
function loadData() {
// 使用 Ajax 請求獲取數據
// 這里假設數據請求的 URL 為 data.json
var xhr = new XMLHttpRequest();
xhr.open('GET', 'data.json', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var data = JSON.parse(xhr.responseText);
// 更新圖表的數據
option.series[0].data = data;
// 使用剛指定的配置項和數據顯示圖表
chart.setOption(option);
}
};
xhr.send();
}
</script>
</body>
</html>
data.json，該接口返回一個 JSON 格式的數據。[10, 20, 30, 40, 50]
loadData() 函數，該函數使用 Ajax 請求數據接口，并更新圖表的數據，然后使用 setOption() 方法更新圖表的配置項和數據，最后顯示圖表。以上示例中的代碼僅提供了一個簡單的動態加載數據的方式，實際應用中可能需要根據具體需求進行修改。
