shuochen
/
LargeScreenVisualization


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440
							<!--
访问地址：https://paycloud.vip

 -->
<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>可视化-数据中心</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/reset.css">
</head>
<body>
<div id="particles-js" class="main">
    <div class="main_con">
        <div class="main_top">
            <div class="main_top_left">
                <div class="main_top_left_top">
                    <img src="./images/main_top_left.png"/>
                    <div class="main_top_left_top_title">公开数据展示</div>
                    <div class="main_top_left_top_con">
                        <div class="main_top_left_top_con_list">
                            <span class="main_top_left_c_l_n main_top_left_c_l_n1">0</span>
                            <p>党务公开</p>
                        </div>
                        <div class="main_top_left_top_con_list">
                            <span class="main_top_left_c_l_n main_top_left_c_l_n2">0</span>
                            <p>政务公开</p>
                        </div>
                        <div class="main_top_left_top_con_list">
                            <span class="main_top_left_c_l_n main_top_left_c_l_n3">0</span>
                            <p>财务公开</p>
                        </div>
                        <div class="main_top_left_top_con_left">
                            <div class="main_top_left_t_c_l_left">
                                <span class="main_top_left_c_l_n main_top_left_c_l_n4">0</span>
                                <p>村务公开</p>
                            </div>
                            <div class="main_top_left_t_c_l_right">
                                <span class="main_top_left_c_l_n main_top_left_c_l_n5">0</span>
                                <p>居务公开</p>
                            </div>
                        </div>
                        <div class="main_top_left_top_con_right main_top_left_top_con_right2">
                            <div class="main_top_left_t_c_r_left">
                                <span class="main_top_left_c_l_n">0</span>
                                <p>占位公开</p>
                            </div>
                            <div class="main_top_left_t_c_r_right">
                                <span class="main_top_left_c_l_n">0</span>
                                <p>占位公开</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="main_top_left_top main_top_left_bottom">
                    <img src="./images/main_top_left.png"/>
                    <div class="main_top_left_top_title">XX信息员添加数据展示</div>
                    <div id="baseId" class="main_top_left_top_con"></div>
                </div>
            </div>
            <div class="main_top_middle">
                <div class="main_top_middle_top_title">
                    <img class="title_bg" src="./images/title_bg.png">
                    服务大数据可视化监管平台
                    <a class="title_web" href="" target="blank">管理系统</a>
                    <a class="title_admin" href="" target="blank">web网页</a>
                </div>
                <div class="main_top_middle_num_title">XX公开数量</div>
                <div class="main_top_middle_num">
                    <!-- <div class="main_top_middle_num_list">
                        <img src="./images/center_num.png">
                        <p class="main_top_middle_num_list6">0</p>
                    </div> -->
                    <div class="main_top_middle_num_list">
                        <img src="./images/center_num.png">
                        <p class="main_top_middle_num_list5">0</p>
                    </div>
                    <div class="main_top_middle_num_list">
                        <img src="./images/center_num.png">
                        <p class="main_top_middle_num_list4">0</p>
                    </div>
                    <div class="main_top_middle_num_list">
                        <img src="./images/center_num.png">
                        <p class="main_top_middle_num_list3">0</p>
                    </div>
                    <div class="main_top_middle_num_list">
                        <img src="./images/center_num.png">
                        <p class="main_top_middle_num_list2">0</p>
                    </div>
                    <div class="main_top_middle_num_list">
                        <img src="./images/center_num.png">
                        <p class="main_top_middle_num_list1">0</p>
                    </div>
                </div>
                <div class="main_top_middle_bottom">
                    <div class="main_top_middle_bottom_echarts">
                        <img src="./images/main_top_bottom.png">
                        <div class="main_top_echarts_con">
                            <div class="main_top_echarts_con_title">XX公开数量占比</div>
                            <div id="threeTasksId" class="main_top_echarts_pie"></div>
                        </div>
                    </div>
                    <div class="main_top_middle_bottom_echarts main_top_middle_bottom_echarts_right">
                        <img src="./images/main_top_bottom.png">
                        <div class="main_top_echarts_con">
                            <div class="main_top_echarts_con_title">XX公开数量占比</div>
                            <div id="publicityId" class="main_top_echarts_pie"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="main_top_left main_top_right">
                <div class="main_top_left_top">
                    <img src="./images/main_top_left.png"/>
                    <div class="main_top_left_top_title">XX数据展示</div>
                    <div class="main_top_left_top_con">
                        <div class="main_top_left_top_con_left">
                            <span class="daysData">0</span>
                            <p>今日公开</p>
                        </div>
                        <div class="main_top_left_top_con_right">
                            <span class="weekData">0</span>
                            <p>本周公开</p>
                        </div>
                        <div class="main_top_left_top_con_list">
                            <span class="monthData">0</span>
                            <p>本月公开</p>
                        </div>
                        <div class="main_top_left_top_con_list">
                            <span class="someThing">0</span>
                            <p>办事指南</p>
                        </div>
                        <div class="main_top_left_top_con_list">
                            <span class="policyData">0</span>
                            <p>政策解读</p>
                        </div>
                    </div>
                </div>
                <div class="main_top_left_top main_top_left_bottom">
                    <img src="./images/main_top_left.png"/>
                    <div class="main_top_left_top_title">XXXX数量类型占比</div>
                    <div id="questionId" class="main_top_left_top_con">
                    </div>
                </div>
            </div>
        </div>
        <div class="main_middle">
            <div class="main_middle_list">
                <img src="./images/main_middle.png">
                <div class="main_list_title main_list_title1">XXX镇</div>
                <span class="main_list_title_num main_list_title_num1">0</span>
            </div>
            <div class="main_middle_list">
                <img src="./images/main_middle.png">
                <div class="main_list_title main_list_title2">XX镇</div>
                <span class="main_list_title_num main_list_title_num2">0</span>
            </div>
            <div class="main_middle_list">
                <img src="./images/main_middle.png">
                <div class="main_list_title main_list_title3">XXXX</div>
                <span class="main_list_title_num main_list_title_num3">0</span>
            </div>
            <div class="main_middle_list">
                <img src="./images/main_middle.png">
                <div class="main_list_title main_list_title4">XXXX</div>
                <span class="main_list_title_num main_list_title_num4">0</span>
            </div>
            <div class="main_middle_list">
                <img src="./images/main_middle.png">
                <div class="main_list_title main_list_title5">XXXX</div>
                <span class="main_list_title_num main_list_title_num5">0</span>
            </div>
        </div>
        <div class="main_bottom">
            <div class="main_bottom_top">
                <div class="main_bottom_top_list">
                    <img src="./images/main_bottopm_top1.png">
                    <div class="main_bottom_t_l_title">XX指南</div>
                    <div class="main_bottom_t_l_con">
                        <div class="main_bottom_t_l_main">
                            <ul>
                                <li>
                                    <div class="main_bottom_t_l_main_list">
                                        <div class="main_bottom_t_list_title main_bottom_t_list_title1">精品可视化模板店里更多哦</div>
                                        <div class="main_bottom_t_list_time main_bottom_t_list_time1">2020/05/20</div>
                                    </div>
                                </li>
                                <li>
                                    <div class="main_bottom_t_l_main_list">
                                        <div class="main_bottom_t_list_title main_bottom_t_list_title2">精品可视化模板店里更多哦</div>
                                        <div class="main_bottom_t_list_time main_bottom_t_list_time2">2020/05/20</div>
                                    </div>
                                </li>
                                <li>
                                    <div class="main_bottom_t_l_main_list">
                                        <div class="main_bottom_t_list_title main_bottom_t_list_title3">精品可视化模板店里更多哦</div>
                                        <div class="main_bottom_t_list_time main_bottom_t_list_time3">2020/05/20</div>
                                    </div>
                                </li>
                                <li>
                                    <div class="main_bottom_t_l_main_list">
                                        <div class="main_bottom_t_list_title main_bottom_t_list_title4">精品可视化模板店里更多哦</div>
                                        <div class="main_bottom_t_list_time main_bottom_t_list_time4">2020/05/20</div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="main_bottom_top_list">
                    <img src="./images/main_bottopm_top2.png">
                    <div class="main_bottom_t_l_title">XXXX公开占比</div>
                    <div id="departmentId" class="main_bottom_t_l_chart"></div>
                </div>
                <div class="main_bottom_top_list">
                    <img src="./images/main_bottopm_top1.png">
                    <div class="main_bottom_t_l_title">政策XX</div>
                    <div class="main_bottom_t_l_con">
                        <div class="main_bottom_t_l_main2">
                            <ul>
                                <li>
                                    <div class="main_bottom_t_l_main_list">
                                        <div class="main_bottom_t_list_title main_bottom_polity_title1">精品可视化模板店里更多哦</div>
                                        <div class="main_bottom_t_list_time main_bottom_polity_time1">2020/05/20</div>
                                    </div>
                                </li>
                                <li>
                                    <div class="main_bottom_t_l_main_list">
                                        <div class="main_bottom_t_list_title main_bottom_polity_title2">精品可视化模板店里更多哦</div>
                                        <div class="main_bottom_t_list_time main_bottom_polity_time1">2020/05/20</div>
                                    </div>
                                </li>
                                <li>
                                    <div class="main_bottom_t_l_main_list">
                                        <div class="main_bottom_t_list_title main_bottom_polity_title3">精品可视化模板店里更多哦</div>
                                        <div class="main_bottom_t_list_time main_bottom_polity_time1">2020/05/20</div>
                                    </div>
                                </li>
                                <li>
                                    <div class="main_bottom_t_l_main_list">
                                        <div class="main_bottom_t_list_title main_bottom_polity_title4">精品可视化模板店里更多哦</div>
                                        <div class="main_bottom_t_list_time main_bottom_polity_time1">2020/05/20</div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="main_bottom_bottom">
                <div class="main_bottom_b_left">
                    <img src="./images/main_bottom_bottom.png">
                    <div class="main_bottom_b_title">主要关注XXXX占比</div>
                    <div id="coverageId" class="main_bottom_b_con"></div>
                </div>
                <div class="main_bottom_b_middle1">
                    <img src="./images/main_bootm_middle.png">
                    <div class="main_bottom_b_title">关注XXXX占比</div>
                    <div id="contentId" class="main_bottom_b_con main_bottom_b_con2"></div>
                </div>
                <div class="main_bottom_b_middle2">
                    <img src="./images/main_bootm_middle.png">
                    <div class="main_bottom_b_title">XXXX发布量</div>
                    <div id="publicNumId" class="main_bottom_b_con main_bottom_b_con2"></div>
                </div>
                <div class="main_bottom_b_right">
                    <img src="./images/main_bottom_bottom.png">
                    <div class="main_bottom_b_title">XXX公开数量</div>
                    <div id="yearsNumId" class="main_bottom_b_con"></div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

</html>
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="https://www.jq22.com/jquery/echarts-4.2.1.min.js"></script>
<script type="text/javascript" src="js/dataScoll.js"></script>
<script type="text/javascript" src="js/digitalScroll.js"></script>
<script type="text/javascript" src="js/jcarousellite.js"></script>
<script type="text/javascript" src="js/particles.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>

<script>
    $(function() {
        function apiFn() {
            this.hostname = ""
        }
        apiFn.prototype = {
            Init:function() {
                this.findCount()
                this.otherDataFn()
                this.baseInfo()
                this.questionFn()
                this.publicityFn()
                this.threeTasksFn()
                this.departmentFn()
                this.guideFn()
                this.policyFn()
                this.coverageFn()
                this.yearsNumFn()
                this.contentFn()
                this.publicNumFn()
                setInterval(function() {
                    numInit()
                },6000)
            },
            findCount:function() {

            },
            // 其他数据展示
            otherDataFn:function() {
                $(".daysData").addClass("counter-value").text("304")
                $(".weekData").addClass("counter-value").text("2044")
                $(".monthData").addClass("counter-value").text("909")
                $(".someThing").addClass("counter-value").text("980")
                $(".policyData").addClass("counter-value").text("200")
            },
            // 基础信息
            baseInfo:function() {


                var baseChart = echarts.init(document.getElementById('baseId'));
                var charts = [
                    {name: "测试1", num: 200},
                    {name: "测试2", num: 300},
                    {name: "测试3", num: 400},
                    {name: "测试4", num: 500},
                    {name: "测试5", num: 300},
                ]
                var color = ['rgba(100,255,249', 'rgba(100,255,249', 'rgba(100,255,249', 'rgba(100,255,249', 'rgba(100,255,249']

                let lineY = []
                for (var i = 0; i < charts.length; i++) {
                var x = i
                if (x > color.length - 1) {
                    x = color.length - 1
                }
                var data = {
                    name: charts[i].name,
                    color: color[x] + ')',
                    value: charts[i].num,
                    itemStyle: {
                    normal: {
                        show: true,
                        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                        offset: 0,
                        color: color[x] + ', 0.3)'
                        }, {
                        offset: 1,
                        color: color[x] + ', 1)'
                        }], false),
                        barBorderRadius: 10
                    },
                    emphasis: {
                        shadowBlur: 15,
                        shadowColor: 'rgba(0, 0, 0, 0.1)'
                    }
                    }
                }
                lineY.push(data)
                }
                var option= {
                title: {
                    show: false
                },
                grid: {
                    // borderWidth: 1,
                    top: '10%',
                    left: '30%',
                    right: '20%',
                    bottom: '3%'
                },
                color: color,
                yAxis: [{
                    type: 'category',
                    inverse: true,
                    axisTick: {
                    show: false
                    },
                    axisLine: {
                    show: false
                    },
                    axisLabel: {
                    show: false,
                    inside: false
                    },
                    data: charts.name
                }, {
                    type: 'category',
                    inverse: true,
                    axisLine: {
                    show: false
                    },
                    axisTick: {
                    show: false
                    },
                    axisLabel: {
                    show: true,
                    inside: false,
                    textStyle: {
                        color: '#38E1E1',
                        fontSize: '8',
                    },
                    formatter: function (val,index) {
                        return `${charts[index].num}`
                    }
                    },
                    splitArea: {
                    show: false
                    },
                    splitLine: {
                    show: false
                    },
                    data: charts
                }],
                xAxis: {
                    // type: 'value',
                    axisTick: {
                    show: false
                    },
                    axisLine: {
                    show: false
                    },
                    splitLine: {
                    show: false
                    },
                    axisLabel: {
                    show: false
                    }
                },
                series: [{
                    name: '',
                    type: 'bar',
                    zlevel: 2,
                    barWidth: '5px',
                    data: lineY,
                    animationDuration: 1500,
                    label: {
                    normal: {
                        color: 'white',
                        show: true,
                        position: [-65, -2],
                        textStyle: {
                        fontSize: 8
                        },
                        formatter: function (a, b) {
                            return a.name
                        }
                    }
                    }
                }],
                animationEasing: 'cubicOut'
                }
                baseChart.setOption(option)
                setInterval(function() {
                    baseChart.clear()
                    baseChart.setOption(option)
                },40000)
            },
            // 问题反馈类型占比
            questionFn:function() {
                var numArr = [
                    {name: '测试11', value: 300},
                    {name: '测试22', value: 500},
                    {name: '测试33', value: 400},
                    {name: '测试44', value: 350},
                    {name: '测试55', value: 363},
                    {name: '测试66', value: 800},
                ]
                // for(var i = 0; i < data.list.length; i++) {
                //     numArr.push({name: data.list[i].name,value: data.list[i].num})
                // }
                var datas = numArr
                var questionChart = echarts.init(document.getElementById('questionId'));
                var option = {
                    title: {
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    color:['#2E8CFF', '#FD9133','#37D2D4','#19CA88','#858FF8'],
                    legend: {
                        itemWidth: 11,// 标志图形的长度
                        itemHeight: 11,// 标志图形的宽度
                        orient: 'vertical',
                        // left: 'right',
                        top: '15%',
                        x: '50%',
                        data: datas,
                        textStyle: { //图例文字的样式
                            color: '#fff',
                            fontSize: 8
                        },
                    },
                    series: [
                        {
                            name: '问题反馈',
                            type: 'pie',
                            radius: '75%',
                            center: ['20%', '50%'],
                            animationDuration: 2500,
                            data: datas,
                            label: {
                                normal: {
                                    position: 'inner',
                                    show : false
                                }
                            }
                        }
                    ]
                };
                questionChart.setOption(option)
                setInterval(function() {
                    questionChart.clear()
                    questionChart.setOption(option)
                },8000)
            },
            // 党务公开
            publicityFn:function() {
                var dataArr = [
                    {name: '测试11', value: 300},
                    {name: '测试22', value: 500},
                    {name: '测试33', value: 400},
                    {name: '测试44', value: 350},
                    {name: '测试55', value: 363},
                    {name: '测试66', value: 800},
                ]
                // for(var i = 0; i < res.list.length; i++) {
                //     dataArr.push({name: res.list[i].name, value: res.list[i].num})
                // }

                var publicitChart = echarts.init(document.getElementById('publicityId'));
                var data = dataArr
                var option = {
                    color: ['#38EB70', '#F7E16C', '#0EFCFF', '#FD9133', '#4D92F2'],
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    legend: {
                        itemWidth: 12,// 标志图形的长度
                        itemHeight: 12,// 标志图形的宽度
                        orient: 'vertical',
                        // left: 'right',
                        top: '5%',
                        bottom: '50%',
                        x: '45%',
                        textStyle: {
                            color: '#fff',
                            fontSize: 8,

                        },
                        data: data,
                    },
                    series: [
                        // 主要展示层的
                        {
                            radius: ['70%', '90%'],
                            center: ['25%', '50%'],
                            type: 'pie',
                            label: {
                                normal: {
                                    position: 'inner',
                                    show : false
                                }
                            },
                            name: "XX公开数量",
                            data: data,
                        },
                        // 边框的设置
                        {
                            radius: ['50%', '55%'],
                            center: ['25%', '50%'],
                            type: 'pie',
                            label: {
                                normal: {
                                    show: false
                                },
                                emphasis: {
                                    show: false
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                },
                                emphasis: {
                                    show: false
                                }
                            },
                            animation: false,
                            tooltip: {
                                show: false
                            },
                            data: [{
                                value: 1,
                                itemStyle: {
                                    color: "rgba(250,250,250,0.3)",
                                },
                            }],
                        }
                    ]
                };
                publicitChart.setOption(option)
                setInterval(function() {
                    publicitChart.clear()
                    publicitChart.setOption(option)
                },6000)
            },
            // 三务公开数量
            threeTasksFn:function() {
                let names = "666666";
                if(6 - names.length > 0) {
                    for(g = 0; g < 6 - names.length; g++) {
                        $(".main_top_middle_num_list"+(6 - g)).text('0')
                    }
                }
                for(var j = 0; j < names.length; j++) {
                    $(".main_top_middle_num_list"+(names.length - j)).text(names.substr(j,1))
                }
                var dataArr = [
                    {name: '测试11', value: 300},
                    {name: '测试22', value: 500},
                    {name: '测试33', value: 400},
                    {name: '测试44', value: 350},
                    {name: '测试55', value: 363},
                    {name: '测试66', value: 800},
                ]
                for(var i = 1; i < dataArr.length; i++) {
                    $(".main_top_left_c_l_n"+i).addClass("counter-value").text(dataArr[i].value)
                }
                var threeTasksChart = echarts.init(document.getElementById('threeTasksId'));
                var data = dataArr
                var option = {
                    color: ['#38EB70', '#2E8CFF', '#0EFCFF', '#858FF8', '#FD9133','#F7E270'],
                    tooltip : {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        itemWidth: 15,// 标志图形的长度
                        itemHeight: 15,// 标志图形的宽度
                        orient: 'vertical',
                        // left: 'right',
                        top: '10%',
                        bottom: '50%',
                        x: '50%',
                        textStyle: {
                            color: '#fff',
                            fontSize: 8,

                        },
                        data: data
                    },
                    series :
                        {
                            name:'三务公开数量',
                            type:'pie',
                            animationDuration: 1500,
                            radius: ['70%', '90%'],
                            center: ['25%', '50%'],
                            roseType : 'radius',
                            label: {
                                normal: {
                                    position: 'inner',
                                    show : false
                                }
                            },
                            data:data
                        }
                };
                threeTasksChart.setOption(option)
                setInterval(function() {
                    threeTasksChart.clear()
                    threeTasksChart.setOption(option)
                },4000)
            },
            // 各部门苏木镇嘎查村公开占比
            departmentFn:function() {
                var dataArr = [
                    {name: '测试11', value: 300},
                    {name: '测试22', value: 500},
                    {name: '测试33', value: 400},
                    {name: '测试44', value: 350},
                    {name: '测试55', value: 363},
                ]
                    // 中间滚动数据展示
                    for(var j = 0; j < dataArr.length; j++) {
                        $(".main_list_title_num"+(j+1)).addClass("counter-value").text(dataArr[j].value)
                        $(".main_list_title"+(j+1)).text(dataArr[j].name)
                    }
                var departmentChart = echarts.init(document.getElementById('departmentId'));
                var data = dataArr
                var option = {
                    color: ['#FD9133', '#47F6A2', '#37D2D4', '#3493FF'],
                    tooltip : {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        itemWidth: 15,// 标志图形的长度
                        itemHeight: 15,// 标志图形的宽度
                        orient: 'vertical',
                        // left: 'right',
                        top: '30%',
                        bottom: '50%',
                        x: '5%',
                        textStyle: {
                            color: '#fff',
                            fontSize: 8,

                        },
                        data: data,
                    },
                    series: [
                        {
                            name: 'XXXX公开占比',
                            type: 'pie',
                            radius: ['50%', '70%'],
                            center: ['78%', '52%'],
                            labelLine: {
                                normal: {
                                    length: 12,
                                    lineStyle: {
                                        type: 'solid',
                                        color: '#0EFCFF'
                                    }
                                }

                            },
                            label: {
                                normal: {
                                    formatter: (params)=>{
                                        return params.name
                                    },
                                    borderWidth: 0,
                                    borderRadius: 4,
                                    padding: [0,0],
                                    height: 20,
                                    fontSize: 8,
                                    align: 'center',
                                    color: '#0EFCFF',
                                }
                            },
                            data: data
                        },
                        {
                            color: '#0EFCFF',
                            type: 'pie',
                            radius: ['55', '56'],
                            center: ['78%', '52%'],
                            data: [100],
                            label: {
                                show: false
                            }
                        },
                        {
                            type: 'pie',
                            radius: ['25', '26'],
                            center: ['78%', '52%'],
                            data: [100],
                            label: {
                                show: false
                            }
                        }
                    ]
                };
                departmentChart.setOption(option)
                setInterval(function() {
                    departmentChart.clear()
                    departmentChart.setOption(option)
                },12000)
            },
            // 办事指南
            guideFn:function() {
                $(".main_bottom_t_l_main").jCarouselLite({
                    vertical: true,
                    hoverPause:true,
                    visible: 4,
                    auto: 1000,
                    speed: 500
                });
            },
            // 政策解读
            policyFn:function() {
                $(".main_bottom_t_l_main2").jCarouselLite({
                    vertical: true,
                    hoverPause:true,
                    visible: 4,
                    auto: 1000,
                    speed: 500
                });
            },
            // 主要关注内容区域占比
            coverageFn:function() {
                var resArr = [
                    {name: '测试11', value: 300},
                    {name: '测试22', value: 500},
                    {name: '测试33', value: 400},
                    {name: '测试44', value: 350},
                    {name: '测试55', value: 363},
                    {name: '测试66', value: 800},
                ]
                var indicatorArr = []
                var numArr = []
                for(var i = 0; i < resArr.length; i++) {
                    indicatorArr.push({name: resArr[i].name,max: 900})
                    numArr.push(resArr[i].value)
                }
                var data = [
                    {
                        value: numArr,
                    }
                ]
                var coverageChart = echarts.init(document.getElementById('coverageId'));
                var option = {
                    legend: {
                        show: true,
                        icon: "circle",
                        bottom: 30,
                        center: 0,
                        itemWidth: 14,
                        itemHeight: 14,
                        itemGap: 21,
                        orient: "horizontal",
                        data: ['a', 'b'],
                        textStyle: {
                            fontSize: '70%',
                            color: '#0EFCFF'
                        },
                    },

                    radar: {
                        // shape: 'circle',
                        radius: '70%',
                        triggerEvent: true,
                        // type: 'default',
                        name: {
                            textStyle: {
                                color: '#39DCF4',
                                fontSize: '10',
                                // borderRadius: 3,
                                padding: [10, 10]
                            }
                        },
                        nameGap: '2',
                        indicator: indicatorArr,
                        splitArea: {
                            areaStyle: {
                                color: 'rgba(255,255,255,0)'
                            }
                        },
                        axisLine: { //指向外圈文本的分隔线样式
                            lineStyle: {
                                color: 'rgba(255,255,255,.2)'
                            }
                        },
                        splitLine: {
                            lineStyle: {
                                width: 1,
                                color: 'rgba(255,255,255,.2)'
                            }
                        },

                    },
                    series: [{
                        name: 'XXX区域占比',
                        type: 'radar',
                        animationDuration: 2000,
                        areaStyle: {
                            normal: {
                                color: {
                                    type: 'linear',
                                    opacity: 1,
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    color: '#2EEFAD'
                                }
                            }
                        },
                        symbolSize: 0,
                        lineStyle: {
                            normal: {
                                // color: 'rgba(252,211,3, 1)',
                                width: 0
                            }
                        },
                        data: data
                    }]
                };
                coverageChart.setOption(option)
                setInterval(function() {
                    coverageChart.clear()
                    coverageChart.setOption(option)
                },10000)
            },
            // 本年公开数量
            yearsNumFn:function() {
                var resArr = [
                    {name: '测试11', value: 30},
                    {name: '测试22', value: 50},
                    {name: '测试33', value: 40},
                    {name: '测试44', value: 35},
                    {name: '测试55', value: 36},
                    {name: '测试66', value: 80},
                ]
                var nameArr = []
                var caiArr = []
                var cunArr = []
                var danArr = []
                var junArr = []
                var zhenArr = []
                for(var i = 0; i < resArr.length; i++) {
                    nameArr.push(resArr[i].name)
                    caiArr.push(resArr[i].value)
                    cunArr.push(resArr[i].value)
                    danArr.push(resArr[i].value)
                    junArr.push(resArr[i].value)
                    zhenArr.push(resArr[i].value)
                }
                var yearsNumChart = echarts.init(document.getElementById('yearsNumId'));
                var spNum = 5,_max=100;
                var y_data = nameArr.reverse();
                var _datamax = [100,100,100,100,100,100,100,100,100,100,100,100],
                    _data1 = caiArr.reverse(),
                    _data2 = cunArr.reverse(),
                    _data3 = danArr.reverse();
                    _data4 = junArr.reverse();
                    _data5 = zhenArr.reverse();
                var fomatter_fn = function(v) {
                    return (v.value / _max * 100).toFixed(0)
                }
                var _label = {
                    normal: {
                        show: true,
                        position: 'inside',
                        formatter: fomatter_fn,
                        textStyle: {
                            color: '#fff',
                            fontSize: 8
                        }
                    }
                };
                var option = {
                    grid: {
                        containLabel: true,
                        left: 0,
                        top: 0,
                        right: 0,
                        bottom: 0
                    },
                    tooltip: {
                        show: true,
                        backgroundColor: '#fff',
                        borderColor: '#ddd',
                        borderWidth: 1,
                        textStyle: {
                            color: '#3c3c3c',
                            fontSize: 16
                        },
                        extraCssText: 'box-shadow: 0 0 5px rgba(0, 0, 0, 0.1)'
                    },
                    xAxis: {
                        splitNumber: spNum,
                        interval: _max / spNum,
                        max: _max,
                        axisLabel: {
                            show: false,
                            formatter: function(v) {
                                var _v = (v / _max * 100).toFixed(0);
                                return _v == 0 ? _v : _v + '%';
                            }
                        },
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            show: false
                        }

                    },
                    yAxis: [{
                        data: y_data,
                        axisLabel: {
                            fontSize: 8,
                            color: 'rgba(255,255,255,.7)'

                        },
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            show: false
                        }
                    }, {
                        show: false,
                        data: y_data,
                        axisLine: {
                            show: false
                        }
                    }],
                    series: [{
                        type: 'bar',
                        name: '财务',
                        stack: '2',
                        label: _label,
                        legendHoverLink: false,
                        barWidth: 7,
                        itemStyle: {
                            normal: {
                                color: '#FD9133'
                            },
                            emphasis: {
                                color: '#FD9133'
                            }
                        },
                        data: _data1
                    }, {
                        type: 'bar',
                        name: '村务',
                        stack: '2',
                        legendHoverLink: false,
                        barWidth: 20,
                        label: _label,
                        itemStyle: {
                            normal: {
                                color: '#2E8CFF'
                            },
                            emphasis: {
                                color: '#2E8CFF'
                            }
                        },
                        data: _data2
                    }, {
                        type: 'bar',
                        stack: '2',
                        name: '党务',
                        legendHoverLink: false,
                        barWidth: 20,
                        label: _label,
                        itemStyle: {
                            normal: {
                                color: '#37D2D4'
                            },
                            emphasis: {
                                color: '#37D2D4'
                            }
                        },
                        data: _data3
                    }, {
                        type: 'bar',
                        stack: '2',
                        name: '居务',
                        legendHoverLink: false,
                        barWidth: 20,
                        label: _label,
                        itemStyle: {
                            normal: {
                                color: '#19CA88'
                            },
                            emphasis: {
                                color: '#19CA88'
                            }
                        },
                        data: _data4
                    }, {
                        type: 'bar',
                        stack: '2',
                        name: '政务',
                        legendHoverLink: false,
                        barWidth: 20,
                        label: _label,
                        itemStyle: {
                            normal: {
                                color: '#0EFCFF'
                            },
                            emphasis: {
                                color: '#0EFCFF'
                            }
                        },
                        data: _data5
                    }]
                };
                yearsNumChart.setOption(option)
                setInterval(function() {
                    yearsNumChart.clear()
                    yearsNumChart.setOption(option)
                },120000)
            },
            // 关注内容区域占比
            contentFn:function() {
                var resArr = [
                    {name: '测试11', value: 30},
                    {name: '测试22', value: 50},
                    {name: '测试55', value: 33},
                    {name: '测试66', value: 80},
                ]
                var nameArr = []
                var caiArr = []
                var cunArr = []
                var danArr = []
                var junArr = []
                var zhenArr = []
                for(var i = 0; i < resArr.length; i++) {
                    nameArr.push(resArr[i].name)
                    caiArr.push(resArr[i].value)
                    cunArr.push(resArr[i].value)
                    danArr.push(resArr[i].value)
                    junArr.push(resArr[i].value)
                    zhenArr.push(resArr[i].value)
                }

                var contentChart = echarts.init(document.getElementById('contentId'));
                var option = {
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        x: '35%',
                        y: '0%',
                        data: ["财务","村务","党务","居务","政务"],
                        textStyle: {
                            color: "#fff",
                            fontSize: 8
                        },
                        itemWidth: 10,
                        itemHeight: 10,
                    },
                    calculable: true,
                    xAxis: [
                        {
                            type: 'category',
                            data: nameArr,
                            axisLabel: {
                                interval: 0,
                                textStyle: {
                                    fontSize: 8,
                                    color: 'rgba(255,255,255,.7)',
                                }
                            },
                            "axisTick": {       //y轴刻度线
                                "show": false
                            },
                            "axisLine": {       //y轴
                                "show": false,
                            },
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            scale: true,
                            name: '单位：%',
                            nameTextStyle: {
                                color: 'rgba(255,255,255,.7)',
                                fontSize: 8
                            },
                            max: 100,
                            min: 0,
                            boundaryGap: [0.2, 0.2],
                            "axisTick": {       //y轴刻度线
                                "show": false
                            },
                            "axisLine": {       //y轴
                                "show": false,
                            },
                            axisLabel: {
                                textStyle: {
                                    color: 'rgba(255,255,255,.8)',
                                    fontSize: 8
                                    // opacity: 0.1,
                                }
                            },
                            splitLine: {  //决定是否显示坐标中网格
                                show: true,
                                lineStyle: {
                                    color: ['#fff'],
                                    opacity: 0.2
                                }
                            },
                        },
                        {
                            type: 'value',
                            scale: true,
                            show: false,
                            // name: "销量额(万元)",
                            nameTextStyle: {
                                color: 'rgba(255,255,255,.2)',
                            },
                            max: 1,
                            min: 0,
                            boundaryGap: [0.2, 0.2],
                            "axisTick": {       //y轴刻度线
                                "show": false
                            },
                            "axisLine": {       //y轴
                                "show": false,
                            },
                            axisLabel: {
                                textStyle: {
                                    color: 'rgba(255,255,255,.2)',
                                    // opacity: 0.1,
                                }
                            },
                            splitLine: {  //决定是否显示坐标中网格
                                show: true,
                                lineStyle: {
                                    color: ['#fff'],
                                    opacity: 0.2
                                }
                            },

                        }
                    ],
                    color: ['#0EFCFF', '#FD9133'],
                    grid: {
                        left: '5%',
                        right: '1%',
                        top: '25%',
                        bottom: '15%'
                        // containLabel: true
                    },
                    series: [
                        {
                            barWidth: '10%',
                            name: '财务',
                            type: 'bar',
                            data: caiArr,
                        },
                        {
                            animationDuration: 2500,
                            barWidth: '20%',
                            name: '村务',
                            type: 'bar',
                            data: cunArr,
                        },
                        {
                            animationDuration: 2500,
                            barWidth: '20%',
                            name: '党务',
                            type: 'bar',
                            data: danArr,
                        },
                        {
                            animationDuration: 2500,
                            barWidth: '20%',
                            name: '居务',
                            type: 'bar',
                            data: junArr,
                        },
                        {
                            animationDuration: 2500,
                            barWidth: '20%',
                            name: '政务',
                            type: 'bar',
                            data: zhenArr,
                        }
                    ]
                };
                contentChart.setOption(option)
                setInterval(function() {
                    contentChart.clear()
                    contentChart.setOption(option)
                },90000)
            },
            // 巡察
            publicNumFn:function() {
                var resArr = [
                    {name: '测试11', value: 300},
                    {name: '测试22', value: 500},
                    {name: '测试33', value: 400},
                    {name: '测试44', value: 350},
                    {name: '测试55', value: 363},
                    {name: '测试66', value: 800},
                ]
                var xunArr = []
                var jingArr = []
                var dateArr = []
                for(var i = 0; i < resArr.length; i++) {
                    xunArr.push(resArr[i].value)
                    jingArr.push(resArr[i].value)
                    dateArr.push(resArr[i].name)
                }
                var publicNumChart = echarts.init(document.getElementById('publicNumId'));
                var option = {
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        x: '35%',
                        y: '0%',
                        data: ['巡察', '警示'],
                        textStyle: {
                            color: "#fff",
                            fontSize: 8
                        },
                        itemWidth: 10,
                        itemHeight: 10,
                    },
                    calculable: true,
                    xAxis: [
                        {
                            type: 'category',
                            data: dateArr,
                            axisLabel: {
                                interval: 0,
                                textStyle: {
                                    fontSize: 8,
                                    color: 'rgba(255,255,255,.7)',
                                }
                            },
                            "axisTick": {       //y轴刻度线
                                "show": false
                            },
                            "axisLine": {       //y轴
                                "show": false,
                            },
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            scale: true,
                            name: '单位：%',
                            nameTextStyle: {
                                color: 'rgba(255,255,255,.7)',
                                fontSize: 8
                            },
                            max: 1000,
                            min: 0,
                            boundaryGap: [0.2, 0.2],
                            "axisTick": {       //y轴刻度线
                                "show": false
                            },
                            "axisLine": {       //y轴
                                "show": false,
                            },
                            axisLabel: {
                                textStyle: {
                                    color: 'rgba(255,255,255,.8)',
                                    fontSize: 8
                                    // opacity: 0.1,
                                }
                            },
                            splitLine: {  //决定是否显示坐标中网格
                                show: true,
                                lineStyle: {
                                    color: ['#fff'],
                                    opacity: 0.2
                                }
                            },
                        },
                        {
                            type: 'value',
                            scale: true,
                            show: false,
                            // name: "销量额(万元)",
                            nameTextStyle: {
                                color: 'rgba(255,255,255,.2)',
                            },
                            max: 1,
                            min: 0,
                            boundaryGap: [0.2, 0.2],
                            "axisTick": {       //y轴刻度线
                                "show": false
                            },
                            "axisLine": {       //y轴
                                "show": false,
                            },
                            axisLabel: {
                                textStyle: {
                                    color: 'rgba(255,255,255,.2)',
                                    // opacity: 0.1,
                                }
                            },
                            splitLine: {  //决定是否显示坐标中网格
                                show: true,
                                lineStyle: {
                                    color: ['#fff'],
                                    opacity: 0.2
                                }
                            },

                        }
                    ],
                    color: ['#2E8CFF', '#38EB70'],
                    grid: {
                        left: '5%',
                        right: '1%',
                        top: '25%',
                        bottom: '15%'
                        // containLabel: true
                    },
                    series: [
                        {
                            animationDuration: 2500,
                            barWidth: '20%',
                            name: '巡察',
                            type: 'bar',
                            data: xunArr,
                        },
                        {
                            barWidth: '20%',
                            name: '警示',
                            type: 'bar',
                            data: jingArr,
                        }
                    ],
                    animationEasing: 'cubicOut'
                };
                publicNumChart.setOption(option)
                setInterval(function() {
                    publicNumChart.clear()
                    publicNumChart.setOption(option)
                },60000)
            }

        }
        var start = new apiFn()
        start.Init()
    })
</script>