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

src/views/charts2/charts/NetworkOverviewLine.vue

@@ -1,27 +1,39 @@
 <template>
   <div class="line">
     <div id="chart"></div>
-    <div>
-      <div>
+    <div class="line-select">
+      <div class="line-select-metric">
         <span>{{$t('network.metric')}}:</span>
-        <el-select v-model="value" class="m-2" placeholder="Select" size="small">
-        <el-option
-            v-for="item in options"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-        />
-      </el-select></div>
-      <div>
+        <div class="line-select__operation">
+          <el-select
+              size="mini"
+              v-model="options"
+              class="option__select select-topn"
+              placeholder=""
+              popper-class="option-popper"
+          >
+            <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">
-          <el-option
-              v-for="item in options"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-          />
-        </el-select>
+        <div class="line-select__operation">
+          <el-select
+              size="mini"
+              v-model="options"
+              class="option__select select-topn"
+              placeholder=""
+              popper-class="option-popper"
+          >
+            <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,