要從數據庫獲取數據并在 ECharts 中使用，您可以使用后端語言（如 PHP、Python、Node.js 等）與數據庫進行連接，并將查詢結果轉化為 JSON 格式的數據，然后通過 AJAX 請求將數據傳遞給前端頁面，在 ECharts 中使用這些數據進行圖表展示。
以下是一個簡單的示例代碼，假設您使用 PHP 作為后端語言：
<?php
// 連接數據庫
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "dbname";
$conn = new mysqli($servername, $username, $password, $dbname);
// 查詢數據庫獲取數據
$sql = "SELECT * FROM your_table";
$result = $conn->query($sql);
$data = array();
while($row = $result->fetch_assoc()) {
$data[] = array(
'name' => $row['name'],
'value' => $row['value']
);
}
// 輸出數據為 JSON 格式
echo json_encode($data);
// 關閉數據庫連接
$conn->close();
?>
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.2.2/echarts.min.js"></script>
</head>
<body>
<div id="chart" style="width: 600px; height: 400px;"></div>
<script>
var chart = echarts.init(document.getElementById('chart'));
// 使用 AJAX 請求獲取數據
var xhr = new XMLHttpRequest();
xhr.open('GET', 'getData.php', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var data = JSON.parse(xhr.responseText);
// 在 ECharts 中使用數據創建圖表
chart.setOption({
xAxis: {
type: 'category',
data: data.map(function(item) {
return item.name;
})
},
yAxis: {
type: 'value'
},
series: [{
data: data.map(function(item) {
return item.value;
}),
type: 'bar'
}]
});
}
};
xhr.send();
</script>
</body>
</html>
請根據您的實際情況調整代碼中的數據庫連接和查詢邏輯，以及 ECharts 圖表的配置。這是一個簡單的示例，您可以根據需求進行更復雜的數據處理和圖表展示。
