sso_smartcost-php/protected/view/admin/admin-index.html

<!-- include 'headAndLeftWrapper' -->
<script src="{{rootUrl}}global/m/js/echarts.js"></script>
<div class="mainWrapper container-fluid">
    <div class="total-main clearfix">
        <ul>
            <li>
                <div class="total-content">
                    <h2 class="total-title">待确认交易</h2>
                    <div class="total-column">
                        <a class="total-num total-num-file" href="/m/pay/add">{{unpaycount}}</a>
                    </div>
                </div>
            </li>
            <li>
                <div class="total-content">
                    <h2 class="total-title">用户已激活</h2>
                    <div class="total-column fL">
                        <dl>
                            <dt>今日累计</dt>
                            <dd class="total-num">{{tuaddnum}}</dd>
                        </dl>
                    </div>
                    <div class="total-column fR">
                        <dl>
                            <dt>昨日累计</dt>
                            <dd class="total-num">{{yuaddnum}}</dd>
                        </dl>
                    </div>
                </div>
            </li>
            <!-- <li>
              <div class="total-content" style="border:none;">
                <h2 class="total-title">用户注册</h2>
                <div class="total-column fL">
                  <dl>
                    <dt>今日累计</dt>
                    <dd class="total-num">999</dd>
                  </dl>
                </div>
                <div class="total-column fR">
                  <dl>
                    <dt>昨日累计</dt>
                    <dd class="total-num">999</dd>
                  </dl>
                </div>
              </div>
            </li> -->
        </ul>
    </div>
    <div class="userRegister" id="userRegister" style="width:100%;height:450px;padding-bottom:20px;"></div>
    <div class="total-main clearfix">
        <ul>
            <li>
                <div class="total-content">
                    <h2 class="total-title">支付宝</h2>
                    <div class="total-column fL">
                        <dl>
                            <dt>今日累计</dt>
                            <dd class="total-num">￥<!-- if empty({{atcount}}) -->0<!-- else -->{{atcount}}<!-- endif --></dd>
                        </dl>
                    </div>
                    <div class="total-column fR">
                        <dl>
                            <dt>昨日累计</dt>
                            <dd class="total-num">￥<!-- if empty({{aycount}}) -->0<!-- else -->{{aycount}}<!-- endif --></dd>
                        </dl>
                    </div>
                </div>
            </li>
            <!-- <li>
              <div class="total-content">
                <h2 class="total-title">网银在线</h2>
                <div class="total-column fL">
                  <dl>
                    <dt>今日累计</dt>
                    <dd class="total-num">￥99.3</dd>
                  </dl>
                </div>
                <div class="total-column fR">
                  <dl>
                    <dt>昨日累计</dt>
                    <dd class="total-num">￥999</dd>
                  </dl>
                </div>
              </div>
            </li> -->
            <li>
                <div class="total-content">
                    <h2 class="total-title">银行转账</h2>
                    <div class="total-column fL">
                        <dl>
                            <dt>今日累计</dt>
                            <dd class="total-num">￥<!-- if empty({{otcount}}) -->0<!-- else -->{{otcount}}<!-- endif --></dd>
                        </dl>
                    </div>
                    <div class="total-column fR">
                        <dl>
                            <dt>昨日累计</dt>
                            <dd class="total-num">￥<!-- if empty({{oycount}}) -->0<!-- else -->{{oycount}}<!-- endif --></dd>
                        </dl>
                    </div>
                </div>
            </li>
            <li>
                <div class="total-content" style="border:none;">
                    <h2 class="total-title">合计金额</h2>
                    <div class="total-column fL">
                        <dl>
                            <dt>今日累计</dt>
                            <dd class="total-num">￥<!-- if empty({{alltcount}}) -->0<!-- else -->{{alltcount}}<!-- endif --></dd>
                        </dl>
                    </div>
                    <div class="total-column fR">
                        <dl>
                            <dt>昨日累计</dt>
                            <dd class="total-num">￥<!-- if empty({{allycount}}) -->0<!-- else -->{{allycount}}<!-- endif --></dd>
                        </dl>
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <div class="userRecharge" id="userRecharge" style="width:100%;height:450px; margin-top:35px;"></div>
    <div class="total-balanc-main clearfix">
        <ul>
            <li>
                <div class="total-content total-content-balanc">
                    <h2 class="total-title total-title-d">充值总计</h2>
                    <div class="total-column total-num">￥{{all}}</div>
                </div>
                <div class="total-tableY">
                    <table class="table">
                        <thead>
                        <tr>
                            <th></th>
                            <th>2016累计（元）</th>
                            <th>2015累计（元）</th>
                        </tr>
                        </thead>
                        <tr>
                            <td>支付宝</td>
                            <td>{{alipay2016}}</td>
                            <td>{{alipay2015}}</td>
                        </tr>
                        <tr>
                            <td>网银在线</td>
                            <td>{{recharge2016}}</td>
                            <td>{{recharge2015}}</td>
                        </tr>
                        <tr>
                            <td>银行转账</td>
                            <td>{{offline2016}}</td>
                            <td>{{offline2015}}</td>
                        </tr>
                        <tr>
                            <td>合计</td>
                            <td>{{all2016}}</td>
                            <td>{{all2015}}</td>
                        </tr>
                    </table>
                </div>
            </li>
            <li>
                <div class="total-tableM">
                    <table class="table">
                        <thead>
                        <tr>
                            <th>2016</th>
                            <th>支付宝（元）</th>
                            <th>网银在线（元）</th>
                            <th>银行转账（元）</th>
                            <th>合计（元）</th>
                        </tr>
                        </thead>
                        <!-- if !empty({{data2016}}) -->
                        <!-- loop data2016 -->
                        <tr>
                            <td>{{data2016' value.month}}</td>
                            <td>{{data2016' value.alipay}}</td>
                            <td>{{data2016' value.recharge}}</td>
                            <td>{{data2016' value.offline}}</td>
                            <td>{{data2016' value.allpost}}</td>
                        </tr>
                        <!-- endloop -->
                        <!-- endif -->
                    </table>
                </div>
            </li>
        </ul>
    </div>
</div>
<!-- mainWrapper end -->
</div>

<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('userRegister'));

    // 指定图表的配置项和数据
    var option = {
        tooltip : {
            trigger: 'axis',
        },
        legend: {
            data:['已激活用户']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '12%',
            containLabel: true
        },
        dataZoom:
        {
            show: true,
            start: 0,
            end: 100
        },
        xAxis : [
            {
                type : 'category',
                splitLine: {
                    show: true,
                    interval: 'auto'
                },
                data : [<!-- loop monthstr -->"{{monthstr' value}}",<!-- endloop -->]
            }
        ],
        yAxis : [
            {
                type : 'value',
                name : '人数',
                axisLabel : {
                    formatter: '{value} 人'
                }
            }
        ],
        calculable:false,
        series : [
            // {
            //     name:'仅注册',
            //     type:'bar',
            //     stack: '人数',
            //     data:[50,110,120,10,70,32,50,110,120,10,70,32,50,110,120,10,70,32,50,110,120,10,70,32,50,110,120,10,70,32,50],
            //     itemStyle:{
            //           normal:{color:'#e9af68'}
            //       }
            // },
            // {
            //     name:'已验证',
            //     type:'bar',
            //     stack: '人数',
            //     data:[30,0,20,50,0,100,30,0,20,50,0,100,30,0,20,50,0,100,30,0,20,50,0,100,30,0,20,50,0,100,30],
            //     itemStyle:{
            //           normal:{color:'#009f86'}
            //       }
            // },
            {
                name:'已激活用户',
                type:'line',
                data:[<!-- loop muaddnumstr -->{{muaddnumstr' value}},<!-- endloop -->],

                // 80,110,140,60,70,132,80,110,140,60,70,132,80,110,140,60,70,132,80,110,140,60,70,132,80

                itemStyle:{
                    normal:{color:'#E4575A'}
                }
            },
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

    // 基于准备好的dom，初始化echarts实例
    var myChart2 = echarts.init(document.getElementById('userRecharge'));

    option = {
        tooltip : {
            trigger: 'axis',
        },
        legend: {
            data:['支付宝','银行转账','总金额']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '12%',
            containLabel: true
        },
        dataZoom:
        {
            show: true,
            start: 0,
            end: 100
        },
        xAxis : [
            {
                type : 'category',
                splitLine: {
                    show: true,
                    interval: 'auto'
                },
                data : []
            }
        ],
        yAxis : [
            {
                type : 'value',
                name : '金额',
                axisLabel : {
                    formatter: '{value} 元'
                }
            }
        ],
        calculable:false,
        series : [
            {
                name:'支付宝',
                type:'bar',
                stack: '金额',
                data:[],
                itemStyle:{
                    normal:{color:'#5DB1EA'}
                }
            },
            {
                name:'银行转账',
                type:'bar',
                stack: '金额',
                data:[],
                itemStyle:{
                    normal:{color:'#14d2be'}
                }
            },
            {
                name:'总金额',
                type:'line',
                data:[],
                itemStyle:{
                    normal:{color:'#E4575A'}
                }
            },
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart2.setOption(option);

    myChart2.showLoading();
    $.get('/m/main/charts').done(function(data){
        var html = eval("("+data+")");
        myChart2.hideLoading();
        myChart2.setOption({
            xAxis: {
                data: html.daystr
            },
            series: [
                {
                    // 根据名字对应到相应的系列
                    name: '支付宝',
                    data: html.alipaystr
                },
                {
                    name:'银行转账',
                    data:html.offlinestr
                },
                {
                    name:'总金额',
                    data: html.allstr
                }
            ]
        });
    });

</script>

</body>
</html>