合并分支 'feature/branch_yx' 到 'main'

echarts 添加滚动条

查看合并请求 !3

energy-report/index.css

@@ -882,6 +882,7 @@ body {
 }
 .chart-desc-task-centerPro-list{
     width: 50%;
+    align-items: center;
 }
 .chart-centerPro-text {
     font-size: 18px;
@@ -1039,6 +1040,11 @@ body {
         display: flex;
         width: 100%;
     }
+    .content-item {
+        width: 15%;
+        padding-top: 17px;
+        text-align: center;
+    }
 }
 
 @media screen and (max-width: 768px){
@@ -1047,14 +1053,14 @@ body {
         flex-direction: column;
         /*width: 100%;*/
     }
-}
-
-.content-item {
+    .content-item {
         width: 15%;
-    padding-top: 17px;
         text-align: center;
+    }
 }
 
+
+
 .item-text1 {
     font-size: 14px;
     font-family: PingFang SC-Bold, PingFang SC;
@@ -1074,6 +1080,30 @@ body {
     margin-bottom: 10px;
 }
 
+@media screen and (min-width: 769px){
+    .content-left {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+        width: 74%;
+    }
+}
+
+@media screen and (max-width: 768px){
+    .content-left {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+        width: 100%;
+    }
+    .content-item-left-icon {
+        width: 120px;
+        height: 95px;
+    }
+}
+
 .content-item-m {
     display: flex;
     flex: 1;
@@ -1108,6 +1138,7 @@ body {
     }
 
     .item-r-text {
+        width: 100%;
         font-size: 14px;
         font-family: PingFang SC-Regular, PingFang SC;
         font-weight: 400;
@@ -1127,10 +1158,12 @@ body {
 }
 
 .timePeriod-legend {
+    display: flex;
     width: 100%;
     height: 20px;
     background: rgba(8, 16, 24, 0.27);
     padding-top: 20px;
+    justify-content: flex-end;
 }
 
 .timePeriod-legend2 {
@@ -1164,10 +1197,6 @@ body {
         flex-direction: column;
         height: auto;
     }
-    .echarts-title-content{
-        display: flex;
-        flex-direction: column;
-    }
     .echarts-title-top1{
         margin-left: 0;
     }
@@ -1189,7 +1218,8 @@ body {
     .chart-desc-text-left{
         width: 75%;
     }
-}@media screen and (max-width: 768px) {
+}
+@media screen and (max-width: 768px) {
     .energy-wrap .header {
         height: 8vh;
      }

energy-report/index.html

@@ -255,7 +255,8 @@
             <div class="avgMonthlyBox">
                 <div class="avgMonthlyBox-title">各时段生产企业 月度平均数(家)</div>
                 <div class="avgMonthlyBox-content">
-                    <img src="./assets/avgMonthlyIcon.svg"/>
+                    <div class="content-left">
+                        <img src="./assets/avgMonthlyIcon.svg" class="content-item-left-icon"/>
                         <div class="content-item-m">
                             <div class="content-item">
                                 <div class="item-text1">尖时</div>
@@ -274,6 +275,7 @@
                                 <div class="item-text2">205</div>
                             </div>
                         </div>
+                    </div>
                     <div class="content-item-r">
                         <img src="./assets/avgMonthlyLeft.svg"/>
                         <div class="item-r-text">
@@ -293,7 +295,7 @@
             </div>
             <div class="centerPro">
                 <div class="centerPro-left">
-                    <div class="timePeriod-legend2">
+                    <div class="timePeriod-legend">
                         <img src="./assets/legend.svg" class="timePeriod-legend-img"/>
                     </div>
                     <div id="repair-require6"></div>
@@ -334,7 +336,8 @@
                     各时段集中生产企业 月度平均数(家)
                 </div>
                 <div class="avgMonthlyBox-content">
-                    <img src="./assets/avgMonthlyIcon.svg"/>
+                    <div class="content-left">
+                        <img src="./assets/avgMonthlyIcon.svg" class="content-item-left-icon"/>
                         <div class="content-item-m">
                             <div class="content-item">
                                 <div class="item-text1">尖时</div>
@@ -353,6 +356,7 @@
                                 <div class="item-text2">205</div>
                             </div>
                         </div>
+                    </div>
                     <div class="content-item-r">
                         <img src="./assets/avgMonthlyLeft.svg"/>
                         <div class="item-r-text">
@@ -577,6 +581,30 @@
             option && ele.setOption({...option})
         }
 
+        let windowWidth = window.screen.width;
+        const getEchartsDataZoom = () => {
+            if (windowWidth > 768) {
+                return []
+            }
+            return [
+                { //y轴固定,让内容滚动
+                    type: 'slider',
+                    xAxisIndex: [0],
+                    show:true, //显示滚轴
+                    height:8, //设置滚轴的高度
+                    bottom:0, //设置滚轴在底部
+                    start: 0,
+                    end: 80,//设置X轴刻度之间的间隔(根据数据量来调整)
+                    zoomLock: true, //锁定区域禁止缩放(鼠标滚动会缩放,所以禁止)
+                    minValueSpan:0,//用于限制窗口大小的最小值（实际数值）。
+                    maxValueSpan:7,//用于限制窗口大小的最大值（实际数值）。
+                    realtime:true,//拖动时，是否实时更新系列的视图。如果设置为 false，则只在拖拽结束的时候更新
+                    showDetail: false,//即拖拽时候滚动条两侧不显示信息 默认true
+                    filterMode:'empty' // 溢出窗口数据隐藏
+                },
+            ]
+        }
+
         //用电趋势
         const getEcharts = () => {
             let option = {
@@ -1981,6 +2009,7 @@
                         barWidth: 18,
                     },
                 ],
+                dataZoom: getEchartsDataZoom(),
             };
             initEcharts("#timePeriod-barCharts-1", option);
         };
@@ -2057,6 +2086,7 @@
                         barWidth: 18,
                     },
                 ],
+                dataZoom: getEchartsDataZoom(),
             };
             initEcharts("#timePeriod-barCharts-3", option);
         };
@@ -2133,6 +2163,7 @@
                         barWidth: 18,
                     },
                 ],
+                dataZoom: getEchartsDataZoom(),
             };
             initEcharts("#repair-require6", option);
         };
@@ -2359,6 +2390,7 @@
                         type: "bar",
                     },
                 ],
+                dataZoom: getEchartsDataZoom(),
             };
             initEcharts('#month-power', option)
         }
@@ -2473,6 +2505,7 @@
                         },
                     },
                 ],
+                dataZoom: getEchartsDataZoom(),
             };
             initEcharts('#month-trend', option)
         }