echarts.js画折线图

<!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