CN-333 feat : Dashboard--dns 实时告警信息图表开发 以及CN-332的一些样式修改

src/assets/css/components/index.scss

@@ -40,6 +40,7 @@
 @import './views/charts/ChartTwoSituationStatistics';
 @import './views/charts/chartAlarmInfo';
 @import './views/chartHeader';
+@import './views/charts/chartMap';
 
 
 //@import '../chart';

src/assets/css/components/views/charts/chartMap.scss

@@ -0,0 +1,60 @@
+.cn-chart__map {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  .map-drawing {
+    flex: 1;
+  }
+  .map-chart__legends {
+    flex-basis: 116px;
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    padding: 0 30px;
+
+    .map-chart__legend {
+      padding-bottom: 5px;
+      flex-grow: 0;
+      flex-shrink: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      border: 1px solid #E0E6EF;
+      border-left-color: transparent;
+      border-right-color: transparent;;
+      cursor: pointer;
+
+      &:first-of-type {
+        border-left-color: #E0E6EF;
+      }
+      &:last-of-type {
+        border-right-color: #E0E6EF;
+      }
+      &.map-chart__legend--active {
+        border-color: #59ABFF;
+
+        .legend__value {
+          color: #1890FF;
+        }
+      }
+      .legend__circle-marker {
+        flex: 0 0 12px;
+        margin: 12px 0 8px 0;
+        width: 12px;
+        border-radius: 50%;
+      }
+      .legend__value {
+        font-size: 18px;
+        font-weight: bold;
+        color: #333333;
+      }
+      .legend__name {
+        padding: 0 10px;
+        color: #666666;
+        font-size: 12px;
+        text-align: center;
+      }
+    }
+  }
+}