AJAX 是一種用于創(chuàng)建交互式網(wǎng)頁應用程序的技術(shù)，它可以在不刷新整個頁面的情況下，將數(shù)據(jù)從服務器異步加載到網(wǎng)頁中。同時，ECharts 是一款功能強大的圖表庫，它具有豐富的圖表樣式和靈活的配置項，使得數(shù)據(jù)可視化變得更加簡單。在使用 AJAX 和 ECharts 的結(jié)合之后，我們可以實現(xiàn)動態(tài)刷新數(shù)據(jù)，并實時展示到圖表中，從而提升用戶體驗和數(shù)據(jù)展示效果。

假設我們正在開發(fā)一個實時展示氣溫變化的應用程序。我們希望通過網(wǎng)頁上的一個圖表，展示某個城市的實時氣溫數(shù)據(jù)。為了實現(xiàn)這個功能，我們可以使用 AJAX 來獲取服務器上的氣溫數(shù)據(jù)，并使用 ECharts 來動態(tài)刷新圖表展示。

<script type="text/javascript">
// 使用 AJAX 請求服務器上的氣溫數(shù)據(jù)
function getTemperatureData() {
$.ajax({
url: "api/temperature",  // 服務器接口地址
type: "GET",
dataType: "json",
success: function(data) {
// 數(shù)據(jù)獲取成功后，更新圖表展示
updateChart(data);
},
error: function() {
console.log("Failed to get temperature data.");
}
});
}
// 使用 ECharts 更新圖表展示
function updateChart(data) {
var chart = echarts.init(document.getElementById('chart'));
var option = {
// 配置圖表樣式和數(shù)據(jù)
xAxis: {
type: 'category',
data: data.time
},
yAxis: {
type: 'value'
},
series: [{
data: data.temperature,
type: 'line'
}]
};
chart.setOption(option);
}
// 定時刷新圖表數(shù)據(jù)
setInterval(function() {
getTemperatureData();
}, 5000);
</script>

在上述代碼中，我們定義了一個函數(shù)getTemperatureData，用于發(fā)送 AJAX 請求并獲取服務器上的氣溫數(shù)據(jù)。當 AJAX 請求成功返回數(shù)據(jù)后，我們再調(diào)用函數(shù)updateChart來更新圖表展示。

函數(shù)updateChart中，我們首先通過echarts.init方法初始化一個圖表，將其綁定到 HTML 頁面上的一個 DOM 元素上。然后，我們配置了圖表的樣式和數(shù)據(jù)，并調(diào)用setOption方法將配置應用到圖表中。

最后，我們使用setInterval方法來定時刷新圖表數(shù)據(jù)。在每隔 5 秒鐘的間隔內(nèi)，我們會調(diào)用一次getTemperatureData方法，從服務器獲取最新的氣溫數(shù)據(jù)，并將其更新到圖表中。

通過以上代碼的實現(xiàn)，我們可以在網(wǎng)頁上實時展示氣溫數(shù)據(jù)的變化情況。每隔 5 秒鐘，圖表上的數(shù)據(jù)會自動刷新一次，用戶可以通過圖表直觀地了解到氣溫的變化趨勢。