要實現 ECharts 的異步數據獲取,可以按照以下步驟進行操作:
<script src="https://cdn.jsdelivr.net/npm/echarts@5.2.0/dist/echarts.min.js"></script>
<div id="chartContainer" style="width: 600px; height: 400px;"></div>
function getData(callback) {
// 發起異步請求獲取數據
// 例如使用 Fetch 方法:
fetch('data.json')
.then(response => response.json())
.then(data => {
// 調用回調函數將獲取的數據傳遞給圖表渲染函數
callback(data);
});
}
// 獲取容器元素
var chartContainer = document.getElementById('chartContainer');
// 創建圖表實例
var chart = echarts.init(chartContainer);
// 創建圖表配置對象
var option = {
// 配置項...
};
// 渲染圖表
function renderChart(data) {
// 在配置項中使用獲取到的數據
option.series[0].data = data;
// 使用剛指定的配置項和數據顯示圖表
chart.setOption(option);
}
// 調用獲取數據的函數,并傳遞渲染圖表的回調函數
getData(renderChart);
通過以上步驟,就可以實現 ECharts 的異步數據獲取和圖表渲染。請根據實際情況修改獲取數據的方式和數據處理邏輯。