From d01e7c05dca2a1945479c9bd0301571956c718d6 Mon Sep 17 00:00:00 2001
From: 13451294168 <2211316490@qq.com>
Date: Fri, 14 Jun 2024 17:16:19 +0800
Subject: [PATCH] 1.1

---
 poem/css/index.css |  47 ++-
 poem/index.html    | 890 +++++++++++++++++++++++----------------------
 2 files changed, 488 insertions(+), 449 deletions(-)

diff --git a/poem/css/index.css b/poem/css/index.css
index 0a9eace..56348e0 100644
--- a/poem/css/index.css
+++ b/poem/css/index.css
@@ -20,7 +20,7 @@
             float: left;
             width: 17.3%;
             height: 112%;
-            background: gold;
+            /* background: gold; */
         }
         /* 这是框的样式 */
             .main_top_left_top {
@@ -74,7 +74,7 @@
                     }
                     .main_top_left_bottom_bar .bar_num {
                         color: #0EFCFF;
-                        margin-left: 3%;
+                        margin-left: %;
                         -webkit-transform-origin-x: 0;
                             transform: scale(0.7);
                             -webkit-transform: scale(0.7);
@@ -105,19 +105,41 @@
                 .main_top_left_top_title {
                     text-align: center;
                     color: #0EFCFF;
-                    font-size: .75vw;
-                    padding-top: .2vw;
+                    font-size: 55px;
+                    padding-top: 50px;
                 }
+                /* 这是第一个框的样式*/
                 .main_top_left_top_con {
                     width: 92%;
                     height: 71%;
                     margin: auto;
-                    margin-top: 3%;
+                    margin-top: 16%;
                     color: white;
                     /* margin-left: 4%; */
                     /* text-indent: .5vw; */
-                    font-size: .7vw;
+                    font-size: 55px;
+                    /* letter-spacing: .15vw; */
+                }
+                /* 这是横线图 */
+                .main_top_left_top_con_aa {
+                    width: 92%;
+                    height: 71%;
+                    margin: auto;
+                    margin-top: 16%;
+                    color: white;
+                    margin-left: -80px;
+                    /* text-indent: .5vw; */
+                    font-size: 55px;
                     /* letter-spacing: .15vw; */
+                }
+                /* 这是饼状图的样式 */
+                .main_top_left_top_con_mas{
+                    width: 80%;
+                    height: 71%;
+                    margin-right: 100px;
+                    margin-top: 25%;
+                    /* margin-left: px; */
+                    font-size: .7vw;
                 }
                     .main_top_left_top_con span {
                         display: inline-block;
@@ -135,9 +157,11 @@
                             float: left;
                             width: 48%;
                             height: 100%;
-                            text-align: center;
+                            margin-top: 10px;
+                            /* 改变字体位置 */
                             background: #FD9133;
-                            font-size: .7vw;
+                            text-align: center;
+                            font-size: 55px;
                         }
                         .main_top_left_t_c_l_right,.main_top_left_t_c_r_right {
                             background: #F6D10E;
@@ -189,6 +213,7 @@
                             margin-top: -7%;
                         }
                     .main_top_left_top_con_list {
+                        font-size: 55px;
                         float: left;
                         height: 48%;
                         width: 32%;
@@ -264,8 +289,8 @@
             .main_top_middle_num_title {
                 float: left;
                 color: #0EFCFF;
-                font-size: 1.5vw;
-                margin-left: 13%;
+                font-size: 100px;
+                margin-left: 16%;
                 line-height: 4.5vw;
                 width: 18%;
                 margin-top: .5vw;
@@ -329,9 +354,11 @@
                             font-size: .8vw;
                             color: #0EFCFF;
                         }
+                        /* 这是中间两个饼状图的样式 */
                         .main_top_echarts_pie {
                             width: 100%;
                             height: 90%;
+                            margin-left:200px ;
                         }
         .main_top_right {
             float: right;
diff --git a/poem/index.html b/poem/index.html
index 4771829..db816c7 100644
--- a/poem/index.html
+++ b/poem/index.html
@@ -1,4 +1,3 @@
-<!--更多资源：https://gitee.com/iGaoWei/big-data-view -->
 <!DOCTYPE html>
 <html lang="en">
 
@@ -12,142 +11,143 @@
     <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 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_t_c_l_right">
-                                <span class="main_top_left_c_l_n main_top_left_c_l_n5">0</span>
-                                <p>隋代</p>
+                            <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>
-                        <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 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_t_c_r_right">
-                                <span class="main_top_left_c_l_n">0</span>
-                                <p>五代</p>
+                            <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">各朝代诗人数量</div>
+                        <div id="baseId" class="main_top_left_top_con_aa"></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">各朝代诗人数量</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="https://gitee.com/iGaoWei/big-data-view" target="blank">管理系统</a>
+                <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="https://gitee.com/iGaoWei/big-data-view" target="blank">管理系统</a>
                     <a class="title_admin" href="https://gitee.com/iGaoWei/big-data-view" target="blank">web网页</a> -->
-                </div>
-                <div class="main_top_middle_num_title">诗词总量：</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 class="main_top_middle_num_title">诗词总量：</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>
-                    <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 class="main_top_middle_num_list">
+                            <img src="./images/center_num.png">
+                            <p class="main_top_middle_num_list4">0</p>
                         </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">诗人-朝代</div>
-                    <div class="main_top_left_top_con">
-                        <div class="main_top_left_top_con_left">
-                            <span class="daysData">0</span>
-                            <p>宋代</p>
+                        <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_left_top_con_right">
-                            <span class="weekData">0</span>
-                            <p>金朝</p>
+                        <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_left_top_con_list">
-                            <span class="monthData">0</span>
-                            <p>元代</p>
+                        <div class="main_top_middle_num_list">
+                            <img src="./images/center_num.png">
+                            <p class="main_top_middle_num_list1">0</p>
                         </div>
-                        <div class="main_top_left_top_con_list">
-                            <span class="someThing">0</span>
-                            <p>明代</p>
+                    </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_left_top_con_list">
-                            <span class="policyData">0</span>
-                            <p>清代</p>
+                        <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_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 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">诗人-朝代</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_mas">
+                        </div>
                     </div>
                 </div>
             </div>
-        </div>
-        <!-- <div class="main_middle">
+            <!-- <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>
@@ -174,49 +174,57 @@
                 <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">经典诗句</div>
-                    <div class="main_bottom_t_l_con" style="top: -15px">
-                        <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">更多免费精品模板关注公众号“DreamCoders”</div>
-                                        <div class="main_bottom_t_list_time main_bottom_t_list_time1">2023/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">更多免费精品模板关注公众号“DreamCoders”</div>
-                                        <div class="main_bottom_t_list_time main_bottom_t_list_time2">2023/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">更多免费精品模板关注公众号“DreamCoders”</div>
-                                        <div class="main_bottom_t_list_time main_bottom_t_list_time3">2023/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">更多免费精品模板关注公众号“DreamCoders”</div>
-                                        <div class="main_bottom_t_list_time main_bottom_t_list_time4">2023/05/20</div>
-                                    </div>
-                                </li>
-                            </ul>
+            <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">经典诗句</div>
+                        <div class="main_bottom_t_l_con" style="top: -15px">
+                            <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">
+                                                更多免费精品模板关注公众号“DreamCoders”</div>
+                                            <div class="main_bottom_t_list_time main_bottom_t_list_time1">2023/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">
+                                                更多免费精品模板关注公众号“DreamCoders”</div>
+                                            <div class="main_bottom_t_list_time main_bottom_t_list_time2">2023/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">
+                                                更多免费精品模板关注公众号“DreamCoders”</div>
+                                            <div class="main_bottom_t_list_time main_bottom_t_list_time3">2023/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">
+                                                更多免费精品模板关注公众号“DreamCoders”</div>
+                                            <div class="main_bottom_t_list_time main_bottom_t_list_time4">2023/05/20
+                                            </div>
+                                        </div>
+                                    </li>
+                                </ul>
+                            </div>
                         </div>
                     </div>
-                </div>
-                <!-- -->
-                <div class="main_bottom_top_list">
-                    <img src="./images/main_bottopm_top2.png">
-                    <div class="main_bottom_t_l_title">1</div>
-                    <div id="departmentId" class="main_bottom_t_l_chart"></div>
-                </div>
-                <!-- <div class="main_bottom_top_list">
+                    <!-- -->
+                    <div class="main_bottom_top_list">
+                        <img src="./images/main_bottopm_top2.png">
+                        <div class="main_bottom_t_l_title">1</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" style="top: -15px">
@@ -250,37 +258,37 @@
                         </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">更多免费精品模板关注公众号</div>
-                    <div id="coverageId" class="main_bottom_b_con"></div>
                 </div>
-                <!-- <div class="main_bottom_b_middle1">
+                <div class="main_bottom_bottom">
+                    <div class="main_bottom_b_left">
+                        <img src="./images/main_bottom_bottom.png">
+                        <div class="main_bottom_b_title">更多免费精品模板关注公众号</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">
+                    <!-- <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">
+                    <!-- <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>
-</div>
 </body>
 
 </html>
 <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
- <script src="./js/echarts.js"></script>
+<script src="./js/echarts.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>
@@ -288,12 +296,12 @@
 <script type="text/javascript" src="js/app.js"></script>
 
 <script>
-    $(function() {
+    $(function () {
         function apiFn() {
             this.hostname = ""
         }
         apiFn.prototype = {
-            Init:function() {
+            Init: function () {
                 this.findCount()
                 this.otherDataFn()
                 this.baseInfo()
@@ -307,15 +315,15 @@
                 this.yearsNumFn()
                 this.contentFn()
                 this.publicNumFn()
-                setInterval(function() {
+                setInterval(function () {
                     numInit()
-                },6000)
+                }, 6000)
             },
-            findCount:function() {
+            findCount: function () {
 
             },
             // 其他数据展示
-            otherDataFn:function() {
+            otherDataFn: function () {
                 $(".daysData").addClass("counter-value").text("304")
                 $(".weekData").addClass("counter-value").text("2044")
                 $(".monthData").addClass("counter-value").text("909")
@@ -323,159 +331,159 @@
                 $(".policyData").addClass("counter-value").text("200")
             },
             // 基础信息
-            baseInfo:function() {
+            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},
-                    {name: "测试1", num: 200},
-                    {name: "测试2", num: 300},
-                    {name: "测试3", num: 400},
-                    {name: "测试4", num: 500},
-                    {name: "测试5", num: 300},
+                    { name: "测试1", num: 200 },
+                    { name: "测试2", num: 300 },
+                    { name: "测试3", num: 400 },
+                    { name: "测试4", num: 500 },
+                    { name: "测试5", num: 300 },
+                    { 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)'
+                    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)
                 }
-                lineY.push(data)
-                }
-                var option= {
-                title: {
-                    show: false
-                },
-                grid: {
-                    // borderWidth: 1,
-                    top: '10%',
-                    left: '30%',
-                    right: '10%',
-                    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
+                var option = {
+                    title: {
+                        show: false
                     },
-                    splitLine: {
-                    show: false
+                    grid: {
+                        // borderWidth: 1,
+                        top: '10%',
+                        left: '30%',
+                        right: '10%',
+                        bottom: '3%'
                     },
-                    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
+                    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: '40',
+                            },
+                            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
                         },
-                        formatter: function (a, b) {
-                            return a.name
+                        splitLine: {
+                            show: false
+                        },
+                        axisLabel: {
+                            show: false
                         }
-                    }
-                    }
-                }],
-                animationEasing: 'cubicOut'
+                    },
+                    series: [{
+                        name: '',
+                        type: 'bar',
+                        zlevel: 2,
+                        barWidth: '5px',
+                        data: lineY,
+                        animationDuration: 1500,
+                        label: {
+                            normal: {
+                                color: 'white',
+                                show: true,
+                                position: [-65, -2],
+                                textStyle: {
+                                    fontSize: 40
+                                },
+                                formatter: function (a, b) {
+                                    return a.name
+                                }
+                            }
+                        }
+                    }],
+                    animationEasing: 'cubicOut'
                 }
                 baseChart.setOption(option)
-                setInterval(function() {
+                setInterval(function () {
                     baseChart.clear()
                     baseChart.setOption(option)
-                },40000)
+                }, 40000)
             },
             // 问题反馈类型占比
-            questionFn:function() {
+            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},
+                    { 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})
@@ -490,18 +498,18 @@
                         trigger: 'item',
                         formatter: '{a} <br/>{b} : {c} ({d}%)'
                     },
-                    color:['#2E8CFF', '#FD9133','#37D2D4','#19CA88','#858FF8'],
+                    color: ['#2E8CFF', '#FD9133', '#37D2D4', '#19CA88', '#858FF8'],
                     legend: {
-                        itemWidth: 11,// 标志图形的长度
-                        itemHeight: 11,// 标志图形的宽度
+                        itemWidth: 50,// 标志图形的长度
+                        itemHeight: 50,// 标志图形的宽度
                         orient: 'vertical',
                         // left: 'right',
                         top: '15%',
-                        x: '50%',
+                        x: '90%',
                         data: datas,
                         textStyle: { //图例文字的样式
                             color: '#fff',
-                            fontSize: 8
+                            fontSize: 50,
                         },
                     },
                     series: [
@@ -509,33 +517,33 @@
                             name: '问题反馈',
                             type: 'pie',
                             radius: '75%',
-                            center: ['20%', '50%'],
+                            center: ['50%', '40%'],
                             animationDuration: 2500,
                             data: datas,
                             label: {
                                 normal: {
                                     position: 'inner',
-                                    show : false
+                                    show: false
                                 }
                             }
                         }
                     ]
                 };
                 questionChart.setOption(option)
-                setInterval(function() {
+                setInterval(function () {
                     questionChart.clear()
                     questionChart.setOption(option)
-                },8000)
+                }, 8000)
             },
             // 党务公开
-            publicityFn:function() {
+            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},
+                    { 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})
@@ -549,12 +557,13 @@
                         trigger: 'item',
                         formatter: '{a} <br/>{b} : {c} ({d}%)'
                     },
+
                     legend: {
-                        itemWidth: 12,// 标志图形的长度
-                        itemHeight: 12,// 标志图形的宽度
+                        itemWidth: 50,// 标志图形的长度
+                        itemHeight: 50,// 标志图形的宽度
                         orient: 'vertical',
                         // left: 'right',
-                        top: '5%',
+                        top: '1%',
                         bottom: '50%',
                         x: '45%',
                         textStyle: {
@@ -564,6 +573,10 @@
                         },
                         data: data,
                     },
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 50,
+                    },
                     series: [
                         // 主要展示层的
                         {
@@ -573,7 +586,7 @@
                             label: {
                                 normal: {
                                     position: 'inner',
-                                    show : false
+                                    show: false
                                 }
                             },
                             name: "XX公开数量",
@@ -614,44 +627,44 @@
                     ]
                 };
                 publicitChart.setOption(option)
-                setInterval(function() {
+                setInterval(function () {
                     publicitChart.clear()
                     publicitChart.setOption(option)
-                },6000)
+                }, 60000)
             },
             // 三务公开数量
-            threeTasksFn:function() {
+            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')
+                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))
+                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},
+                    { 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)
+                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 : {
+                    color: ['#38EB70', '#2E8CFF', '#0EFCFF', '#858FF8', '#FD9133', '#F7E270'],
+                    tooltip: {
                         trigger: 'item',
                         formatter: "{a} <br/>{b} : {c} ({d}%)"
                     },
                     legend: {
-                        itemWidth: 15,// 标志图形的长度
-                        itemHeight: 15,// 标志图形的宽度
+                        itemWidth: 50,// 标志图形的长度
+                        itemHeight: 50,// 标志图形的宽度
                         orient: 'vertical',
                         // left: 'right',
                         top: '10%',
@@ -659,53 +672,52 @@
                         x: '50%',
                         textStyle: {
                             color: '#fff',
-                            fontSize: 8,
-
+                            fontSize: 50,
                         },
                         data: data
                     },
-                    series :
-                        {
-                            name:'三务公开数量',
-                            type:'pie',
-                            animationDuration: 1500,
-                            radius: ['70%', '90%'],
-                            center: ['25%', '50%'],
-                            roseType : 'radius',
-                            label: {
-                                normal: {
-                                    position: 'inner',
-                                    show : false
-                                }
-                            },
-                            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() {
+                setInterval(function () {
                     threeTasksChart.clear()
                     threeTasksChart.setOption(option)
-                },4000)
+                }, 4000)
             },
             // 各部门苏木镇嘎查村公开占比
-            departmentFn:function() {
+            departmentFn: function () {
                 var dataArr = [
-                    {name: '测试11', value: 300},
-                    {name: '测试22', value: 500},
-                    {name: '测试33', value: 400},
-                    {name: '测试44', value: 350},
-                    {name: '测试55', value: 363},
+                    { 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)
-                    }
+                // 中间滚动数据展示
+                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 : {
+                    tooltip: {
                         trigger: 'item',
                         formatter: "{a} <br/>{b} : {c} ({d}%)"
                     },
@@ -719,7 +731,7 @@
                         x: '5%',
                         textStyle: {
                             color: '#fff',
-                            fontSize: 8,
+                            fontSize: 50,
 
                         },
                         data: data,
@@ -742,14 +754,14 @@
                             },
                             label: {
                                 normal: {
-                                    formatter: (params)=>{
+                                    formatter: (params) => {
                                         return params.name
                                     },
                                     borderWidth: 0,
                                     borderRadius: 4,
-                                    padding: [0,0],
+                                    padding: [0, 0],
                                     height: 20,
-                                    fontSize: 8,
+                                    fontSize: 50,
                                     align: 'center',
                                     color: '#0EFCFF',
                                 }
@@ -778,45 +790,45 @@
                     ]
                 };
                 departmentChart.setOption(option)
-                setInterval(function() {
+                setInterval(function () {
                     departmentChart.clear()
                     departmentChart.setOption(option)
-                },12000)
+                }, 12000)
             },
             // 办事指南
-            guideFn:function() {
+            guideFn: function () {
                 $(".main_bottom_t_l_main").jCarouselLite({
                     vertical: true,
-                    hoverPause:true,
+                    hoverPause: true,
                     visible: 4,
                     auto: 1000,
                     speed: 500
                 });
             },
             // 政策解读
-            policyFn:function() {
+            policyFn: function () {
                 $(".main_bottom_t_l_main2").jCarouselLite({
                     vertical: true,
-                    hoverPause:true,
+                    hoverPause: true,
                     visible: 4,
                     auto: 1000,
                     speed: 500
                 });
             },
             // 主要关注内容区域占比
-            coverageFn:function() {
+            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},
+                    { 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})
+                for (var i = 0; i < resArr.length; i++) {
+                    indicatorArr.push({ name: resArr[i].name, max: 900 })
                     numArr.push(resArr[i].value)
                 }
                 var data = [
@@ -903,20 +915,20 @@
                     }]
                 };
                 coverageChart.setOption(option)
-                setInterval(function() {
+                setInterval(function () {
                     coverageChart.clear()
                     coverageChart.setOption(option)
-                },10000)
+                }, 10000)
             },
             // 本年公开数量
-            yearsNumFn:function() {
+            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},
+                    { 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 = []
@@ -924,7 +936,7 @@
                 var danArr = []
                 var junArr = []
                 var zhenArr = []
-                for(var i = 0; i < resArr.length; i++) {
+                for (var i = 0; i < resArr.length; i++) {
                     nameArr.push(resArr[i].name)
                     caiArr.push(resArr[i].value)
                     cunArr.push(resArr[i].value)
@@ -933,15 +945,15 @@
                     zhenArr.push(resArr[i].value)
                 }
                 var yearsNumChart = echarts.init(document.getElementById('yearsNumId'));
-                var spNum = 5,_max=100;
+                var spNum = 5, _max = 100;
                 var y_data = nameArr.reverse();
-                var _datamax = [100,100,100,100,100,100,100,100,100,100,100,100],
+                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) {
+                _data4 = junArr.reverse();
+                _data5 = zhenArr.reverse();
+                var fomatter_fn = function (v) {
                     return (v.value / _max * 100).toFixed(0)
                 }
                 var _label = {
@@ -951,7 +963,7 @@
                         formatter: fomatter_fn,
                         textStyle: {
                             color: '#fff',
-                            fontSize: 8
+                            fontSize: 50,
                         }
                     }
                 };
@@ -970,7 +982,7 @@
                         borderWidth: 1,
                         textStyle: {
                             color: '#3c3c3c',
-                            fontSize: 16
+                            fontSize: 50
                         },
                         extraCssText: 'box-shadow: 0 0 5px rgba(0, 0, 0, 0.1)'
                     },
@@ -980,7 +992,7 @@
                         max: _max,
                         axisLabel: {
                             show: false,
-                            formatter: function(v) {
+                            formatter: function (v) {
                                 var _v = (v / _max * 100).toFixed(0);
                                 return _v == 0 ? _v : _v + '%';
                             }
@@ -999,7 +1011,7 @@
                     yAxis: [{
                         data: y_data,
                         axisLabel: {
-                            fontSize: 8,
+                            fontSize: 50,
                             color: 'rgba(255,255,255,.7)'
 
                         },
@@ -1102,18 +1114,18 @@
                     }]
                 };
                 yearsNumChart.setOption(option)
-                setInterval(function() {
+                setInterval(function () {
                     yearsNumChart.clear()
                     yearsNumChart.setOption(option)
-                },120000)
+                }, 120000)
             },
             // 关注内容区域占比
-            contentFn:function() {
+            contentFn: function () {
                 var resArr = [
-                    {name: '测试11', value: 30},
-                    {name: '测试22', value: 50},
-                    {name: '测试55', value: 33},
-                    {name: '测试66', value: 80},
+                    { name: '测试11', value: 30 },
+                    { name: '测试22', value: 50 },
+                    { name: '测试55', value: 33 },
+                    { name: '测试66', value: 80 },
                 ]
                 var nameArr = []
                 var caiArr = []
@@ -1121,7 +1133,7 @@
                 var danArr = []
                 var junArr = []
                 var zhenArr = []
-                for(var i = 0; i < resArr.length; i++) {
+                for (var i = 0; i < resArr.length; i++) {
                     nameArr.push(resArr[i].name)
                     caiArr.push(resArr[i].value)
                     cunArr.push(resArr[i].value)
@@ -1138,10 +1150,10 @@
                     legend: {
                         x: '35%',
                         y: '0%',
-                        data: ["财务","村务","党务","居务","政务"],
+                        data: ["财务", "村务", "党务", "居务", "政务"],
                         textStyle: {
                             color: "#fff",
-                            fontSize: 8
+                            fontSize: 50,
                         },
                         itemWidth: 10,
                         itemHeight: 10,
@@ -1154,7 +1166,7 @@
                             axisLabel: {
                                 interval: 0,
                                 textStyle: {
-                                    fontSize: 8,
+                                    fontSize: 50,
                                     color: 'rgba(255,255,255,.7)',
                                 }
                             },
@@ -1278,25 +1290,25 @@
                     ]
                 };
                 contentChart.setOption(option)
-                setInterval(function() {
+                setInterval(function () {
                     contentChart.clear()
                     contentChart.setOption(option)
-                },90000)
+                }, 90000)
             },
             // 巡察
-            publicNumFn:function() {
+            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},
+                    { 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++) {
+                for (var i = 0; i < resArr.length; i++) {
                     xunArr.push(resArr[i].value)
                     jingArr.push(resArr[i].value)
                     dateArr.push(resArr[i].name)
@@ -1429,14 +1441,14 @@
                     animationEasing: 'cubicOut'
                 };
                 publicNumChart.setOption(option)
-                setInterval(function() {
+                setInterval(function () {
                     publicNumChart.clear()
                     publicNumChart.setOption(option)
-                },60000)
+                }, 60000)
             }
 
         }
         var start = new apiFn()
         start.Init()
     })
-</script>
+</script>
\ No newline at end of file