通过最近两天对echarts的了解，下面用echarts.js写了一个小效果；
效果的demo为：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>主页</title> <!-- 引入小图标 --> <link rel="shortcut icon" href="../club.ico"> <link rel="stylesheet" type="text/css" href="../css/reset.css"> <link rel="stylesheet" type="text/css" href="../css/main.css"> <link rel="stylesheet" href="../css/comment/jquery.running.css"> <style type="text/css"> </style> </head> <body> <div id="top"> <p class="lf">统计时间： <span id="statisticTime">08月29日 至 09月27日</span></p> <div class="fr" id="listTime"> <span class="time active">今日</span> <span class="time">昨日</span> <span class="time">近7日</span> <span class="time">近30日</span> <input id="time" type="hidden" value="10"> </div> </div> <div id="right-con"> <div class="tab currTab"> <div class="right-bottom"> <div class="fc-b-1" id="boxInfo"> <div class="tittle bgtittle"> <div class="fc-index-consume-label tip"> <span>交易总额</span> </div> <div class="num aa"> <label id="getNum" class="animateNum" data-animatetype="num" data-animatetarget="4.24">4.24</label> <span> 元</span> </div> </div> <ul class="li-tow cl" > <li class="liOther01"> <div>微信</div> <div>0.99元</div> </li> <li class="liOther01"> <div>支付宝</div> <div>0.99元</div> </li> <li class="liOther03"> <div>会员卡</div> <div id="totalMemberOrderAmt">0.99元</div> </li> <li class="liHide liOther01"> <div>微信</div> <div>11笔</div> </li> <li class="liHide liOther01"> <div>支付宝</div> <div>7元</div> </li> <li class="liHide liOther03"> <div>会员卡</div> <div id="totalMemberOrderCnt">0笔</div> </li> </ul> </div> <div class="fc-b-1"> <div class="tittle tit2"> <div class="fc-index-consume-label"> <span>营业总额</span> </div> <div class="num"> <label id="getNum" class="animateNum" data-animatetype="num" data-animatetarget="0.24">0.24</label> <span> 元</span> </div> </div> <ul class="li-tow" > <li class="liOther01"> <div>微信</div> <div>0.99元</div> </li> <li class="liOther01"> <div>微信</div> <div>0.99元</div> </li> <li class="liOther03"> <div>微信</div> <div>0.99元</div> </li> </ul> </div> <div class="fc-b-1 boxInfo3"> <div class="tittle tit3"> <div class="fc-index-consume-label tip3"> <span>优惠金额</span> </div> <div class="num aa3"> <label id="getNum" class="animateNum" data-animatetype="num" data-animatetarget="4.24">4.24</label> <span> 元</span> </div> </div> <ul class="li-tow cl" > <li class="liOther01"> <div>微信</div> <div>0.99元</div> </li> <li class="liOther01"> <div>支付宝</div> <div>0.99元</div> </li> <li class="liOther02"> <div>会员卡</div> <div>0.99元</div> </li> <li class="liHides liOther01"> <div>微信</div> <div>11笔</div> </li> <li class="liHides liOther01"> <div>支付宝</div> <div>7元</div> </li> <li class="liHides liOther03"> <div>会员卡</div> <div id="totalMemberOrderCnt">0笔</div> </li> </ul> </div> <div class="fc-b-1"> <div class="tittle tit4"> <div class="fc-index-consume-label"> <span>退款金额</span> </div> <div class="num"> <label id="getNum" class="animateNum" data-animatetype="num" data-animatetarget="6.88">6.88</label> <span> 元</span> </div> </div> <ul class="li-tow" > <li class="liOther01"> <div>微信</div> <div>0.99元</div> </li> </ul> </div> </div> <div class="right-bottom"> <div class="fc-b-1"> <div class="tittle tit5"> <div class="fc-index-consume-label"> <span>客服数</span> </div> <div class="num"> <label id="getNum" class="animateNum" data-animatetype="num" data-animatetarget="4.24">4.24</label> <span> 元</span> </div> </div> <ul class="li-tow" > <li class="liOther01"> <div>微信</div> <div>0.99元</div> </li> <li class="liOther01"> <div>微信</div> <div>0.99元</div> </li> <li class="liOther03"> <div>微信</div> <div>0.99元</div> </li> </ul> </div> <div class="fc-b-1"> <div class="tittle tit6"> <div class="fc-index-consume-label"> <span>营业笔数</span> </div> <div class="num"> <label id="getNum" class="animateNum" data-animatetype="num" data-animatetarget="4.24">4.24</label> <span> 元</span> </div> </div> <ul class="li-tow" > <li class="liOther01"> <div>微信</div> <div>0.99元</div> </li> <li class="liOther01"> <div>微信</div> <div>0.99元</div> </li> <li class="liOther03"> <div>微信</div> <div>0.99元</div> </li> </ul> </div> <div class="fc-b-1"> <div class="tittle tit7"> <div class="fc-index-consume-label"> <span>交易手续费</span> </div> <div class="num"> <label id="getNum" class="animateNum" data-animatetype="num" data-animatetarget="4.24">4.24</label> <span> 元</span> </div> </div> <ul class="li-tow" > <li class="liOther01"> <div>微信</div> <div>0.99元</div> </li> <li class="liOther01"> <div>支付宝</div> <div>0元</div> </li> <li class="liOther02"> <div>会员卡</div> <div>0元</div> </li> </ul> </div> <div class="fc-b-1"> <div class="tittle tit8"> <div class="fc-index-consume-label"> <span>结算金额</span> </div> <div class="num"> <label id="getNum">4.24</label> <span> 元</span> </div> </div> <ul class="li-tow" > <li class="liOther01"> <div>微信</div> <div>0.99元</div> </li> <li class="liOther01"> <div>支付宝</div> <div>0元</div> </li> <li class="liOther02"> <div>会员卡</div> <div>0元</div> </li> </ul> </div> </div> <div class="echarts-con"> <div id="container"></div> </div> <div class="echarts-con"> <div id="containerPrice"></div> </div> <div class="echarts-con"> <div id="containerNum"></div> </div> </div> <div class="tab">bbbb</div> <div class="tab">ccccc</div> </div> </body> <script type="text/javascript" src="../js/jquery-1.8.3.js"></script> <script type="text/javascript" src="../js/echarts.js"></script> <script type="text/javascript" src="../js/echarts.min.js"></script> <script type="text/javascript" src="../js/main.js"></script> <script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="../js/jquery.running.min.js"></script> <script type="text/javascript"> $(function(){ $('body').running(); }); </script> </html>
运行效果由于传视频比较大，在这里没有给上传效果，读者可以通过粘贴代码查看结果。
如果不想麻烦可以直接下载文件，其链接：https://pan.baidu.com/s/1p9SwOwVVnyomLS7D5HS2kg 密码：8sa9