杭州-通知查询-echars 拖动条优化

@@ -422,24 +422,125 @@ layui.define(['table', 'form', 'admin', 'layer', 'common','sessions', 'xmSelect'
                     }
                     }
                 }],
                 }],
                 series: series,
                 series: series,
+            }
+            echartObject.setOption(option)
+
+        }
+        /********************单独加载更多****************************/
+        function loadNoticeMoreChart(echartObject,xData,yData) {
+            var series = [{
+                name: '通知次数',
+                data: yData,
+                barWidth: 20,
+                type: 'bar',
+                label: {
+                    show: true,
+                    position: 'top',
+                    textStyle: {
+                        color: '#555'
+                    },
+                },
+                itemStyle: {
+                    normal: {
+                        color: (params) => {
+                            var colors = ['#b6c2ff', '#96edc1', '#fcb75b'];
+                            return colors[params.dataIndex % 3]
+                        }
+                    }
+                },
+                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 = {
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        type: 'shadow'
+                    }
+                },
+                grid: [{
+                    top: 20,
+                    bottom: 70,
+                    left: 30,
+                    right: 5
+                }],
+                xAxis: [{
+                    type: 'category',
+                    data: xData,
+                    axisLabel: {
+                        color: '#333',
+                        show: true,
+                        interval:0,
+                        rotate:15
+                    },
+                    axisLine: {
+                        lineStyle: {
+                            color: '#e7e7e7'
+                        }
+                    },
+                    axisTick: {
+                        lineStyle: {
+                            color: '#e7e7e7'
+                        }
+                    },
+                    zlevel: 1
+                }],
+                yAxis: [{
+                    type: 'value',
+                    gridIndex: 0,
+                    axisLabel: {
+                        color: '#333'
+                    },
+                    splitLine: {
+                        lineStyle: {
+                            type: 'dashed'
+                        }
+                    },
+                    axisLine: {
+                        lineStyle: {
+                            color: '#ccc'
+                        }
+                    },
+                    axisTick: {
+                        lineStyle: {
+                            color: '#ccc'
+                        }
+                    }
+                }],
+                series: series,
                 dataZoom: [
                 dataZoom: [
-                    {
-                        type: 'inside'
+                    { type: 'slider',
+                        show: true,
+                        xAxisIndex: [0],
+                        left: '1%',
+                        bottom: -5,
+                        start: 0,
+                        end: 50 //初始化滚动条
                     }
                     }
                 ],
                 ],
             }
             }
             echartObject.setOption(option)
             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)]
-                });
-            });
+            window.onresize=function(){
+                echartObject.resize();
+            }
+            // 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)]
+            //     });
+            // });
         }
         }
-
         //获取图表数据
         //获取图表数据
         function getChartData() {
         function getChartData() {
             var where = {
             var where = {
@@ -522,7 +623,7 @@ layui.define(['table', 'form', 'admin', 'layer', 'common','sessions', 'xmSelect'
                                 var yData = res.map.countList;
                                 var yData = res.map.countList;
                                 var xData = res.map.userList;
                                 var xData = res.map.userList;
                                 //展示前20条数据 @Editor LH
                                 //展示前20条数据 @Editor LH
-                                loadNoticeChart(noticeTypeChartNew,xData, yData);
+                                loadNoticeMoreChart(noticeTypeChartNew,xData, yData);
                             }
                             }
                         }
                         }
                     })
                     })

@@ -103,9 +103,9 @@
 </article>
 </article>
 <!--上传弹框-->
 <!--上传弹框-->
 <script id="more_info" type="text/html">
 <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 style="align:center;padding: 20px;height: 330px">
+        <div class="lay-row-title" lay-tips="灰色拖动条可以左右拉缩并拖动展示其它数据"> 人员分组统计 </div>
+        <div class="pie-chart" style="height: 100%" id="notice_chart_type_new"></div>
     </div>
     </div>
 </script>
 </script>
 <script>
 <script>