通过最近两天对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>&nbsp;元</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>&nbsp;元</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>&nbsp;元</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>&nbsp;元</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>&nbsp;元</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>&nbsp;元</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>&nbsp;元</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>&nbsp;元</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的更多相关文章

  1. AngularJS引入Echarts的Demo

    最近要用到图表展示,想了想,还是首选Echarts,HighCharts和D3.js备用吧, 而项目中也用到了AngularJS,所以需要把Echarts引入到AngularJs中一起使用, 试了试, ...

  2. echarts柱状图Demo

    echarts链接:http://gallery.echartsjs.com/editor.html?c=xB1Sfo5JbX 代码: var xData = ['a', 'b', 'c', 'd', ...

  3. echarts 使用demo

    <!DOCTYPE html> <head> <meta charset="utf-8"> <title>ECharts</t ...

  4. Vue+webpack+echarts+jQuery=demo

    需要的插件: "dependencies": { "bootstrap": "^3.3.7", "echarts": & ...

  5. echarts 实例demo 详细讲解

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head>     & ...

  6. 完整版ajax+百度echarts实现统计图表demo并随着窗口大小改变而自适应

    1.前言 百度Echarts会常用到我们的项目中做统计,api很详细,demo也非常之多,我们常用的是应有尽有了,做一些小项目的时候,百度echarts的demo已足够用了.今天呢.主要是跟小白讲一下 ...

  7. 百度地图、ECharts整合HT for Web网络拓扑图应用

    前一篇谈及到了ECharts整合HT for Web的网络拓扑图应用,后来在ECharts的Demo中看到了有关空气质量的相关报表应用,就想将百度地图.ECharts和HT for Web三者结合起来 ...

  8. ECharts+百度地图网络拓扑应用

    前一篇谈及到了ECharts整合HT for Web的网络拓扑图应用,后来在ECharts的Demo中看到了有关空气质量的相关报表应用,就想将百度地图.ECharts和HT for Web三者结合起来 ...

  9. ECharts+BaiduMap+HT for Web网络拓扑图应用

    前一篇谈及到了ECharts整合HT for Web的网络拓扑图应用,后来在ECharts的Demo中看到了有关空气质量的相关报表应用,就想将百度地图.ECharts和HT for Web三者结合起来 ...

随机推荐

  1. nunit单元测试详解

    在粗略看了代码后,下面就详细说明相应的测试标记(属性)的用法. [TestFixture(arguments)]属性标记类为测试类,若没有填写参数,则测试类必须含有无参构造函数,否则需要相应的有参构造 ...

  2. GreenDao3.2的简单使用

    Android -- GreenDao3.2的简单使用http://www.cnblogs.com/wjtaigwh/p/6394288.html https://github.com/greenro ...

  3. GO语言之urfave/cli命令行解析

    练习URL: https://blog.csdn.net/sd653159/article/details/83381786 相信只要部署过线上服务,都知道启动参数一定是必不可少的,当你在不同的网络. ...

  4. java keystore

    JAVA有一个keystore用来存放私钥和证书,该文件是伴随JDK默认存在的,路径默认是/lib/security/cacerts,默认密码是changeit,实际上空密码也可以直接访问 其中cac ...

  5. mongodb实现自增的方法

    前面操作看菜鸟教程 function getNextSequenceValue(sequenceName){ var sequenceDocument = Counter.findOneAndUpda ...

  6. Get与Post区别小结

          Get:是以实体的方式得到由请求Url所指定资源的信息,如果请求Url只是一个数据产生过程,那么最终要在实体中返回的是处理过程的结果所指向的资源,而不是处理过程的描述. Post:是用来向 ...

  7. Asp.Net Mvc 返回类型总结

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...

  8. Telnet和SSH

    1. 协议用途 Telnet和SSH用于远程访问服务器的的两大常用协议.利用它们,我们可以管理并监控生产服务器和企业服务器,更新服务器内核,安装最新的软件包和补丁,能够远程登录服务器,开展软件开发.测 ...

  9. Codeforces 542A Place Your Ad Here

    Place Your Ad Here 把没用的第一类区间去掉之后, 排序, 然后枚举第二类区间, 在上面死命二分就好了. #include<bits/stdc++.h> #define L ...

  10. BZOJ1095 [ZJOI2007]Hide 捉迷藏 动态点分治 堆

    原文链接https://www.cnblogs.com/zhouzhendong/p/BZOJ1095.html 题目传送门 - BZOJ1095 题意 有 N 个点,每一个点是黑色或者白色,一开始所 ...