折线统计图-CSDN博客

本文链接：https://blog.csdn.net/Alan170929/article/details/129165901

该代码示例展示了如何利用ECharts库创建一个折线统计图，显示每日注册用户数量。通过jQuery的Ajax方法从count_new_user2和total接口获取数据，更新图表和页面上的总注册用户数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

折线统计图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>折线统计图</title>
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <style>
        html, body {
            height: 100%;
            padding: 0px;
            margin: 0px;
        }

        .box {
            width: 100%;
            height: 100%;
            margin-top: 10px;
            margin-right: 0px;
            padding: 0px;
            border: 1px #d7d7d7 solid;
            border-top: 0 none;
            font-size: 24px;
            text-align: center;
        }

        .item > label {
            display: inline-block;
            width: 300px;
            text-align: center;
            color: #999;
            font-family: sans-serif;
            font-size: 24px;
        }

        .item > label1 {
            display: inline-block;
            width: 350px;
            text-align: left;
            color: #999;
            font-family: sans-serif;
            font-size: 19px;
        }

        label > span {
            color: black;
        }

        label1 > span {
            color: black;
        }

        .right {
            float: right;
        }
    </style>
</head>
<body class="box">
<div class="item">
    <label><span>折线统计图</span></label>
</div>
<div class="item">
    <label1 class="item right"><span>总注册用户：</span><span id="total">100</span></label1>
</div>
<div id="main" class="item" style="width:100%;height:90%;"></div>

<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    myChart.showLoading();
    // 指定图表的配置项和数据
    var option = {
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['注册人数']
        },
        xAxis: {
            interval: '0',
            type: 'category',
            data: ['20230101', '20230102', '20230103', '20230104', '20230105']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            name: '人数',
            type: 'line',
            data: [23, 40, 30, 50, 19]
        }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    var x_data = [];
    var line_data = [];

    $.ajax({
        "type": 'post',
        "url": "count_new_user2",
        "dataType": "json",
        "data": {},
        "success": function (result) {
            var dataObj;
            //判断是否是json格式
            if ((typeof result == 'object') && result.constructor == Object) {
                dataObj = result;
            } else {
                dataObj = eval("(" + result + ")");
            }
            for (var i = 0; i < dataObj.length; i++) {
                //console.log('dataObj[i]=',dataObj[i].count);
                x_data.push(dataObj[i].date);
                line_data.push(dataObj[i].count);
            }
            //console.log("x_data=", x_data);
            //console.log("line_data=", line_data);
            myChart.hideLoading();
            myChart.setOption({
                xAxis: {
                    data: x_data
                },
                series: [{
                    name: '注册人数',
                    data: line_data
                }]
            });
        },
        "error": function (result) {
            alert("图表请求数据失败!");
            myChart.hideLoading();
        }
    });

    $.ajax({
        "type": 'post',
        "url": "total",
        "dataType": "json",
        "data": {},
        "success": function (result) {
            console.log(result);
            var dataObj;
            //判断是否是json格式
            if ((typeof result == 'object') && result.constructor == Object) {
                dataObj = result;
            } else {
                dataObj = eval("(" + result + ")");
            }
            $("#total").text(dataObj.total);
        },
        "error": function (result) {
        }
    });
</script>
</body>
</html>

在这里插入图片描述