2022.5数据统计表

最新推荐文章于 2024-03-14 18:21:19 发布
最新推荐文章于 2024-03-14 18:21:19 发布
阅读量198 收藏
点赞数
文章标签： bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_64863890/article/details/124562701
版权 
<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>软件20-4 bzh</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="./css/bootstrap.min.css"  crossorigin="anonymous">
	<link rel="stylesheet" type="text/css" href="css/index.css" />

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://fastly.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://fastly.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
	  <nav class="navbar navbar-default">
	    <div class="container">
	      <!-- Brand and toggle get grouped for better mobile display -->
	      <div class="navbar-header">
	        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
	          <span class="sr-only">Toggle navigation</span>
	          <span class="icon-bar"></span>
	          <span class="icon-bar"></span>
	          <span class="icon-bar"></span>
	        </button>
	        <a class="navbar-brand" href="#">Friendly</a>
	      </div>
	  
	      <!-- Collect the nav links, forms, and other content for toggling -->
	      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
	        <ul class="nav navbar-nav">
	          <li class="active"><a href="index.html"><span class="glyphicon glyphicon-home"></span>&nbsp;&nbsp;后台首页 <span class="sr-only">(current)</span></a></li>
	          <li><a href="user_list.html"><span class="glyphicon glyphicon-user"></span>&nbsp;&nbsp;用户管理</a></li>
	          <li><a href="content.html"><span class="glyphicon glyphicon-list-alt"></span>&nbsp;&nbsp;内容管理</a></li>
	          <li><a href="tag.html"><span class="glyphicon glyphicon-tags"></span>&nbsp;&nbsp;标签管理</a></li>
	          
	        </ul>
	        
	        <ul class="nav navbar-nav navbar-right">
	          
	          <li class="dropdown">
	            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">admin<span class="caret"></span></a>
	            <ul class="dropdown-menu">
	              <li><a href="#"><span class="glyphicon glyphicon-screenshot"></span>&nbsp;&nbsp;前台首页</a></li>
	              <li><a href="#"><span class="glyphicon glyphicon-user"></span>&nbsp;&nbsp;个人主页</a></li>
	              <li><a href="#"><span class="glyphicon glyphicon-cog"></span>&nbsp;&nbsp;个人设置</a></li>
	              <li><a href="#"><span class="glyphicon glyphicon-credit-card"></span>&nbsp;&nbsp;帐户中心</a></li>
	              <li><a href="#"><span class="glyphicon glyphicon-heart"></span>&nbsp;&nbsp;我的收藏</a></li>
	              
	            </ul>
	          </li>
	          <li><a href="#"><span class="glyphicon glyphicon-off"></span>&nbsp;&nbsp;退出</a></li>
	        </ul>
	      </div><!-- /.navbar-collapse -->
	    </div><!-- /.container-fluid -->
	  </nav>
	  
	<div class="container">
		<div class="alert alert-danger alert-dismissible fade in" role="alert">
			<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
			<h4>网站存在漏洞，急需修复！</h4>
			<p>当前版本程序版本太低,存在严重安全问题，容易造成攻击，请即可修复！</p>
			<p>
		        <button type="button" class="btn btn-danger">立即修复</button>
		        <button type="button" class="btn btn-default" data-dismiss="alert" data-dismiss="alert">稍后处理</button>
			</p>
		</div>
	</div>
	<div class="container">
		<div class="row">
			<div class="col-md-6">
				<div id="main" style="width: 600px;height: 400px;">
					
				</div>
			</div>
			<div class="col-md-6">
				<div class="panel panel-default">
				  <div class="panel-heading">网站热帖</div>
				  <ul class="list-group">
				    <li class="list-group-item">
						<a href="">
							<span class="glyphicon glyphicon-list-alt"></span>发挥特长 迅速反应 多语种输出助力国际战“疫” <small class="pull-right">2022/5/2</small>
						</a>
					</li>
				    <li class="list-group-item">
				    	<a href="">
				    		<span class="glyphicon glyphicon-list-alt"></span>发挥特长 迅速反应 多语种输出助力国际战“疫” <small class="pull-right">2022/5/2</small>
				    	</a>
				    </li>
				    <li class="list-group-item">
				    	<a href="">
				    		<span class="glyphicon glyphicon-list-alt"></span>发挥特长 迅速反应 多语种输出助力国际战“疫” <small class="pull-right">2022/5/2</small>
				    	</a>
				    </li>
				    <li class="list-group-item">
				    	<a href="">
				    		<span class="glyphicon glyphicon-list-alt"></span>发挥特长 迅速反应 多语种输出助力国际战“疫” <small class="pull-right">2022/5/2</small>
				    	</a>
				    </li>
				    <li class="list-group-item">
				    	<a href="">
				    		<span class="glyphicon glyphicon-list-alt"></span>发挥特长 迅速反应 多语种输出助力国际战“疫” <small class="pull-right">2022/5/2</small>
				    	</a>
				    </li>
					<li class="list-group-item">
						<a href="">
							<span class="glyphicon glyphicon-list-alt"></span>发挥特长 迅速反应 多语种输出助力国际战“疫” <small class="pull-right">2022/5/2</small>
						</a>
					</li>
					<li class="list-group-item">
						<a href="">
							<span class="glyphicon glyphicon-list-alt"></span>发挥特长 迅速反应 多语种输出助力国际战“疫” <small class="pull-right">2022/5/2</small>
						</a>
					</li>
				  </ul>
				</div>
			</div>
		</div>
		<div class="row">
			
			<div class="col-md-6">
				<div class="panel panel-default">
				  <div class="panel-heading">服务器状态</div>
				  <div class="panel-body">
					  <p>内存使用率：40%</p>
				    <div class="progress">
				      <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
				        <span class="sr-only">40% Complete (success)</span>
				      </div>
				    </div>
					<p>数据库使用率：20%</p>
				    <div class="progress">
				      <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
				        <span class="sr-only">20% Complete</span>
				      </div>
				    </div>
					<p>磁盘使用率：60%</p>
				    <div class="progress">
				      <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
				        <span class="sr-only">60% Complete (warning)</span>
				      </div>
				    </div>
					<p>CPU使用率：80%</p>
				    <div class="progress">
				      <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
				        <span class="sr-only">80% Complete (danger)</span>
				      </div>
				    </div>
				  </div>
			</div>
		</div>
		<div class="col-md-6">
		    <div class="panel panel-default">
		      <div class="panel-heading">
		       网站数据统计
		      </div>
		      <div class="panel-body">
		          <table class="table table-hover">
		            <thead>
		              <tr>
		                <th>统计项目</th>
		                <th>近日</th>
		                <th>昨日</th>
		                
		              </tr>
		            </thead>
		            <tbody>
		              <tr>
		                <th scope="row">注册会员</th>
		                <td>90</td>
		                <td>199</td>
		                
		              </tr>
		              <tr>
		                <th scope="row">登陆会员</th>
		                <td>5200</td>
		                <td>6321</td>
		                
		              </tr>
		              <tr>
		                <th scope="row">今日发帖</th>
		                <td>1540</td>
		                <td>4511</td>
		                
		              </tr>
		              <tr>
		                <th scope="row">转载次数</th>
		                <td>150</td>
		                <td>110</td>
		                
		              </tr>
		            </tbody>
		          </table>
		      </div>
		    </div>
		</div>
	</div>
	<div class="row">
		<div class="col-md-12">
			<div class="panel panel-default">
				<div class="panel-heading">留言板</div>
				<div class="panel-body">
					<div class="col-md-7">
					    <div class="media well">
					        <div class="media-left">
					          <a href="#">
					            <img class="media-object wh64" src="img/a.png" alt="李哥">
					          </a>
					        </div>
					        <div class="media-body">
					          <h4 class="media-heading">李哥</h4>
					          阿文，今晚需要加班,升级网站程序，网站发现漏洞！
					        </div>
					      </div>
					      <div class="media well">
					        
					        <div class="media-body text-right">
					          <h4 class="media-heading">李哥</h4>
					          阿文，今晚需要加班,升级网站程序，网站发现漏洞！
					        </div>
					        <div class="media-right">
					          <a href="#">
					            <img class="media-object wh64" src="img/b.png" alt="李哥">
					          </a>
					        </div>
					      </div>
					      <div class="media well">
					        
					        <div class="media-body text-right">
					          <h4 class="media-heading">李哥</h4>
					          阿文，今晚需要加班,升级网站程序，网站发现漏洞！
					        </div>
					        <div class="media-right">
					          <a href="#">
					            <img class="media-object wh64" src="img/b.png" alt="李哥">
					          </a>
					        </div>
					      </div>
					      <div class="media well">
					        <div class="media-left">
					          <a href="#">
					            <img class="media-object wh64" src="img/a.png" alt="李哥">
					          </a>
					        </div>
					        <div class="media-body">
					          <h4 class="media-heading">李哥</h4>
					          阿文，今晚需要加班,升级网站程序，网站发现漏洞！
					        </div>
					      </div>
					</div>
					<div class="col-md-5">
					  
					  <form action="#" method="post">
					      <div class="form-group">
					        <label for="text1">输入留言</label>
					        <textarea class="form-control" id="text1" rows="5" cols="10" placeholder="请输入留言内容"></textarea>
					        
					      </div>
					     <button type="submit" class="btn btn-default">留言</button>
					    </form>
					
					    <div class="panel panel-default">
					        <div class="panel-heading">团队联系方式</div>
					        <div class="panel-body">
					            <ul class="list-group">
					              <li class="list-group-item">站长(李大哥)： <span class="glyphicon glyphicon-phone"></span>&nbsp;&nbsp;13435797092</li>
					              <li class="list-group-item">技术(阿文哥)：<span class="glyphicon glyphicon-phone"></span>&nbsp;&nbsp;  13435797092</li>
					              <li class="list-group-item">推广(阿强哥)：<span class="glyphicon glyphicon-phone"></span>&nbsp;&nbsp;  13435797092</li>
					              <li class="list-group-item">客服(阿敏姐)： <span class="glyphicon glyphicon-phone"></span>&nbsp;&nbsp; 13435797092    0760-888888</li>
					              
					            </ul>
					        </div>
					      </div>
				</div>
			</div>
		</div>
	</div>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="./js/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"crossorigin="anonymous"></script>
	 <script src="js/echarts.min.js" type="text/javascript" charset="UTF-8"></script>
	 <script type="text/javascript">
		     // 基于准备好的dom，初始化echarts实例
		       var myChart = echarts.init(document.getElementById('main'));
		 
		       // 指定图表的配置项和数据
		       var option = {
		         title: {
		           text: '服装销售统计图表',
				   subtext: '套'
		         },
		         tooltip: {},
		         legend: {
		           data: ['衬衫','西装裤','T恤','背带裤','连衣裙','高跟鞋']
		         },
		         xAxis: {
		           data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
		         },
		         yAxis: {},
		         series: [
		           {
		             name: '衬衫',
		             type: 'bar',
		             data: [5,6,12,20,21,21,15,17,8,7,22,12]
		           },
				   {
				     name: '西装裤',
				     type: 'bar',
				     data: [20,18,30,22,22,24,9,12,21,24,22,12]
				   },
				   {
				     name: 'T恤',
				     type: 'bar',
				     data: [36,20,20,23,28,21,13,16,12,28,21,22]
				   },
				   {
				     name: '背带裤',
				     type: 'bar',
				     data: [10,12,18,21,25,22,12,14,32,21,18,21]
				   },
				   {
				     name: '连衣裙',
				     type: 'bar',
				     data: [10,11,17,25,25,38,20,15,31,18,15,24]
				   },
				   {
				     name: '高跟鞋',
				     type: 'bar',
				     data: [20,19,22,21,23,21,19,24,32,21,24,21]
				   },
		         ],
			// markPoint: {
			//         data: [
			//           { name: 'Max', value:38, xAxis:6, yAxis: 4 },
			//           { name: 'Min', value:5, xAxis: 1, yAxis: 1 }
			//         ]
			//       },
		       };
		 
		       // 使用刚指定的配置项和数据显示图表。
		       myChart.setOption(option);
	 </script>
  </body>
	<footer>
	  <div class="container">
	    <div class="row">
	      <div class="col-md-12">
	       Friendly&nbsp;&nbsp; &copy;2020-2022 &nbsp;&nbsp; www.edu.com&nbsp;&nbsp;  YYQX-bzh-4
	      </div>
	    </div>
	  </div>
	  </footer>
</html>

在这里插入图片描述

小毕在努力*
关注
flask+bootstrap实现dashboard中的统计图表
我的邮箱26huitailang@gmail.com
10-22 5780
就是在dashboard首页有个图表统计直观展示一些数据，本例用的是用户的角色及统计。 图上信息可以看到，用户100个，四种角色以及角色的人数和占比，以此类推可以统计一些其他的信息。以下我尝试简单的阐述一下实现：文件结构 这里只是蓝图的结构，主要用到的是views.py视图函数，models.py定义Dashboard类，提供一些查询方法，以及模板文件dashboard.html。views.p
【无标题】
m0_64863890的博客
04-24 135
服装销量柱状图 <!doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!
Bootstrap统计图后台管理模板
11-29
Bootstrap响应式销售统计后台管理模板
Bootstrap - 【echart】 统计图表基本使用（一）
Mr_WoLong
07-04 2889
Bootstrap是一个流行的前端框架，而ECharts是一个流行的可视化库。 Bootstrap可以用来设计网站和应用程序的用户界面，而ECharts可以用来创建交互式和可视化的图表
前端数据统计用做Bootstrap的一些柱状图、饼状图和折线图案例
weixin_34067049的博客
08-11 9197
Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。 Bootstrap 使用了一些 HTML5 元素和 CSS 属性。为了让这些正常工作，您需要使用 HTML5 文档类型（Doctype）。 因此，请在使用 Bootstrap 项目的开头包含下面的代码段。 <...
迁徙指数数据（截止2022.5.13）
05-14
数据涵盖了从2022年1月1日至5月13日的时间段，并且还包含了2021年全年的数据以及2019年和2020年的部分数据。 迁徙指数通常用于研究人口迁移模式、城市间的人口流动、节假日旅游趋势、疫情防控政策效果分析等多个...
肌电信号分类数据集及相关代码（对应2022.5.21博客篇）
10-19
1. 主成分分析（PCA）：PCA是一种统计降维技术，用于将高维度数据转换为低维度表示，同时保留原始数据的主要信息。在sEMG特征抽取中，PCA可以用来减少噪声影响，提取最具代表性的特征向量，有助于提高分类性能。 2....
ASP源码—宁志交警队网站管理系统-蓝色模板 v2022.5.12.zip
10-23
【ASP源码—宁志交警队网站管理系统-蓝色模板 v2022.5.12.zip】是一款基于ASP（Active Server Pages）技术开发的网站管理系统，专为交警队这样的公共服务机构设计，提供了完整的蓝色界面模板，以实现高效、便捷的...
中国汽车能源消耗量数据截至2022.12.31
10-06
标题 "中国汽车能源消耗量数据截至2022.12.31" 指的是一个数据集，其中包含了自2010年以来至2022年12月31日为止，中国国内汽车的能源消耗情况。这个数据集主要用于提供关于汽车能源使用的详细信息，以便于学术研究和...
专题资料（2021-2022年）41统计表与统计图.ppt
10-07
统计表与统计图是数据可视化的重要工具，它们在卫生统计学中起着至关重要的作用。统计表是一种将统计分析的数据和指标以表格的形式呈现出来的方式，可以分为广义和狭义两种类型。广义的统计表包括整理资料的整理表、...
Bootstrap-table分页+汇总统计
08-03
使用 Bootstrap-table表格进行分页，表格汇总统计，方便我们做报表
bootstrap各种图表模版
06-30
boostrap相信用过的人都知道它便捷之处，省去不少Java程序员对前端的烦恼
一份Bootstrap框架的期末作业
06-17
这是我对平时bootstrap使用练习的一个集合，欢迎下载，使用的时候一定要注意更改页面底部标签-_-
bootStrap响应式网站.zip
07-02
二十套精美的响应式网站，除了基本的HTML+CSS+JS以外，还用到了bootStrap，因为bootStrap天生就支持响应式。这些网站设计整体风格和个人博客网站类似，适合参考其响应式网页布局，同样适合同学们完成网页大作业。
Web网页作业5个简单网页
11-02
五个简单的网页
bootstrap网页作业
m0_62221227的博客
04-19 5073
bootstrap网页作业
Bootstrop统计图表插件Chart.js简单使用
南窗寄傲琴书消忧的博客
02-27 6377
Bootstrop统计图表插件Chart.js的介绍以及简单使用方式在项目中关于数据方面难免要生成报表，曲线图，柱状图，蛛网图等一些图表以便于观察数据走势，在做相应网站的时候肯定会用到，学习记录！ 准备 Chart.js或者是Chart.bundle.js 如果考虑浏览器兼容还需下载 excanvas.js 下载地址 https://github.com/nnnick/Chart.js chart.
Python | Bootstrap图介绍
最新发布
python收藏家的博客
03-14 940
在进入Bootstrap 图之前，让我们先了解一下Bootstrap（或Bootstrap 抽样）是什么。（Bootstrap Sampling）：这是一种方法，我们从一个数据集中重复地取一个样本数据来估计一个总体参数。它用于确定总体的各种参数。
bootstrap作业
weixin_52765407的博客
03-13 577
bootstrap笔记 v5-导航栏------作业一 <!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Boot
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值