利用jQuery实现滚动切换图表统计代码



16 61 21



特效描述:利用jQuery实现 滚动切换图表 统计代码,利用jQuery实现滚动切换图表统计代码

代码结构

1. 引入CSS

<link href="css/layout.css" type="text/css"	rel="stylesheet" />
<link rel="stylesheet" href="css/report.css" />
<link href="css/layout.css" type="text/css"	rel="stylesheet" />
<link rel="stylesheet" href="css/report.css" />

2. 引入JS

<script src="js/jquery.min.js"	type="text/javascript"></script>
<script type="text/javascript"	src="js/jquery.mousewheel.js"></script>
<script type="text/javascript"	src="js/echarts.min.js"></script>
<script type="text/javascript"	src="js/jquery.countup.min.js"></script>
<script type="text/javascript"	src="js/shuju.js"></script>
<script src="js/jquery.min.js"	type="text/javascript"></script>
<script type="text/javascript"	src="js/jquery.mousewheel.js"></script>
<script type="text/javascript"	src="js/echarts.min.js"></script>
<script type="text/javascript"	src="js/jquery.countup.min.js"></script>
<script type="text/javascript"	src="js/shuju.js"></script>

3. HTML代码

<!DOCTYPE html>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body style="">
<div class="section-wrap">
	<div class="section section-0" >
		<div class="title active">
			<div class="section_content " >
				<div class="Jpage0_btlog">
					<img src="images/banner_text.png">
				</div>
			</div>
		</div>
	</div>		
	<div class="section section-1"  >
		<div class="title ">
			<div class="section_content" >
				<em>运营数据总览</em>
				<div class="page1_shuju_cont">
				   <div class="page1_zu">
						<div class="shuju_back">
						   <strong><span class="ledge count_up_num">40705.55</span>万元</strong>
							<b>平台累计成交额</b>
						</div>
						<div  class="shuju_back">
							<strong><span class="ledge count_up_num">1985</span>笔</strong>
							<b>累计交易笔数</b>
						</div>
					</div>
					<div class="page1_zu">
						<div  class="shuju_back">
							<strong><span class="ledge count_up_num">840.89</span>万元</strong>
							<b>借贷余额</b>
						</div>
						 <div  class="shuju_back">
							<strong><span class="ledge count_up_num">8055</span>人</strong>
							<b>累计出借人数</b>
						</div>                       
						 <div  class="shuju_back">
							<strong><span class="ledge count_up_num">1671</span>人</strong>
							<b>累计借款人数</b>
						</div>   
					</div>						
				</div>
			</div>
		</div>
	</div>
	<div class="section section-2">
		<div class="title">
			<div class="section_content" >
				<em>投资用户数据资产分析</em>
				<div class="page2_quxtu">
				   <p>2018年5月份,资产总额10万以上的用户资产占比高达<span class="count_up_num">84.50</span>&nbsp;%。 </p>
				   <div id="echarts_ydzb" > </div>
				</div>
			</div>
		</div>
	</div>
	<div class="section section-3">
		<div class="title">
			<div class="section_content">
				<em>与2017年数据对比图</em>
				<div class="page3_quxtu">
					 <!--曲线图位置-->
					<div id="echarts_zxtt"></div>
				</div>
			</div>
		</div>
	</div>
	<div class="section section-4">
		<div class="title">
			<div class="section_content">
				<em>2018年各季度成交金额</em>
				<div class="page4_quxtu">
					 <!--柱状图位置-->
					<div id="echarts_nlzb" ></div>
				</div>
			</div>
		</div>
	</div>      
</div>	
<ul class="section-btn">
	<li class="cur"></li>
	<li class=""></li>
	<li class=""></li>
	<li class=""></li>
	<li class=""></li>
</ul>
<div class="go-btn">&laquo;</div>
</body>
</html>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动 滚动条 页面滚动 滚动插件 滚动条插件 滚动条美化 滑动选项卡 滑动切换 滚动切换 滚动条切换 自动滚动图片轮播 弹出层拖动 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 窗口 弹出 弹窗 弹出层 提示框 对话框 遮罩 遮罩层 弹窗插件 切换按钮 表单 表单美化 表单插件 表单美化插件 文字提示框 提示文字 图片滚动 图片滚动条 图片切换 图片选项卡 图标选项卡 按钮控制

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到