<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.3/echarts.min.js"></script>
</head>
<body>
<div id="wstongChart" style="width: 100%; height: 600px;"></div>
<script>
function initChart() {
var wstongChart = echarts.init(document.getElementById("wstongChart"), "dark");
var dataChart = {
"日期": new Array(),
"总人数": new Array(),
"签到人数": new Array(),
"未签到人数": new Array()
}
// 初始化随机数据
for (var i = 1; i <= 31; i++) {
dataChart["日期"].push(i.toString());
x = Math.ceil(Math.random() * 100);
y = Math.ceil(Math.random() * 100);
dataChart["总人数"].push(x + y);
dataChart["签到人数"].push(x);
dataChart["未签到人数"].push(y);
}
var option = {
title: {
show: true,
text: "签到统计图",
subtext: "2024年3月"
},
legend: {
data: ["总人数", "签到人数", "未签到人数"]
},
xAxis: {
type: "category",
data: dataChart["日期"]
},
yAxis: {
type: "value"
},
series: [
{
name: "总人数",
type: "line",
data: dataChart["总人数"],
label: {
show: true,
position: "top"
}
},
{
name: "签到人数",
type: "line",
data: dataChart["签到人数"],
label: {
show: true,
position: "top"
}
},
{
name: "未签到人数",
type: "line",
data: dataChart["未签到人数"],
label: {
show: true,
position: "top"
}
}
]
};
wstongChart.setOption(option);
}
initChart();
</script>
</body>
</html>
可以到官网看更多示例和教程 https://echarts.apache.org/zh/index.html