颜色标识固定在上面，不要跟随滚动条滚动

src/components/CustomChart/index.vue

@@ -74,6 +74,6 @@ export default {
 </script>
 <style lang="less" scoped>
 .custom-chart {
-  height: 100% !important;
+  // height: 100% !important;
 }
 </style>

src/views/stationOperation/components/MapPane.vue

@@ -1173,8 +1173,7 @@ export default {
     right: 15px;
     width: calc(100% - 270px);
     height: 100%;
-    overflow: auto;
-    padding: 0 15px 10px;
+    padding: 0 0 10px 15px;
     border: 1px solid @borderColor;
     transition: width 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
 

src/views/stationOperation/components/RealTimeDataChart.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div style="width: 100%;height: 100%;overflow: auto;padding-top: 76px;">
     <!-- 图例 -->
     <div class="legend">
       <div
@@ -299,9 +299,16 @@ export default {
 
 <style lang="less" scoped>
 .legend {
-  margin: 32px 0;
+  width: 100%;
+  padding: 25px 0;
   display: flex;
   justify-content: center;
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  background: #022024;
+  z-index: 11;
 
   &-item {
     color: #ade6ee;