通过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三者结合起来 ...
随机推荐
- 金蝶开k3wise客户端访问中间层不时提示远程服务器不存在或不可用
此问题一般是发生在WIN7客户端+中间层为WIN2008 R2系统,一般是中间层启用guest引起: a. 从Windows Vista以后, Negotiate (http://msdn.micro ...
- Install zeal on ubuntu16.04
Dash is a helpful software for macOS users. For Windows and Linux users, zeal is the open-source cou ...
- epoll函数
函数epoll 1. 函数epoll_creat: 该函数生成一个epoll专用的文件描述符 int epoll_creae(int size); 分析: size:epoll上能关注的最大描述符数 ...
- python---hash查找
以前只会用,没了解过原理. # coding = utf-8 class HashTable: def __init__(self): # 哈希表的初始大小已经被选择为 11.尽管这是任意的,但是重要 ...
- context日志
class Program { static void Main(string[] args) { List<wolf_example> Listw; using (var ctx = n ...
- POJ 2987 Firing【最大权闭合图-最小割】
题意:给出一个有向图,选择一个点,则要选择它的可以到达的所有节点.选择每个点有各自的利益或损失.求最大化的利益,以及此时选择人数的最小值. 算法:构造源点s汇点t,从s到每个正数点建边,容量为利益.每 ...
- wb 黑名单批量操作
0. 参考 yu961549745/WeiboBlackList 微博批量拉黑 1. 代码 block.py 更新内容:多线程,urllib.request 改为 requests + sessio ...
- nginx 域名泛解析
部分应用场景下要求服务器根据客户输入的二级域名地址自动访问不同的页面,比如一个服务器放置了不同的业务,商城.官网等多个业务,又不想一个个配置server, 网站目录结构入戏: html 网站根目录 m ...
- Spring Boot配置文件放在jar外部
Spring Boot程序默认从application.properties或者application.yaml读取配置,如何将配置信息外置,方便配置呢? 查询官网,可以得到下面的几种方案: 通过命令 ...
- lvs介绍
1Linux集群及系统扩展的方式概述 集群是有多台服务器组织在一起,一起工作,因为单台服务器的并发响应能力是有限的,响应处理能力也是有限的所有有了集群的出现 在系统扩展有2种方法: 1 向上扩展:是指 ...