要動態加載數據庫數據到echarts中，你需要使用一種服務器端腳本語言（如PHP、Python等）來連接并操作數據庫，然后將數據傳遞給echarts進行動態加載。
以下是一個使用PHP和MySQL數據庫來動態加載數據到echarts的示例代碼：
<!DOCTYPE html>
<html>
<head>
<title>動態加載數據到ECharts</title>
<script src="https://cdn.staticfile.org/echarts/4.9.0/echarts.min.js"></script>
</head>
<body>
<div id="chart" style="width: 600px; height: 400px;"></div>
</body>
</html>
<?php
// 連接數據庫
$servername = "localhost";
$username = "root";
$password = "password";
$dbname = "database_name";
$conn = new mysqli($servername, $username, $password, $dbname);
// 檢查連接是否成功
if ($conn->connect_error) {
die("連接失敗: " . $conn->connect_error);
}
// 查詢數據
$sql = "SELECT * FROM table_name";
$result = $conn->query($sql);
// 將數據轉換為JSON格式
$data = array();
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
$data[] = $row;
}
}
// 關閉連接
$conn->close();
// 將JSON數據返回給前端
header('Content-Type: application/json');
echo json_encode($data);
?>
<!DOCTYPE html>
<html>
<head>
<title>動態加載數據到ECharts</title>
<script src="https://cdn.staticfile.org/echarts/4.9.0/echarts.min.js"></script>
</head>
<body>
<div id="chart" style="width: 600px; height: 400px;"></div>
<script>
// 使用ajax請求數據
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var data = JSON.parse(xhr.responseText);
renderChart(data);
}
};
xhr.open('GET', 'data.php', true);
xhr.send();
// 使用echarts渲染圖表
function renderChart(data) {
var chart = echarts.init(document.getElementById('chart'));
var option = {
xAxis: {
type: 'category',
data: data.map(function(item) {
return item.xAxis;
})
},
yAxis: {
type: 'value'
},
series: [{
data: data.map(function(item) {
return item.yAxis;
}),
type: 'line'
}]
};
chart.setOption(option);
}
</script>
</body>
</html>
以上示例使用了PHP和MySQL來連接和查詢數據庫，并將查詢結果以JSON格式返回給前端。然后，前端使用JavaScript通過ajax請求數據，并使用echarts渲染圖表。你需要根據你的實際情況修改代碼中的數據庫連接信息和查詢語句。
