特效描述：利用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> %。 </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">«</div> </body> </html>
