<%@ 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-3 col-md-3">
            <div class="ibox shortcut">
                <div class="ibox-title-noline">
                    <span>R&D人员全时当量</span>
                </div>
                <div class="ibox-content-noline">
                <div id="divChart1" style="width: 100%;height: 400px;"></div>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-3">
            <div class="ibox shortcut" >
                <div class="ibox-title-noline">
                    <span>人员全时当量占比</span>
                </div>
                <div class="ibox-content-noline">
                    <div id="divChart2" style="width: 100%;height: 400px;">
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-3">
            <div class="ibox shortcut">
                <div class="ibox-title-noline">
                    <span>科学家和工程师占比</span>
                </div>
                <div class="ibox-content-noline">
                    <div id="divChart3" style="width: 100%;height: 400px;">
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-3">
            <div class="ibox shortcut">
                <div class="ibox-title-noline">
                    <span>高技术产品出口占比</span>
                </div>
                <div class="ibox-content-noline">
                    <div id="divChart4" style="width: 100%;height: 400px;">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row hidden-print">
        <div class="col-lg-6 col-md-3">
            <div class="ibox shortcut">
                <div class="ibox-title-noline">
                    <span>万人专利授权数</span>
                </div>
                <div class="ibox-content-noline">
                    <div id="divChart5" style="width: 100%;height: 400px;"></div>
                </div>
            </div>
        </div>
        <div class="col-lg-6 col-md-3">
            <div class="ibox shortcut">
                <div class="ibox-title-noline">
                    <span>专利类比占比</span>
                </div>
                <div class="ibox-content-noline">
                    <div id="divChart6" style="width: 100%;height: 400px;"></div>
                </div>
            </div>
        </div>
    </div>


    <jsp:include page="../../../common/admin/body_post.jsp"></jsp:include>
    <script type="text/javascript">
        var myChart1 = echarts.init(document.getElementById('divChart1'));
        var myChart2 = echarts.init(document.getElementById('divChart2'));
        var myChart3 = echarts.init(document.getElementById('divChart3'));
        var myChart4 = echarts.init(document.getElementById('divChart4'));
        var myChart5 = echarts.init(document.getElementById('divChart5'));
        var myChart6 = echarts.init(document.getElementById('divChart6'));










        var renderFunc = function () {
            $.get('<%=basePath%>/admin/innovate/getRDpersonnel.action').done(function (data) {
                option1 = {
                    tooltip : {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        }
                    },
                    legend: {
                        data:data.name
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis : [
                        {
                            type : 'category',
                            boundaryGap : false,
                            data : data.dataYear
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value'
                        }
                    ],
                    series : [
                        {
                            name:'总量',
                            type:'line',
                            stack: '总量',
                            areaStyle: {normal: {}},
                            data:data.zong
                        },
                        {
                            name:'基础研究',
                            type:'line',
                            stack: '总量',
                            areaStyle: {normal: {}},
                            data:data.reads
                        },
                        {
                            name:'应用研究',
                            type:'line',
                            stack: '总量',
                            areaStyle: {normal: {}},
                            data:data.wifi
                        },
                        {
                            name:'试验发展',
                            type:'line',
                            stack: '总量',
                            areaStyle: {normal: {}},
                            data:data.siG
                        }
                    ]
                };
                myChart1.setOption(option1, true);
            })
            $.get('<%=basePath%>/admin/innovate/getRDpersonnel1.action').done(function (data) {
                option2 = {
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b}: {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        x: 'left',
                        data:['基础研究','应用研究','实验发展']
                    },
                    series: [
                        {
                            name:'占比值',
                            type:'pie',
                            radius: ['50%', '70%'],
                            avoidLabelOverlap: false,
                            label: {
                                normal: {
                                    show: false,
                                    position: 'center'
                                },
                                emphasis: {
                                    show: true,
                                    textStyle: {
                                        fontSize: '30',
                                        fontWeight: 'bold'
                                    }
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },


                            data:data.data


                        }
                    ]
                };
                myChart2.setOption(option2, true);
            })
            $.get('<%=basePath%>/admin/innovate/getTechnicalProducts.action').done(function (data) {
                option4 = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    legend: {
                        data:data.name
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: data.dataYear
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '高技术产品',
                            type: 'bar',
                            data: data.reads
                        },
                        {
                            name: '总出口',
                            type: 'bar',
                            stack: '广告',
                            data: data.wifi
                        }
                    ]
                };
                myChart4.setOption(option4, true);
            })
            $.get('<%=basePath%>/admin/innovate/getScientistsEngineers.action').done(function (data) {
                option3 = {
                    tooltip : {
                        trigger: 'axis'
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data : data.dataYear
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        name:"占比",
                        data: data.siG,
                        type: 'line',
                        areaStyle: {}
                    }]
                };


                myChart3.setOption(option3, true);
            })

            $.get('<%=basePath%>/admin/innovate/getPatentAuthorization1.action').done(function (data) {
                option5 = {
                    tooltip : {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        }
                    },
                    legend: {
                        data:data.names
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis : [
                        {
                            type : 'category',
                            boundaryGap : false,
                            data : data.dataYear
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value'
                        }
                    ],
                    series : [
                        {
                            name:'总量',
                            type:'line',
                            stack: '总量',
                            areaStyle: {normal: {}},
                            data:[data.siG[0]+data.wifi[0]+data.reads[0],data.siG[1]+data.wifi[1]+data.reads[1]]
                        },
                        {
                            name:'发明',
                            type:'line',
                            stack: '总量',
                            areaStyle: {normal: {}},
                            data:data.siG
                        },
                        {
                            name:'实用新型',
                            type:'line',
                            stack: '总量',
                            areaStyle: {normal: {}},
                            data:data.reads
                        },
                        {
                            name:'外观设计',
                            type:'line',
                            stack: '总量',
                            label: {
                                normal: {
                                    show: true,
                                    position: 'top'
                                }
                            },
                            areaStyle: {normal: {}},
                            data:data.wifi
                        }
                    ]
                };
                myChart5.setOption(option5, true);
            })


            $.get('<%=basePath%>/admin/innovate/getPatentAuthorization.action').done(function (data) {
                option6 = {
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b}: {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        x: 'left',
                        data:data.data.names
                    },
                    series: [
                        {
                            name:'占比值',
                            type:'pie',
                            radius: ['50%', '70%'],
                            avoidLabelOverlap: false,
                            label: {
                                normal: {
                                    show: false,
                                    position: 'center'
                                },
                                emphasis: {
                                    show: true,
                                    textStyle: {
                                        fontSize: '30',
                                        fontWeight: 'bold'
                                    }
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            data:data.data.list
                        }
                    ]
                };

                myChart6.setOption(option6, true);
            })
        };
        renderFunc();
        /*setInterval(renderFunc, 3000);*/
    </script>
</body>
</html>