<!doctype html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link th:href="@{/visualization/css/th_yj.css}" rel="stylesheet"/>
    <script type="text/javascript" th:src="@{/visualization/js/jquery-3.3.1.min.js}"></script>
    <script type="text/javascript" th:src="@{/visualization/js/echarts.min.js}"></script>
    <script type="text/javascript" th:src="@{/visualization/js/jquery.min.js}"></script>
    <script type="text/javascript" th:src="@{/visualization/js/jquery.ba-resize.min.js}"></script>
    <script type="text/javascript" th:src="@{/visualization/js/echarts_div.js}"></script>
    <script type="text/javascript" th:src="@{/visualization/js/echarts-tooltip-carousel.js}"></script>
</head>
<body>
<div class="tk_tit">
    <input id="deptId" type="hidden" th:value="${deptId}">
    <span>[[${deptName}]]</span>
    <u class="tk_close" onclick="parent.closeFrame()">X</u>
</div>
<div class="tk_con clearfix">
    <div class="tk_jklb tk_bg fl">
        <i class="tk_x"><img style="width: 100%" th:src="@{/visualization/images/thqzj_tk2.png}"></i>
        <h1 style="padding-top: 10px;">
            接口列表
            <span class="dypc">接口调用频次</span>
        </h1>
        <div id="FontScroll">
            <ul class="jk_list line">
                <li class="list_div" th:each="info:${interfaceList}">
                    <i><img th:src="@{/visualization/images/thqzj_tk4.png}"/></i>
                    <span>[[${#strings.abbreviate(info.interfaceName,16)}]]</span>
                    <u style="float: right;color: rgb(40 177 243);text-decoration: none;font-size: 16px;">[[${info.count}]]</u>
                </li>
            </ul>
        </div>
    </div>
    <div class="tk_zs">
        <div class="tk_zs_tit" id="gjsjzl"><span>归集数据总量</span></div>
        <div class="d_bg"><img th:src="@{/visualization/images/thqzj_tk5.png}"/></div>
        <div class="s_bg"><img th:src="@{/visualization/images/thqzj_tk6.png}"/></div>
        <div class="b_yp"><img th:src="@{/visualization/images/thqzj_tk15.png}"/></div>
        <div class="s_txt">
            <h5>[[${shareCount.count}]]</h5>
            <p>前置机共享总数</p>
        </div>
        <div class="gjjks qzj_txt">
            <i><img th:src="@{/visualization/images/thqzj_tk11.png}"/></i>
            <span>市直共享接口数</span>
            <u>[[${shareCount.shareType1}]]<b>个</b></u>
        </div>
        <div class="gxjks qzj_txt">
            <i><img th:src="@{/visualization/images/thqzj_tk12.png}"/></i>
            <span>市直归集接口数</span>
            <u>[[${shareCount.shareType2}]]<b>个</b></u>
        </div>
        <div class="ssbjks qzj_txt">
            <i><img th:src="@{/visualization/images/thqzj_tk13.png}"/></i>
            <u>[[${shareCount.shareType3}]]<b>个</b></u>
            <span>省上报接口数</span>
        </div>
        <div class="sgxjks qzj_txt">
            <i><img th:src="@{/visualization/images/thqzj_tk14.png}"/></i>
            <u>[[${shareCount.shareType4}]]<b>个</b></u>
            <span>省共享接口数</span>
        </div>
    </div>
    <div class="jkzb2 tk_bg">
        <div class="con_tit clearfix">
            <div class="fl div_tit">接口占比</div>
            <div class="tit_date">
                <i></i>
                <select id="sub_pie" onchange="selectYear()">
                    <option selected value="">全年</option>
                    <option value="2023">2023年</option>
                    <option value="2022">2022年</option>
                    <option value="2021">2021年</option>
                    <option value="2020">2020年</option>
                </select>
            </div>
        </div>
        <div id="sub_pie_charts"></div>
        <div class="jkzb_txt" id="sub_pie_div">
            <div class="sgj jkzb_list">
                <!--<h3><i></i>市归集</h3>-->
                <h3><i></i>市共享</h3>
                <p><span>0</span><span>0%</span><b><i class="ss"></i>0</b></p>
            </div>
            <div class="sgx jkzb_list">
                <!--<h3><i></i>市共享</h3>-->
                <h3><i></i>市归集</h3>
                <p><span>0</span><span>0%</span><b><i class="ss"></i>0</b></p>
            </div>
            <div class="sgj2 jkzb_list">
                <!--<h3><i></i>省归集</h3>-->
                <h3><i></i>省上报</h3>
                <p><span>0</span><span>0%</span><b><i class="ss"></i>0</b></p>
            </div>
            <div class="sgx jkzb_list">
                <h3><i></i>省共享</h3>
                <p><span>0</span><span>0%</span><b><i class="ss"></i>0</b></p>
            </div>
        </div>
    </div>
    <div class="tk_bottom tk_bg fl">
        <div class="con_tit clearfix">
            <div class="fl div_tit2">共享应用分析</div>
        </div>
        <!--共享应用分析 饼图-->
        <div id="gjsj_bt"></div>
    </div>
    <div class="tk_bottom1 tk_bg fl">
        <div class="con_tit clearfix">
            <div class="fl div_tit2">接口申请数量月度统计</div>
            <div class="tit_date"><i></i>
                <select id="line" onchange="changeYear()">
                    <option selected value="2022">2022年</option>
                    <option value="2021">2021年</option>
                    <option value="2020">2020年</option>
                </select>
            </div>
        </div>
        <!--共享应用分析 饼图-->
        <div id="gjsj2"></div>
    </div>
    <div class="tk_bottom2 tk_bg fl">
        <div class="con_tit clearfix">
            <!--<div class="fl div_tit2">接口审批分析</div>-->
            <div class="fl div_tit2">审批分析</div>
        </div>
        <div id="jkspfx"></div>
    </div>
</div>
<script>
    let gjsjzl = "[[${guijiCount}]]";
    $(function () {
        //占比
        percent();
        //审批分析
        getJkspfx();
        //月度申请数量分析
        getYdsqsl();
        //共享应用分析-饼图
        ydsqsl_bt();
        //归集数据总量
        initGjsjzl();
    })
    function initGjsjzl() {
        let html = "";
        //步长
        let step = 1;
        let n = gjsjzl.length/step;
        for(let i=0;i<n;i++){
            let byte = gjsjzl.slice(i*step,(i+1)*step);
            html += "<u>"+byte+"</u>";
        }
        $("#gjsjzl").append(html);
    }
    /**共享应用分析  饼图**/
    function ydsqsl_bt() {
        $.post("/visualization/getCallNumByDept/"+$("#deptId").val(), function (res) {
            bingtu(res);
        });
    }

    /**接口占比**/
    function percent(year) {
        if (year == null) {
            // year = new Date().getFullYear();
            year = '';
        }
        $.post("/visualization/subPercent", {
            year: year,
            deptId: $("#deptId").val()
        }, function (res) {
            sub_jkzb(res.percent);
        });
    }

    /**占比选择年份方法**/
    function selectYear() {
        percent($("#sub_pie").val());
    }

    /**月度申请数量统计选择年份方法**/
    function changeYear() {
        getYdsqsl($("#line").val());
    }

    /**接口审批分析-数据交互方法**/
    /**接口审批分析改为审批分析**/
    function getJkspfx() {
        // $.post("/visualization/subJkspfx", {
        $.post("/visualization/subSpfx", {
            deptId: $("#deptId").val()
        }, function (res) {
            jkspfx(res);
        });
    }

    /**月度申请数量分析-数据交互方法**/
    function getYdsqsl(year) {
        if (year == null) {
            year = new Date().getFullYear();
        }
        $.post("/visualization/applyCount", {
            year: year,
            deptId: $("#deptId").val()
        }, function (res) {
            ydsqsl(res);
        });
    }

    /**接口占比-实例化方法**/
    function sub_jkzb(data) {
        let percent = new Array();
        percent.push({'shareTypeDict': 'share_type_1', 'shareType': '市直共享接口', 'count': 0, 'percent': 0});
        percent.push({'shareTypeDict': 'share_type_2', 'shareType': '市直归集接口', 'count': 0, 'percent': 0});
        percent.push({'shareTypeDict': 'share_type_3', 'shareType': '省上报接口', 'count': 0, 'percent': 0});
        percent.push({'shareTypeDict': 'share_type_4', 'shareType': '省共享接口', 'count': 0, 'percent': 0});
        for(let i = 0; i < percent.length; i++){
            for(let j = 0; j < data.length; j++){
                if(percent[i].shareTypeDict == data[j].shareTypeDict){
                    percent[i].shareType = data[j].shareType;
                    percent[i].count = parseInt(data[j].count);
                    percent[i].percent = parseInt(data[j].percent);
                }
            }
        }
        let trafficWay = [];
        let jsArr = [];
        let html = "";
        let classArr = ['sgj','sgx','sgj2','sgx2'];
        //把JSON格式处理为JSONArray并渲染
        if(percent.length>0){
            //渲染饼图
            for(let i=0;i<percent.length;i++){
                let js = {};
                js.name = percent[i].shareType;
                js.value = percent[i].count;
                jsArr.push(js);
                //组装页面元素
                html += '<div class="'+classArr[i]+' jkzb_list">';
                html += '<h3><i></i>'+percent[i].shareType+'</h3>';
                html += '<p><span>'+percent[i].count+'</span><span>'+percent[i].percent+'%</span></p>';
                html += '</div>';
            }
            trafficWay = jsArr;
            //渲染页面数据
            $("#sub_pie_div").html("");
            $("#sub_pie_div").append(html);
        }else{
            let html = '<div class="sgj jkzb_list">' +
                '	<h3><i></i>市归集</h3>' +
                '	<p><span>0</span><span>0%</span></p>' +
                '</div>' +
                '<div class="sgx jkzb_list">' +
                '	<h3><i></i>市共享</h3>' +
                '	<p><span>0</span><span>0%</span></p>' +
                '</div>' +
                '<div class="sgj2 jkzb_list">' +
                '	<h3><i></i>省归集</h3>' +
                '	<p><span>0</span><span>0%</span></p>' +
                '</div>' +
                '<div class="sgx2 jkzb_list">' +
                '	<h3><i></i>省共享</h3>' +
                '	<p><span>0</span><span>0%</span></p>' +
                '</div>';
            //渲染页面数据
            $("#sub_pie_div").html("");
            $("#sub_pie_div").append(html);
        }
        // 基于准备好的dom，初始化echarts实例
        var tootipTimer = null;
        var myChart1 = echarts.init(document.getElementById('sub_pie_charts'));
        var img = "data:image/png;base64,[encoded data, 8780 characters]"
        var nameArray = trafficWay.map(item => {
            return item.name
        })
        var data = [];
        var color = ['#ff3000', '#00cfff', '#006ced', '#ffe000', '#ffa800', '#ff5b00', '#ff3000', '#ff3000']
        var size = 120
        var left = 76
        for (var i = 0; i < trafficWay.length; i++) {
            data.push({
                value: trafficWay[i].value,
                name: trafficWay[i].name,
                itemStyle: {
                    normal: {
                        borderWidth: 5,
                        shadowBlur: 20,
                        borderColor: color[i],
                        shadowColor: color[i]
                    }
                }
            });
        }
        var seriesOption = [{
            name: '',
            type: 'pie',
            clockWise: false,
            // 适配给你写好了
            radius: [72, 76],
            width: size,
            height: size,
            center: ['51%', '50%'],
            left: left,
            top: "center",
            hoverAnimation: false,
            itemStyle: {
                normal: {
                    label: {
                        show: false,
                        position: 'outside',
                        color: '#ddd',
                        formatter: function (params) {
                            var percent = 0;
                            var total = 0;
                            for (var i = 0; i < trafficWay.length; i++) {
                                total += trafficWay[i].value;
                            }
                            percent = ((params.value / total) * 100).toFixed(0);
                            if (params.name !== '') {
                                return '接口占比：' + params.name + '\n' + '\n' + '占百分比：' + percent + '%';
                            } else {
                                return '';
                            }
                        },
                    },
                }
            },
            data: data
        }];
        option = {
            // backgroundColor: '#01132e',
            color: color,
            graphic: {
                elements: [{
                    type: "image",
                    z: 3,
                    style: {
                        image: img,
                        width: size,
                        height: size
                    },
                    left: left,
                    top: 'center',
                }]
            },
            legend: [{
                // icon: `path://M881.387 297.813c38.08 65.387 57.28 136.747 57.28 214.187s-19.094 148.8-57.28 214.187c-38.187 65.28-89.92 117.12-155.2 155.2S589.44 938.667 512 938.667s-148.8-19.094-214.187-57.28c-65.28-38.08-117.013-89.814-155.306-155.307C104.427 660.8 85.333 589.44 85.333 512c0-77.333 19.094-148.693 57.28-214.187 38.08-65.28 89.814-117.013 155.307-155.306C363.2 104.533 434.56 85.333 512 85.333c77.333 0 148.693 19.094 214.187 57.28 65.28 38.187 117.013 89.92 155.2 155.2z m-217.707-47.36C617.387 223.467 566.827 209.92 512 209.92s-105.387 13.547-151.68 40.533-82.987 63.68-109.973 109.974c-26.987 46.293-40.534 96.853-40.534 151.68s13.547 105.386 40.534 151.68c26.986 46.293 63.68 82.986 109.973 109.973 46.293 26.987 96.853 40.533 151.68 40.533s105.387-13.546 151.68-40.533c46.293-26.987 82.987-63.68 109.973-109.973 26.987-46.294 40.534-96.854 40.534-151.68s-13.547-105.387-40.534-151.68c-27.093-46.294-63.786-82.987-109.973-109.974z`,
                orient: 'vertical',
                // x: 'left',
                data: nameArray.slice(4, 8),
                left: '10%',
                top: 'center',
                itemWidth: 15,
                align: 'left',
                textStyle: {
                    color: "#fff"
                },
                itemGap: 20
            },
                {
                    // icon: `path://M881.387 297.813c38.08 65.387 57.28 136.747 57.28 214.187s-19.094 148.8-57.28 214.187c-38.187 65.28-89.92 117.12-155.2 155.2S589.44 938.667 512 938.667s-148.8-19.094-214.187-57.28c-65.28-38.08-117.013-89.814-155.306-155.307C104.427 660.8 85.333 589.44 85.333 512c0-77.333 19.094-148.693 57.28-214.187 38.08-65.28 89.814-117.013 155.307-155.306C363.2 104.533 434.56 85.333 512 85.333c77.333 0 148.693 19.094 214.187 57.28 65.28 38.187 117.013 89.92 155.2 155.2z m-217.707-47.36C617.387 223.467 566.827 209.92 512 209.92s-105.387 13.547-151.68 40.533-82.987 63.68-109.973 109.974c-26.987 46.293-40.534 96.853-40.534 151.68s13.547 105.386 40.534 151.68c26.986 46.293 63.68 82.986 109.973 109.973 46.293 26.987 96.853 40.533 151.68 40.533s105.387-13.546 151.68-40.533c46.293-26.987 82.987-63.68 109.973-109.973 26.987-46.294 40.534-96.854 40.534-151.68s-13.547-105.387-40.534-151.68c-27.093-46.294-63.786-82.987-109.973-109.974z`,
                    orient: 'vertical',
                    // x: 'left',
                    data: nameArray.slice(0, 4),
                    left: '10%',
                    top: 'center',
                    itemWidth: 15, show: false,
                    align: 'left',
                    textStyle: {
                        color: "#fff"
                    },
                    itemGap: 20
                }],
            tooltip: {
                show: true
            },
            toolbox: {
                show: false
            },
            series: seriesOption
        }
        if (option) {
            myChart1.setOption(option);
        }
        // 可调用clearLoop方法，清除定时器
        tootipTimer && tootipTimer.clearLoop();
        tootipTimer = null;
        // 调用轮播的方法
        tootipTimer = tools.loopShowTooltip(myChart1, option, {
            interval: 2000, // 轮播间隔时间
            loopSeries: true // 是否开启轮播循环
        });
    }

    /**接口审批分析-实例化方法**/
    function jkspfx(res) {
        // 接口审批分析
        let tootipTimer = null;
        // 基于准备好的dom，初始化echarts实例
        let jkspfx = echarts.init(document.getElementById('jkspfx'));
        var option = {
            //backgroundColor:'#323a5e',
            tooltip: {
                trigger: 'axis',
                axisPointer: { // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                left: '2%',
                right: '4%',
                bottom: '14%',
                top: '16%',
                containLabel: true
            },
            legend: {
                data: res.years, /**年份数组**/
                right: 10,
                top: 12,
                textStyle: {
                    color: "#fff"
                },
                itemWidth: 12,
                itemHeight: 10,
                // itemGap: 35
            },
            xAxis: {
                type: 'category',
                data: res.types, /**类别数组**/
                axisLine: {
                    lineStyle: {
                        color: 'white'

                    }
                },
                axisLabel: {
                    // interval: 0,
                    // rotate: 40,
                    textStyle: {
                        fontFamily: 'Microsoft YaHei'
                    }
                },
            },

            yAxis: {
                type: 'value',
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: 'white'
                    }
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: 'rgba(255,255,255,0.3)'
                    }
                },
                axisLabel: {}
            },
            "dataZoom": [{
                "show": true,
                "height": 12,
                "xAxisIndex": [
                    0
                ],
                bottom: '8%',
                "start": 10,
                "end": 90,
                handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
                handleSize: '110%',
                handleStyle: {
                    color: "#d3dee5",

                },
                textStyle: {
                    color: "#fff"
                },
                borderColor: "#90979c"
            }, {
                "type": "inside",
                "show": true,
                "height": 15,
                "start": 1,
                "end": 35
            }],
            series: [{
                name: res.years[0],
                type: 'bar',
                barWidth: '15%',
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: '#fccb05'
                        }, {
                            offset: 1,
                            color: '#f5804d'
                        }]),
                        barBorderRadius: 12,
                    },
                },
                data: res[res.years[0]]
            },
                {
                    name: res.years[1],
                    type: 'bar',
                    barWidth: '15%',
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#8bd46e'
                            }, {
                                offset: 1,
                                color: '#09bcb7'
                            }]),
                            barBorderRadius: 11,
                        }

                    },
                    data: res[res.years[1]]
                },
                {
                    name: res.years[2],
                    type: 'bar',
                    barWidth: '15%',
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#248ff7'
                            }, {
                                offset: 1,
                                color: '#6851f1'
                            }]),
                            barBorderRadius: 11,
                        }
                    },
                    data: res[res.years[2]]
                }]
        };
        if (option) {
            jkspfx.setOption(option);
        }
    }

    /**月度申请数量统计**/
    function ydsqsl(res) {
        //将数据处理为数组
        let title = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
        let _data = [];
        let _coords = [];
        if (res.length > 0) {
            for (let i = 0; i < res.length; i++) {
                _data.push(res[i]);
                let element = [];
                element.push(title[i]);
                element.push(res[i]);
                _coords.push(element);
            }
        }

        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('gjsj2'));
        var img = [
            'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABRCAYAAABFTSEIAAAACXBIWXMAAAsSAAALEgHS3X78AAAEp0lEQVR42u3cz4sjRRTA8W9Vd3Vn8mMmjj9WQWSRZQ+CsH+B7MnDIgiCd0E8CYJ/gOAIelo8ehUP/gF6WLw5/gMueFP2sIcF0dHd2Z1kknR11fOQZJJJMtlZd03H7HtQpNOTnpn+8Lrm1etmjIig8e/DKoECKqACKqCGAiqgAiqghgIqoAIqoIYCKqACKqCGAiqgAiqghgIqoAJudKTr+osZMNPvBUQBHwHsPF9fB9R0DeHMOQ6T6WOrhEzXBM4swDOL0M6CrArRVoq3t2dGUIb9fTvatg8ZZup1PDBgzPmy98mey6qfzjLz2WaWjEUZKEvGyi9nWyneMOvGIyFQo2Sbg4MUSChpU9IeTTUpJdsEajPZOJeJG5uBZj7rLLduWS5dGm6XNLEELOFUFj54ACJCaychkpDSASK3bwsXL0YgVpWJKwM0iy9Zy8HdGru7jvt3Pbu7w0wES7drTwAbjTHMGCsQcIAnYTC1/wRx0wEnl27JNgZI8HQ6Kc1mQq83RNzaMjPzXqDbjTQaJRFLxIyyMSxAXEkWrhrQzAAmo5HOjCQf7jflILxOkohL+aUPgV4vEGNJo+E5PAy02+UIMEwBxo0CPDP7Dg5SnEtpt1PA0e87XO25FOoh8IYIH2Y5b45RzGAQBiIltZoHxqMcjbksXAVgdc2EQMYzzzdotyeZWKuleULXJtwT4SODfC2QCWR+IF9KnjuX1Xbo99Op7LVE8iXlz0YBTk5SyLEEjo5OLuccEoFUvHfO+reuUPx4zftXAIcx1hdcF+/TvFab4A0Bs0VwqyhpVnkJT89/Q4DDQ0e77YCMwIUsFMeFZD856699URRvX4nxE4A/jbnxXp7v4Zw3ReGNSDHI8wFQjIafuoyn58L/fB6sth/Ybg9fez2TRC6QZcZYvgHsazF+MP7YCyLXcM7gvSXLDGBqYDg+NhwdmSpPoTrAkub0W+f4FSB1fDucIunMHSLpO8WAH0rSy8u+19MBCHB4OHzd2pI+CEUhpigEiN+l6WcdY252jLn5s7Wf472ImPcN8pUl/tEHoV4XWq1Ke4KrLmPsTA3oODpytFoOyJKSyzHyMSIxteWngMW5cSEdDJQUhTdZVgxOz3/+jFJm4+bA2e5JpNU6WZ4Fw99JwnWMKccwpeddP+B7GZTNUPKqybJy0O+Hs1YfMz9swwvpB8fbGDG0GuGkkK7V0hxSmZQpABI8l2z0v3sJf50qpAMJCd2qCulql3LD1lRGQjm7lEsDz0rkxTQOfiPPxUBcuJTbbhss/Y1eyi3NwsmKInmkZsKk5gtPUzNhvp11507CSy/X6XYStpvFudpZw1ZWIOF4Cq6SdtbKbioJyAhRTu3u9yMJXerN+ugvaQQsjcZ8Q3VnZwxlSDhe1lB9GjrSw5b+1avT8+Jw+979nNaOI6U3KpTrWAosxVQmygK4ld8X0ZtK/7eViExD7O1NQPb3T7fsl4/4sBpwYzPwjFbTo95Yl9l9Vd1YN1X/147HebSjary1AHyc5qc+XLQEQx9ve8Kg6xr6hKoCKqACKqCGAiqgAiqghgIqoAIqoIYCKqACKqCGAiqgAiqghgIq4JrHP8fEWV8FMTmOAAAAAElFTkSuQmCC',
            'image://data:image/png;base64,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',
            'image://data:image/png;base64,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',
            'image://data:image/png;base64,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',
        ]
        var data = [{
            /**_coords**/
            coords: _coords
        }]

        option = {
            // backgroundColor:'#011024',
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#0d3fb7'
                    }
                }
            },
            grid: {
                top: '15%',
                left: '5%',
                right: '5%',
                bottom: '15%',
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                axisLine: {
                    show: true,
                    color: '#0d3fb7'
                },
                axisLabel: {
                    color: '#fff'
                },
                splitLine: {
                    show: false
                },
                boundaryGap: true,
                /**title**/
                data: title,

            }],

            yAxis: [{
                type: 'value',
                min: 0,
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: 'rgba(255,255,255,0.1)'
                    }
                },
                axisLine: {
                    show: true,
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#d1e6eb',

                    },
                },
                axisTick: {
                    show: false,
                },
            }],
            series: [{
                name: '归集数据分析',
                type: 'line',
                smooth: false, //是否平滑
                showAllSymbol: true,
                symbol: 'circle',
                symbolSize: 10,
                lineStyle: {
                    normal: {
                        color: "#0d3fb7",
                        shadowColor: 'rgba(0, 0, 0, .3)',
                        shadowBlur: 0,
                        shadowOffsetY: 5,
                        shadowOffsetX: 5,
                    },
                },
                label: {
                    show: true,
                    position: 'top',
                    textStyle: {
                        color: '#fff'
                    }
                },
                itemStyle: {
                    color: "#0d3fb7",
                    borderColor: "#fff",
                    borderWidth: 3,
                    shadowColor: 'rgba(0, 0, 0, .3)',
                    shadowBlur: 0,
                    shadowOffsetY: 2,
                    shadowOffsetX: 2,
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgba(108,80,243,0.3)'
                        },
                            {
                                offset: 1,
                                color: 'rgba(108,80,243,0)'
                            }
                        ], false),
                        shadowColor: 'rgba(108,80,243, 0.9)',
                        shadowBlur: 20
                    }
                },
                data: _data
            },
                {
                    name: '滑行的光点',
                    type: 'lines',
                    coordinateSystem: 'cartesian2d',
                    symbolSize: 30,
                    polyline: true,
                    effect: {
                        show: true,
                        trailLength: 0,
                        symbol: "arrow",
                        period: 10, //光点滑动速度
                        symbolSize: 150,
                        symbol: img[0]
                    },
                    lineStyle: {
                        normal: {
                            width: 1,
                            opacity: 0.6,
                            curveness: 0.2
                        }
                    },
                    /**_data**/
                    data: data
                }
            ]
        };
        if (option) {
            myChart.setOption(option);
        }
    }

    /**共享应用分析  饼图 实例化方法**/
    function bingtu(data_) {
        var chartPie1 = echarts.init(document.getElementById('gjsj_bt'));
        function getEhartsOption(data) {
            var option;
            return option ={
                color:["#00ff00", "#fd6d08","#ff6aac","#0cc5fc","#7c3cff"],
                title : {
                    text: data.title,
                    subtext: data.subtext,
                    x:'center',
                    y: '70%',
                    textStyle: {
                        fontSize: 16,
                        color: '#fff'          // 主标题文字颜色
                    },
                    subtextStyle: {
                        fontSize: 20,
                        color: '#FFD600'          // 副标题文字颜色
                    }
                },
                series: [
                    {
                        name:'',
                        type:'pie',
                        center: ['50%', '40%'],
                        radius: ["50%", "60%"],
                        avoidLabelOverlap: false,
                        label: {
                            normal: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                show: true,
                                formatter:function(params, ticket, callback) {
                                    let name = params.data.name;
                                    let value = params.data.value;
                                    let str = name +'\n'+ value + '次';
                                    return str;
                                },
                                textStyle: {
                                    fontSize: '15',
                                    fontWeight: 'bold' ,
                                    color:'#fff'
                                }
                            }
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        data:data.data
                    }
                ]}
        }
        var parame1 ={
            data: data_
        }
        chartPie1.setOption(getEhartsOption(parame1));
        var i=0;
        chartPie1.dispatchAction({type: 'highlight',seriesIndex: 0,dataIndex: i});//设置默认选中高亮部分
        setInterval(function(){
            i++;
            if(i == 5){
                i=0
            }
            chartPie1.dispatchAction({
                type: 'downplay',
                seriesIndex: 0,
                dataIndex: i==0?4:i-1,
            });
            chartPie1.dispatchAction({type: 'highlight',seriesIndex: 0,dataIndex:i==5?0:i});//设置默认选中高亮部分
        },1000);
    }
</script>
<script>
    (function ($) {
        $.fn.FontScroll = function (options) {
            var d = {time: 3000, s: 'fontColor', num: 1}
            var o = $.extend(d, options);
            this.children('ul').addClass('line');
            var _con = $('.line').eq(0);
            var _conH = _con.height(); //滚动总高度
            var _conChildH = _con.children().eq(0).height();//一次滚动高度
            var _temp = _conChildH;  //临时变量
            var _time = d.time;  //滚动间隔
            var _s = d.s;  //滚动间隔
            _con.clone().insertAfter(_con);//初始化克隆
            //样式控制
            var num = d.num;
            var _p = this.find('li');
            var allNum = _p.length;
            _p.eq(num).addClass(_s);
            var timeID = setInterval(Up, _time);
            this.hover(function () {
                clearInterval(timeID)
            }, function () {
                timeID = setInterval(Up, _time);
            });
            function Up() {
                _con.animate({marginTop: '-' + _conChildH});
                //样式控制
                _p.removeClass(_s);
                num += 1;
                _p.eq(num).addClass(_s);

                if (_conH == _conChildH) {
                    _con.animate({marginTop: '-' + _conChildH}, "normal", over);
                } else {
                    _conChildH += _temp;
                }
            }

            function over() {
                _con.attr("style", 'margin-top:0');
                _conChildH = _temp;
                num = 1;
                _p.removeClass(_s);
                _p.eq(num).addClass(_s);
            }
        }
        var li_num = $('.jk_list li').length;
        if(li_num > 6){
            setInterval('AutoScroll("#FontScroll")', 3000);
        }else{
            return
        }
    })(jQuery);

    function AutoScroll(obj){
        $(obj).find("ul:first").animate({
            marginTop:"-45px"
        },500,function(){
            $(this).css({marginTop:"0px"}).find("li:first").appendTo(this);
        });
    }
</script>
</body>
</html>
