CN-708 feat: 色块图开发-增加hover效果、增加热力legend

src/assets/css/components/views/charts2/linkBlock.scss

@@ -59,6 +59,37 @@
       }
     }
   }
+  .block-heat-legend {
+    display: flex;
+    padding-right: 20px;
+    justify-content: flex-end;
+    padding-top: 10px;
+
+    .legend__box {
+      display: flex;
+      flex-direction: column;
+      flex-basis: 220px;
+
+      .legend__value {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding-bottom: 5px;
+        font-size: 12px;
+        color: #353636;
+      }
+      .legend__color-piece {
+        width: 100%;
+        height: 13px;
+        background-image: linear-gradient(to right, #40537E, #FF005C);
+      }
+      .legend__desc {
+        font-size: 12px;
+        color: #353636;
+        padding-top: 5px;
+      }
+    }
+  }
 }
 .link-block__popper {
   background-color: #1F2B33 !important;

src/views/charts2/charts/linkMonitor/LinkBlock.vue

@@ -31,7 +31,16 @@
         </template>
       </el-popover>
     </div>
-    <div class="block-heat-legend"></div>
+    <div class="block-heat-legend">
+      <div class="legend__box">
+        <div class="legend__value">
+          <span>0</span>
+          <span>90%</span>
+        </div>
+        <div class="legend__color-piece"></div>
+        <div class="legend__desc">{{$t('linkMonitor.linkBlock.bandwidthUsage')}}</div>
+      </div>
+    </div>
   </div>
 </template>