通过最近两天对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
原文地址：https://www.cnblogs.com/lvxisha/p/9743329.html
时间： 2024-10-06 02:44:39