Web实现：统计图_web 统计图设计-优快云博客

本文链接：https://blog.youkuaiyun.com/jasmyn518/article/details/124212379

这是一个展示资源数量统计的前端代码，包括表格和ECharts图表。页面中包含了一个表格用于显示不同类型资源的总数，以及一个资源数量统计图，用于以条形图的形式直观展示数据。代码使用了Bootstrap、Font Awesome和ECharts库进行界面和图表的构建。

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

前端代码：<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--360浏览器优先以webkit内核解析-->
    <title>高句丽介绍</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/main/animate.min.css" th:href="@{/css/main/animate.min.css}" rel="stylesheet"/>
    <link href="../static/css/main/style.min862f.css" th:href="@{/css/main/style.min862f.css}" rel="stylesheet"/>
    <style lang="css">
        td {
            align: center;
            valign: middle;
            text-align: center;
            vertical-align: middle;
        }
    </style>
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content">
    <div class="row">
        <div class="col-sm-9">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h4>资源数量统计表</h4>
                </div>
                <div class="ibox-content">
                    <table border="1" cellspacing="0" style="height: 200px;width: 100%;font-size: 0.5em" >
                        <thead>
                        <tr>
                            <td>类型</td>
                            <td>总数</td>
                           <!-- <td>已发布</td>
                            <td>未发布</td>-->
                        </tr>
                        </thead>
                        <tbody>
                        <tr th:each="a : ${list}">
                            <td th:text="${a.type}"></td>
                            <td th:text="${a.total}"></td>
                            <!--<td th:text="${a.publish}"></td>
                            <td th:text="${a.notPublish}"></td>-->
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    </div>

    <div class="col-sm-12">

        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h4>资源数量统计图</h4>
            </div>
            <div class="ibox-content">
                <div id="bar" style="height: 200px;width: 100%"></div>

            </div>
        </div>
    </div>
</div>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<!-- echart-->
<script th:src="@{/ajax/libs/echarts/echarts.common.min.js}"></script>

<script th:inline="javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('bar'));
    var list = [[${list}]];

    var legendDate = [];
    var total = [];
    //var notPublish = [];
    for (var i = 0; i < list.length; i++) {
        legendDate.push(list[i].type)
        total.push(list[i].total)
       // notPublish.push(list[i].notPublish)
    }
    console.log(legendDate);


    // 指定图表的配置项和数据
    option = {
        color: ['#3398DB'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        legend: {
            data: '总数'
        },
        grid: {
            left: '2%',
            right: '3%',
            bottom: '2%',
            containLabel: true
        },
        xAxis: [{
            type: 'category',
            data: legendDate,
            textStyle: {
                color: '#c3dbff',  //更改坐标轴文字颜色
                fontSize : 30    //更改坐标轴文字大小
            },
            axisLabel: {//x轴文字垂直显示
                interval: 0,
                formatter:function(value)
                {
                    return value.split("").join("\n");
                }
            }
//            axisTick: {
//                alignWithLabel: true
//            }
        }],
        yAxis: {
            type: 'value'


        },
        series: [
            {
                name: '资源总量',
                type: 'bar',
                stack: '总量',
                label: {
                    normal: {
                        show: true,
                        position: 'insideRight'
                    }
                },
                data: total
            }/*,
            {
                name: '未发布',
                type: 'bar',
                stack: '总量',
                label: {
                    normal: {
                        show: true,
                        position: 'insideRight'
                    }
                },
                data: notPublish
            }*/
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>
</html>