feat: 补充network overview - 折线图内容，及样式调整

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

@@ -1,8 +1,91 @@
 .line {
   height: 100%;
   width: 100%;
+  position: relative;
   #chart {
     width: 1288px;
     height: 340px;
   }
+  .line-select {
+    line-height: 24px;
+    top: 10px;
+    right: 20px;
+    display: flex;
+    position: absolute;
+    .line-select-metric,.line-select-reference-line {
+      display: flex;
+      span {
+        font-family: NotoSansSChineseRegular;
+        font-size: 12px;
+        color: #575757;
+        font-weight: 400;
+      }
+      .line-select__operation {
+        height: 24px;
+        margin-left: 3px;
+        background: #FFFFFF;
+        box-shadow: 0 2px 4px 0 rgba(51,51,51,0.10);
+        border-radius: 2px;
+        .option__select {
+          .el-input__inner {
+            width: 80px;
+            height: 24px;
+            text-align: left;
+            line-height: 24px;
+            color: #2C72C6;
+          }
+          .el-input__suffix {
+            display: flex;
+            .el-input__suffix-inner {
+              line-height: 24px;
+              .el-select__caret {
+                line-height: 24px;
+                width: 16px;
+                color: #575757;
+              }
+            }
+          }
+        }
+        .option__select.select-column {
+          .el-input__inner {
+            width: 86px;
+            padding-left: 8px;
+          }
+        }
+        .icon-group-divide {
+          height: 14px;
+          width: 1px;
+          background-color: $--color-primary;
+        }
+        i {
+          font-size: 12px;
+        }
+      }
+    }
+    .line-select-reference-line {
+      margin-left: 20px;
+    }
+  }
+  .line-value {
+    position: absolute;
+    top: 30px;
+    left: 27px;
+    height: 34px;
+    line-height: 34px;
+    display: flex;
+    .line-value-mpackets {
+      margin-right: 30px;
+      span:nth-of-type(1) {
+        font-size: 28px;
+        color: #353636;
+        font-weight: 500;
+        margin-right: 4px;
+      }
+      span:nth-of-type(2) {
+        font-size: 12px;
+        color: #575757;
+        font-weight: 400;
+      }
+    }
+  }
 }

src/utils/constants.js

@@ -193,6 +193,8 @@ export const chartColor1 = ['#E26154', '#E48E4D', '#E7B34E', '#DAC74B', '#88AF65
 
 export const chartColor2 = ['#86B565', '#A37FA7', '#EFAFC7', '#EFC48F', '#B4B1A8']
 
+export const chartColor3 = ['#00A7AB', '#7FA054', '#35ADDA', '#E48F3E', '#98709B']
+
 export const iso36112 = {
   [storageKey.iso36112Capital]: 'data/countriesWithCapital',
   [storageKey.iso36112WorldLow]: 'worldChinaLow',

src/views/charts2/charts/NetworkOverviewLine.vue

@@ -1,27 +1,39 @@
 <template>
   <div class="line">
     <div id="chart"></div>
-    <div>
+    <div class="line-select">
-      <div>
+      <div class="line-select-metric">
         <span>{{$t('network.metric')}}:</span>
-        <el-select v-model="value" class="m-2" placeholder="Select" size="small">
+        <div class="line-select__operation">
-        <el-option
+          <el-select
-            v-for="item in options"
+              size="mini"
-            :key="item.value"
+              v-model="options"
-            :label="item.label"
+              class="option__select select-topn"
-            :value="item.value"
+              placeholder=""
-        />
+              popper-class="option-popper"
-      </el-select></div>
+          >
-      <div>
+            <el-option v-for="item in options" :key="item.value" :label="item.label"></el-option>
+          </el-select>
+        </div>
+      </div>
+      <div class="line-select-reference-line">
         <span>{{$t('network.referenceLine')}}:</span>
-        <el-select v-model="value" class="m-2" placeholder="Select" size="small">
+        <div class="line-select__operation">
-          <el-option
+          <el-select
-              v-for="item in options"
+              size="mini"
-              :key="item.value"
+              v-model="options"
-              :label="item.label"
+              class="option__select select-topn"
-              :value="item.value"
+              placeholder=""
-          />
+              popper-class="option-popper"
-        </el-select>
+          >
+            <el-option v-for="item in options" :key="item.value" :label="item.label"></el-option>
+          </el-select>
+        </div>
+      </div>
+    </div>
+    <div class="line-value">
+      <div class="line-value-mpackets" v-for="item in mpackets" :key="item">
+        <span>{{item}} </span><span>mpackets/s</span>
       </div>
     </div>
   </div>
@@ -30,7 +42,7 @@
 <script>
 import * as echarts from 'echarts'
 import { stackedLineChartOption } from '@/views/charts2/charts/options/pie'
-
+import unitConvert from '@/utils/unit-convert'
 export default {
   name: 'NetworkOverviewLine',
   props: {
@@ -59,7 +71,9 @@ export default {
           value: 'Option5',
           label: 'Option5'
         }
-      ]
+      ],
+      mpackets: [42, 1, 2, 1, 12],
+      unitConvert
     }
   },
   methods: {

src/views/charts2/charts/options/pie.js

@@ -1,4 +1,4 @@
-import { chartColor1, chartColor2 } from '@/utils/constants'
+import { chartColor1, chartColor2, chartColor3 } from '@/utils/constants'
 
 export const pieChartOption1 = {
   color: chartColor1,
@@ -67,6 +67,7 @@ export const pieChartOption2 = {
   ]
 }
 export const stackedLineChartOption = {
+  color: chartColor3,
   tooltip: {
     trigger: 'axis',
     axisPointer: {
@@ -80,11 +81,12 @@ export const stackedLineChartOption = {
     type: 'scroll',
     top: 10,
     left: 20,
-    itemGap: 8,
+    itemGap: 57,
     itemWidth: 14,
     itemHeight: 14
   },
   grid: {
+    top: '30%',
     left: '1%',
     right: '2%',
     bottom: 15,