<%@ page import="org.apache.commons.lang.StringUtils" %>
<%@ page language="java" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8" %>
<%@ page isELIgnored="false" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
    String basePath = request.getContextPath();
%>
<!DOCTYPE html>
<html>
<head>
    <jsp:include page="../../../common/admin/head.jsp"></jsp:include>
    <link  rel="stylesheet" type="text/css" href="<%=basePath%>/resource/css/admin/home/index.css">
</head>
<body>
<jsp:include page="../../../common/admin/body_pre.jsp"></jsp:include>
<div class="row hidden-print">
    <div class="col-lg-12">
        <div class="ibox">
            <div class="ibox-title">
                <h2>路灯分布图</h2>
                <%--<ol class="breadcrumb">--%>
                    <%--<li>--%>
                        <%--<a href="javascript:void(0);" >生态环境</a>--%>
                    <%--</li>--%>
                    <%--<li class="active">--%>
                        <%--<strong>垃圾处理</strong>--%>
                    <%--</li>--%>
                <%--</ol>--%>
            </div>
        </div>
    </div>
</div>
<div class="row hidden-print">

    <div class="col-lg-4 col-md-4">
        <div class="ibox shortcut">
            <div class="ibox-title-noline">
                <span>主干道路灯分布图</span>
            </div>
            <div class="ibox-content-noline">
                <div id="divChart2" style="width: 100%;height: 800px;"></div>
            </div>
        </div>
    </div>

    <div class="col-lg-4 col-md-4">
        <div class="ibox shortcut">
            <div class="ibox-title-noline">
                <span>小街巷路灯分布图</span>
            </div>
            <div class="ibox-content-noline">
                <div id="divChart3" style="width: 100%;height: 800px;"></div>
            </div>
        </div>
    </div>

    <div class="col-lg- col-md-4">
        <div class="ibox shortcut">
            <div class="ibox-title-noline">
                <span>全市路灯构成图</span>
            </div>
            <div class="ibox-content-noline">
                <div id="divChart4" style="width: 100%;height: 800px;"></div>
            </div>
        </div>
    </div>
</div>


<jsp:include page="../../../common/admin/body_post.jsp"></jsp:include>
<script type="text/javascript" src="<%=basePath%>/resource/plugins/echarts/echarts-liquidfill.js"></script>
<script type="text/javascript">
    var myChart2 = echarts.init(document.getElementById('divChart2'));
    var myChart3 = echarts.init(document.getElementById('divChart3'));
    var myChart4 = echarts.init(document.getElementById('divChart4'));


    var renderFunc = function () {
        $.get('<%=basePath%>/admin/StreetLamp/getMainRoad.action').done(function (data) {

            myChart2.setOption({
                // title: {
                //     text: '世界人口总量',
                //     subtext: '数据来自网络'
                // },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: ['盏', '基']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    boundaryGap: [0, 0.01]
                },
                yAxis: {
                    type: 'category',
                    data: data.name
                },
                series: [
                    {
                        name: '盏',
                        type: 'bar',
                        data: data.calyx
                    },
                    {
                        name: '基',
                        type: 'bar',
                        data: data.base
                    }
                ]
            });

        });

        $.get('<%=basePath%>/admin/StreetLamp/getStreet.action').done(function (data) {

            myChart3.setOption({
                // title: {
                //     text: '世界人口总量',
                //     subtext: '数据来自网络'
                // },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: ['盏', '基']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    boundaryGap: [0, 0.01]
                },
                yAxis: {
                    type: 'category',
                    data: data.name
                },
                series: [
                    {
                        name: '盏',
                        type: 'bar',
                        data: data.calyx
                    },
                    {
                        name: '基',
                        type: 'bar',
                        data: data.base
                    }
                ]
            });

        });

        $.get('<%=basePath%>/admin/StreetLamp/getName.action').done(function (data) {
            // 填入数据
            debugger;
            myChart4.setOption({
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b}: {c} ({d}%)"
                },
                // legend: {
                //     orient: 'vertical',
                //     x: 'left',
                //     //data: ["服务业", "居民消费", "财政收入", "其他"]
                // },
                series: [
                    {
                        name:'占比',
                        type: 'pie',
                        radius : '65%',
                        center: ['50%', '50%'],
                        selectedMode: 'single',

                        data: data

                    }
                ]
            });
        });

       };
    renderFunc();
    /*setInterval(renderFunc, 3000);*/
</script>
</body>
</html>