码迷,mamicode.com
首页 > 其他好文 > 详细

通过echarts的demo

时间:2018-10-04 21:39:24      阅读:162      评论:0      收藏:0      [点我收藏+]

标签:iot   运行   time   ror   top   tom   jquery   sheet   stat   

通过最近两天对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>&nbsp;元</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>&nbsp;元</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>&nbsp;元</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>&nbsp;元</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>&nbsp;元</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>&nbsp;元</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>&nbsp;元</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>&nbsp;元</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

 

通过echarts的demo

标签:iot   运行   time   ror   top   tom   jquery   sheet   stat   

原文地址:https://www.cnblogs.com/lvxisha/p/9743329.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!