jili2/application/admin/view/waste_statistics/view.html

{extend name="common/common2" /}
{block name="main"}
<div class="ibox">

<div class="ibox-content">
    <div class="row">
        <div class="col-xs-12" style="text-align: right;">
        <form action="{:url('WasteStatistics/view')}" method="GET" id='search_form' class="form-inline">

            <div class="input-group">
                <select name="addr_id" class="form-control">
                    <option value="">选择地点</option>
                    {foreach $address as $k=>$v}
                    <option {if $addr_id==$v['id']} selected {/if} value="{$v['id']}">{$v['title']}</option>
                    {/foreach}
                </select>
            </div>
            <div class="input-group">
                <select name="dep_id" class="form-control">
                    <option value="">选择科室</option>
                    {foreach $dep as $k=>$v}
                    <option {if $dep_id==$v['id']} selected {/if} value="{$v['id']}">{$v['title']}</option>
                    {/foreach}
                </select>
            </div>
            <div class="input-group">
                <select name="type_id" class="form-control">
                    <option value="">选择类型</option>
                    {foreach $typeList as $k=>$v}
                    <option {if $type_id==$v['id']} selected {/if} value="{$v['id']}">{$v['title']}</option>
                    {/foreach}
                </select>
            </div>
            <div class="input-group" style="width: 200px">
                <span class="input-group-addon">月份</span>
                <input class="form-control dialog-datetime" id="endTime" name="month" type="text" data-date-format="yyyy-mm" value="{$month}" placeholder="" readonly/>
            </div>
            <div class="input-group">
            <span class="input-group-btn">
                <button class="btn-sm btn-primary" type="submit"  ><i class="fa fa-search"></i></button>
			</span>&nbsp;
                <span class="input-group-btn">
                     <button class="btn-sm btn-warning" type="reset" onclick="empty_search()"><i class="fa fa-undo"></i></button>
            </span>
                &nbsp;
                <span class="input-group-btn">
                        <button data-url="{:url('viewExport')}" title="导出" class="btn-sm btn-primary"  onclick="excel_download(this)" type="button" ><i class="fa fa-cloud-download"></i></button>
                    </span>
            </div>
        </form>
       </div>
    </div>
</div>
    <div class="ibox-content">
        <div id="charts1" style="height: 300px">

        </div>
    </div>
    <div class="ibox-content">
        <div id="charts2" style="height: 400px">

        </div>
    </div>
    <div class="ibox-content">
        <div id="charts3" style="height: 300px;">

        </div>
    </div>
    <div class="ibox-content">
        <div id="charts4" style="height: 300px;">

        </div>
    </div>
</div>
{/block}
{block name="script"}
<script src="/static/layDate-v5.0.9/laydate.js"></script>
<script src="/static/browser.js"></script>
<script src="/static/jquery.jqprint-0.3.js"></script>
<script src="/static/echarts.js"></script>
<script>
    $(function () {
        laydate.render({
            elem: '#startTime',
            trigger: 'click',
            theme: '#1d519c',
            type: 'year',
        });
        laydate.render({
            elem: '#endTime',
            trigger: 'click',
            theme: '#1d519c',
            type: 'month',

        });
    });
    function empty_search(){
        window.location.href = "{:url('WasteStatistics/view')}";
    }
    function printer(){
        $('#printer').jqprint();
    }
    //导出
    function excel_download(_self){
        var url = $(_self).attr('data-url');
        var param = $('#form-search').serialize();
        window.location.href = url+'?'+param;
    }

    option = {
        title:{
            text:"{$month}月各类型废弃物统计(kg)",
            left: 'center',//主副标题的水平位置
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        xAxis: {
            type: 'category',
            data: {:json_encode($data['name1'])},
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: {:json_encode($data['data1'])},
                type: 'bar'
            }
        ]
    };
    var myChart1 = echarts.init(document.getElementById('charts1'));
    myChart1.setOption(option);

    option = {
        title:{
            text:"{$month}月各类型废弃物比例",
            left: 'center',//主副标题的水平位置
        },
        legend: {
            left: 'left',
            x : '46%',
            y : '1%',
            orient : 'vertical',

        },
        series: [
            {
                type: 'pie',
                avoidLabelOverlap: false,
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    },
                    normal:{
                        label:{
                            show: true,
                            formatter: '{b}:{c}({d}%)'
                        },
                        labelLine :{show:true}
                    }
                },
                labelLine: {
                    show: false
                },
                data: {:json_encode($data['data2'])},
            }
        ]
    };
    var myChart2 = echarts.init(document.getElementById('charts2'));
    myChart2.setOption(option);

    option = {
        title:{
            text:"{$month}月废弃物各类型数据一览(kg)",
            left: 'center',//主副标题的水平位置
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: {:json_encode($data['name1'])},
            left: 'center',
            top:'10%'

        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },

        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: {:json_encode($data['name2'])}
        },
        yAxis: {
            type: 'value'
        },
        series: {:json_encode($data['data3'])}
    };
    var myChart3 = echarts.init(document.getElementById('charts3'));
    myChart3.setOption(option);

    option = {
        title:{
            text:"{$month}月科室前10废弃物各类型数据一览(kg)",
            left: 'center',//主副标题的水平位置
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: {:json_encode($data['name1'])},
            left: 'center',
            top:'10%'

        },
        grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
        },

    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: {:json_encode($data['name3'])}
    },
    yAxis: {
        type: 'value'
    },
    series: {:json_encode($data['data4'])}
    };
    var myChart4 = echarts.init(document.getElementById('charts4'));
    myChart4.setOption(option);
</script>
{/block}