通过echarts的demo
通过最近两天对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="">
</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>.99元</div>
</li>
<li class="liOther01">
<div>支付宝</div>
<div>.99元</div>
</li>
<li class="liOther03">
<div>会员卡</div>
<div id="totalMemberOrderAmt">.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>.99元</div>
</li>
<li class="liOther01">
<div>微信</div>
<div>.99元</div>
</li>
<li class="liOther03">
<div>微信</div>
<div>.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>.99元</div>
</li>
<li class="liOther01">
<div>支付宝</div>
<div>.99元</div>
</li>
<li class="liOther02">
<div>会员卡</div>
<div>.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>.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>.99元</div>
</li>
<li class="liOther01">
<div>微信</div>
<div>.99元</div>
</li>
<li class="liOther03">
<div>微信</div>
<div>.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>.99元</div>
</li>
<li class="liOther01">
<div>微信</div>
<div>.99元</div>
</li>
<li class="liOther03">
<div>微信</div>
<div>.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>.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>.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的更多相关文章
- AngularJS引入Echarts的Demo
最近要用到图表展示,想了想,还是首选Echarts,HighCharts和D3.js备用吧, 而项目中也用到了AngularJS,所以需要把Echarts引入到AngularJs中一起使用, 试了试, ...
- echarts柱状图Demo
echarts链接:http://gallery.echartsjs.com/editor.html?c=xB1Sfo5JbX 代码: var xData = ['a', 'b', 'c', 'd', ...
- echarts 使用demo
<!DOCTYPE html> <head> <meta charset="utf-8"> <title>ECharts</t ...
- Vue+webpack+echarts+jQuery=demo
需要的插件: "dependencies": { "bootstrap": "^3.3.7", "echarts": & ...
- echarts 实例demo 详细讲解
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> & ...
- 完整版ajax+百度echarts实现统计图表demo并随着窗口大小改变而自适应
1.前言 百度Echarts会常用到我们的项目中做统计,api很详细,demo也非常之多,我们常用的是应有尽有了,做一些小项目的时候,百度echarts的demo已足够用了.今天呢.主要是跟小白讲一下 ...
- 百度地图、ECharts整合HT for Web网络拓扑图应用
前一篇谈及到了ECharts整合HT for Web的网络拓扑图应用,后来在ECharts的Demo中看到了有关空气质量的相关报表应用,就想将百度地图.ECharts和HT for Web三者结合起来 ...
- ECharts+百度地图网络拓扑应用
前一篇谈及到了ECharts整合HT for Web的网络拓扑图应用,后来在ECharts的Demo中看到了有关空气质量的相关报表应用,就想将百度地图.ECharts和HT for Web三者结合起来 ...
- ECharts+BaiduMap+HT for Web网络拓扑图应用
前一篇谈及到了ECharts整合HT for Web的网络拓扑图应用,后来在ECharts的Demo中看到了有关空气质量的相关报表应用,就想将百度地图.ECharts和HT for Web三者结合起来 ...
随机推荐
- 小改造gotty，使之适合接收经过一层加密的URL
当然,比起密码设置,这个安全性也不是特别高, 但比起直接传参数. 还是要专业一些的. 其实现思路分两种: 第一种是在gotty.js之内加入解url的函数. 第二种在是go源代码时,加入同等的解密函数 ...
- HDU 1384 Intervals【差分约束-SPFA】
类型:给出一些形如a−b<=k的不等式(或a−b>=k或a−b<k或a−b>k等),问是否有解[是否有负环]或求差的极值[最短/长路径].例子:b−a<=k1,c−b&l ...
- 【NOI2017】泳池
题解: 满分的笛卡尔树以后再学吧.. 40分还是比较好想的 但是状态挺复杂的 直接贴代码了 代码: #include <bits/stdc++.h> using namespace std ...
- Python_os模块
os模块:可以处理文件和目录,是Python系统和操作系统进行交互的一个接口 os模块常用方法: os.getcwd(): 获取当前工作目录,(即当前Python脚本工作的目录路径) os.chdir ...
- js判断手机邮箱格式（正则）
function fun() { var realname = document.getElementById("realname"); var telephone = docum ...
- laravel 错误 1071 Specified key was too long; max key length is 1000 bytes
laravel 执行 php artisan migrate 安装数据库报 1071 Specified key was too long; max key length is 1000 bytes ...
- JQ JS复制到剪贴板
示例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
- BZOJ2553 [BeiJing2011]禁忌 AC自动机 矩阵
原文链接http://www.cnblogs.com/zhouzhendong/p/8196279.html 题目传送门 - BZOJ2553 题意概括 引用一下lych大佬的: 在字母只有前alph ...
- DateFormat抽象类实现日期与字符串的转换
[需求]日期是可以计算的,而日期字符串无法计算. 由于DateFormat是抽象类,我们一般都是用的它的子类SimpleDateFormat. [SimpleDateFormat构造方法] 1)Sim ...
- POJ 2289 Jamie's Contact Groups 【二分】+【多重匹配】(模板题)
<题目链接> 题目大意: 有n个人,每个人都有一个或者几个能够归属的分类,将这些人分类到他们能够归属的分类中后,使所含人数最多的分类值最小,求出该分类的所含人数值. 解题分析: 看到求最大 ...