jQuery全屏滚动运营报告图表特效代码下载



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

19 74 25



特效描述:全屏滚动 运营报告图表。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">
<meta name="keywords" content="全屏动画">
<meta name="description"	content="全屏动画">
<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>



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



×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

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

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