AJAX 是一種通過在后臺與服務器進行少量數據交換的技術，它可以在不刷新整個頁面的情況下更新部分網頁內容。echarts 是一款優秀的數據可視化庫，可用于創建各種精美的圖表。本文將介紹如何使用 AJAX 提交數據并利用 echarts 將數據以圖表形式展示出來。

假設我們有一個簡單的表單，其中包含兩個輸入框：一個用于輸入年份，另一個用于輸入銷售額。當用戶填寫完畢并點擊提交按鈕時，我們希望將這些數據提交到服務器，并利用 echarts 將數據以柱狀圖形式展示在頁面上。

首先，我們需要編寫 HTML 代碼來創建這個表單：

<form id="salesForm">
<input type="text" id="year" placeholder="年份">
<input type="text" id="amount" placeholder="銷售額">
<button type="button" onclick="submitData()">提交</button>
</form>

接下來，我們需要編寫 JavaScript 代碼來處理表單的提交事件，將數據發送給服務器并利用 echarts 繪制圖表。

function submitData() {
var year = document.getElementById("year").value;
var amount = document.getElementById("amount").value;
// 使用 AJAX 提交數據
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var salesData = JSON.parse(this.responseText);
// 使用 echarts 繪制圖表
var myChart = echarts.init(document.getElementById("chart-container"));
var option = {
// 設置圖表選項
// ...
series: [{
type: 'bar',
data: salesData
}]
};
myChart.setOption(option);
}
};
xhttp.open("POST", "submit.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("year=" + year + "&amount=" + amount);
}

在上面的代碼中，我們使用 XMLHttpRequest 對象創建了一個 AJAX 請求，并將數據以 POST 方法發送到 submit.php 文件。在服務器端，我們可以使用 PHP 或其他語言來處理接收到的數據，并返回一個 JSON 格式的數據給前端。

當 AJAX 請求成功返回數據后，我們將數據解析為 JavaScript 對象并利用 echarts 繪制柱狀圖。在上面的代碼中，我們創建了一個 echarts 實例，并將其綁定到一個用于展示圖表的 HTML 元素上。然后，我們定義了一個圖表選項對象，包含了柱狀圖的一些配置，例如數據類型、數據等。最后，我們使用 setOption 方法將圖表選項應用到 echarts 實例上，從而繪制出圖表。

通過上述代碼的組合，我們實現了一個簡單的 AJAX 表單提交并利用 echarts 將數據以柱狀圖形式展示在頁面上的功能。這個例子只是 AJAX 和 echarts 的基本用法，并沒有涉及到更復雜的數據處理和圖表配置。你可以根據自己的需求和實際情況進行進一步的擴展和優化。