通过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三者结合起来 ...
随机推荐
- Vue报错：Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#<Object>‘的解决方法
发现问题 运行一下以前的一个Vue+webpack的 vue仿新闻网站 小项目,报错 由于自己vue学习不深入,老是这个报错,找了好久(确切的说是整整一下午^...^)才找到原因 -v- Uncau ...
- Maven+SpringMVC+SpringFox+Swagger整合示例
查考链接:https://my.oschina.net/wangmengjun/blog/907679 coding地址:https://git.coding.net/conding_hjy/Spri ...
- Ant之build.xml详解
Ant之build.xml详解 关键字: ant build.xml Ant的概念 可能有些读者并不连接什么是Ant以及入可使用它,但只要使用通过Linux系统得读者,应该知道make这个命令.当编译 ...
- Vue爬坑之路
1.关闭eslint严格语法检查
- LVM管理之减少LV的大小
LVM管理之减少LV的大小 规定动作 1.umount filesystem 2.e2fsck filesystem 3.resize2fs filesystem 4.lvredure 实例演示——— ...
- 排查Linux机器是否已被入侵
来自--马哥Linux运维 1.入侵者可能会删除机器的日志信息 ,可以查看日志信息是否存在后者被清除 [root@zklf-server02 ~]# ll -h /var/log/ total 3.4 ...
- Codeforces 235C Cyclical Quest 字符串 SAM KMP
原文链接https://www.cnblogs.com/zhouzhendong/p/CF235C.html 题目传送门 - CF235C 题意 给定一个字符串 $s$ ,多组询问,每组询问的形式为 ...
- 使用mini-textbox控件时 不能获取value值
当使用class=“mini-textbox”文本框时 使用document.getElementById('id').value 获得的文本框输入值是‘undefined’而使用正常的input 不 ...
- Java中System类的相关应用
1.Runtime: public class RuntimeDemo { public static void main(String[] args) { Runtime runtime=Runti ...
- 线段树（lazy）-hdu1689
题目链接:https://vjudge.net/problem/HDU-1698 题目描述: 现在Pudge想做一些操作.让我们将钩子的连续金属棒从1编号到N.对于每个操作,Pudge可以将连续金属棒 ...