diff --git a/hg-monitor-web-base/src/main/resources/static/src/controller/noticeIndex.js b/hg-monitor-web-base/src/main/resources/static/src/controller/noticeIndex.js
index eb86a47..7a02505 100644
--- a/hg-monitor-web-base/src/main/resources/static/src/controller/noticeIndex.js
+++ b/hg-monitor-web-base/src/main/resources/static/src/controller/noticeIndex.js
@@ -22,6 +22,7 @@ layui.define(['table', 'form', 'admin', 'layer', 'common','sessions', 'xmSelect'
         var accessToken = sessions.getToken()['access_token'];
         var noticeUserChart = echarts.init(document.getElementById('notice_chart_user'));
         var noticeTypeChart = echarts.init(document.getElementById('notice_chart_type'));
+        // var noticeUserChartNew = echarts.init(document.getElementById('notice_chart_user_new'));
 
         //回车搜索
         $('#notice_search_keyword').keydown(function (e) {
@@ -39,6 +40,9 @@ layui.define(['table', 'form', 'admin', 'layer', 'common','sessions', 'xmSelect'
             reloadData();
         });
 
+        $('#queryMore').on('click',function(){
+            queryData();
+        });
         form.render();
 
         getChartData();
@@ -350,6 +354,15 @@ layui.define(['table', 'form', 'admin', 'layer', 'common','sessions', 'xmSelect'
                         }
                     }
                 },
+                emphasis: {
+                    itemStyle: {
+                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                            { offset: 0, color: '#2378f7' },
+                            { offset: 0.7, color: '#2378f7' },
+                            { offset: 1, color: '#83bff6' }
+                        ])
+                    }
+                },
             }]
 
             var option = {
@@ -408,9 +421,23 @@ layui.define(['table', 'form', 'admin', 'layer', 'common','sessions', 'xmSelect'
                         }
                     }
                 }],
-                series: series
+                series: series,
+                dataZoom: [
+                    {
+                        type: 'inside'
+                    }
+                ],
             }
             echartObject.setOption(option)
+            const zoomSize = 6;
+            echartObject.on('click', function (params) {
+                echartObject.dispatchAction({
+                    type: 'dataZoom',
+                    startValue: xData[Math.max(params.dataIndex - zoomSize / 2, 0)],
+                    endValue:
+                        xData[Math.min(params.dataIndex + zoomSize / 2, yData.length - 1)]
+                });
+            });
         }
 
         //获取图表数据
@@ -448,6 +475,7 @@ layui.define(['table', 'form', 'admin', 'layer', 'common','sessions', 'xmSelect'
                     loadNoticeChart(noticeTypeChart,xData,yData)
                 }
             })
+
             $.ajax({
                 url: `${common.domainName}/api-web/notice/groupByUser`,
                 method: 'GET',
@@ -456,7 +484,8 @@ layui.define(['table', 'form', 'admin', 'layer', 'common','sessions', 'xmSelect'
                     if (res && res.map) {
                         var yData = res.map.countList;
                         var xData = res.map.userList;
-                        loadNoticeChart(noticeUserChart,xData,yData)
+                        //展示前20条数据 @Editor LH
+                        loadNoticeChart(noticeUserChart,xData.slice(0, 20), yData.slice(0, 20));
                     }
                 }
             })
@@ -466,5 +495,46 @@ layui.define(['table', 'form', 'admin', 'layer', 'common','sessions', 'xmSelect'
             getChartData();
             reloadTable();
         }
+        function queryData(){
+          var  $content = $('#more_info');
+            layer.open({
+                type: 1
+                , title: '人员分组统计' //不显示标题栏
+                , area: ["91%", "500px"]
+                , id: 'aaa' //设定一个id，防止重复弹出
+                , btn:['取消']
+                , content: $content.html()
+                , success: function (layero, index) {
+                    var where = {
+                        access_token:accessToken,
+                        keyword: $('#notice_search_keyword').val(),
+                        busId:  busId,
+                        resType: resType,
+                        isSend: $('#notice_search_isSend').val()
+                    };
+                    var noticeTypeChartNew = echarts.init(document.getElementById('notice_chart_type_new'));
+                    $.ajax({
+                        url: `${common.domainName}/api-web/notice/groupByUser`,
+                        method: 'GET',
+                        data: where,
+                        success: function (res) {
+                            if (res && res.map) {
+                                var yData = res.map.countList;
+                                var xData = res.map.userList;
+                                //展示前20条数据 @Editor LH
+                                loadNoticeChart(noticeTypeChartNew,xData, yData);
+                            }
+                        }
+                    })
+                }
+                , yes: function (index, layero) {
+                    layer.close(index);     //执行关闭
+                    // if (fn && fn()) {
+                    //     fn()
+                    //     layer.close(index); //如果设定了yes回调，需进行手工关闭
+                    // }
+                }
+            });
+        }
     });
 });
diff --git a/hg-monitor-web-base/src/main/resources/static/src/views/baseconfig/notice/index.html b/hg-monitor-web-base/src/main/resources/static/src/views/baseconfig/notice/index.html
index 3226369..b10a8c4 100644
--- a/hg-monitor-web-base/src/main/resources/static/src/views/baseconfig/notice/index.html
+++ b/hg-monitor-web-base/src/main/resources/static/src/views/baseconfig/notice/index.html
@@ -5,6 +5,9 @@
         padding: 2px 10px;
         background: #f6f6f6;
         margin: 0px 3px;
+        /*display: block;*/
+        /*float: left;*/
+
     }
 </style>
 
@@ -60,8 +63,9 @@
                     </div>
                 </div>
                 <div style="display: flex" class="layui-card-echart">
-                    <div style="flex-grow: 3;width: 66%!important;">
-                        <h5 class="lay-row-title">人员分组统计</h5>
+                    <div style="flex-grow: 3;width: 66%!important;" >
+                        <div class="lay-row-title" id="personTotal"> 人员分组统计 <div style=" float:right;"><button type="button"  style="color:#1e9fff"  id="queryMore">查看更多</button></div></div>
+
                         <div class="pie-chart" id="notice_chart_user"></div>
                     </div>
                     <div style="flex-grow: 1">
@@ -97,6 +101,13 @@
     </div>
     <textarea class="hide" id="noticeIndex-params">{{d}}</textarea>
 </article>
+<!--上传弹框-->
+<script id="more_info" type="text/html">
+    <div style="align:center;">
+        <div class="lay-row-title" > 人员分组统计 <div style=" float:right;"></div></div>
+        <div class="pie-chart" style="height: 350px" id="notice_chart_type_new"></div>
+    </div>
+</script>
 <script>
     var params = document.getElementById("noticeIndex-params").value;
     layui.use('noticeIndex', function (fn) {
@@ -107,3 +118,4 @@
         }
     });
 </script>
+