通过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三者结合起来 ...
随机推荐
- 一个页面中使用多个UEditor
如何在一个页面中使用多个Ueditor: 引入这些js: <script src="~/Scripts/ueditor/ueditor.config.js"></ ...
- MyBatis配置：在控制台打印SQL语句
1.在spring-mybatis.xml中配置语句 注意:value=”classpath:mybatis-config.xml”这个文件如果之前没有,是需要新建的 2.新建mybatis-con ...
- webpack学习笔记--配置output
Output output 配置如何输出最终想要的代码. output 是一个 object ,里面包含一系列配置项,下面分别介绍它们. filename output.filename 配置 ...
- GIT 数据结构
Git doesn’t think of or store its data this way. Instead, Git thinks of its data more like a series ...
- [转]MySQL 数据类型（float）的注意事项
http://www.cnblogs.com/zhoujinyi/archive/2013/04/26/3043160.html 可能由于版本关系,我的mysql5.7插入数据超过范围时会提示,126 ...
- docker-java Docker的java API
docker-java docker-java 是 Docker的 Java 版本API Docker 当前的实现基于 Jersey 2.x 因此 classpath 不兼容老版本的 Jersey 1 ...
- keepalived + glusterfs实现高可用
此处暂时不介绍原理乱七八糟,边做别记录下操作. 1.服务器修改网卡的名字为eth0 .将device和name都改成eth0 vim /etc/sysconfig/network-scripts/if ...
- python--装饰器2--理解
一.装饰无参函数①.原函数target为无参函数②.装饰函数的内置函数也必须要是无参函数③.运行原理相当于:target()=decorator(target)()---->最后的()相当于执行 ...
- day3逻辑运算符
今天主讲逻辑运算符 以下是老师的大纲: # + - * / % ** // # == != <> # count = count + 1 count += 1 # count = ...
- springboot配置log4j
maven 配置jar包 <dependency> <groupId>org.springframework.boot</groupId> <artifact ...