CN-626 feat: Dashboard - network overview - 折线图开发

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

@@ -14,7 +14,7 @@
         .cn-chart-tooltip-value.cn-chart-tooltip__color {
           font-size: 12px;
           color: #353636;
-          line-height: 12px;
+          line-height: 21px;
           font-weight: 600;
         }
       }
@@ -82,15 +82,28 @@
       margin-left: 20px;
     }
   }
+  .line-value-active {
+    position: absolute;
+    height: 3px;
+    border-radius: 4px 0 0 0;
+    background: #046ECA;
+    top: 0;
+    z-index: 1;
+    transition: all linear .2s;
+  }
   .line-value {
     position: absolute;
-    top: 20px;
+    top: 0;
-    left: 27px;
+    left: 0;
     display: flex;
+    .line-value-mpackets.mousemove-cursor {
+      border-top: 4px solid #D3D0D8;
+      z-index: 0;
+    }
     .line-value-mpackets {
-      margin-right: 30px;
+      cursor: pointer;
-      display: flex;
+      padding: 16px 0 0 20px;
-      flex-direction: column;
+      border-top: 4px solid transparent;
       span:nth-of-type(1) {
         font-family: Helvetica-Bold;
         font-size: 28px;
@@ -102,12 +115,6 @@
         color: #575757;
         font-weight: 400;
       }
-      .table-below-box--inactivated.line-value-mpackets-name {
-        color: #ccc;
-        div:nth-of-type(1) {
-          background-color: #ccc !important;
-        }
-      }
       .line-value-mpackets-name {
         position: relative;
         display: flex;
@@ -115,7 +122,7 @@
           flex: 1;
           padding-left: 19px;
         }
-        .total,.inbound,.outbound,.internal,.other {
+        .total,.inbound,.outbound,.internal,.through,.other {
           width: 14px;
           height: 14px;
           border-radius: 50%;
@@ -135,6 +142,9 @@
         .internal {
           background: #E48F3E;
         }
+        .through {
+          background: #9FBC1D;
+        }
         .other {
           background: #98709B;
         }
@@ -142,3 +152,33 @@
     }
   }
 }
+.el-select__popper.metric {
+  top: 218px !important;
+  .el-popper__arrow {
+    display: none;
+  }
+}
+.reference-line.el-select__popper {
+  left: 1545px !important;
+}
+.option-popper.el-select-dropdown {
+  .el-scrollbar {
+    .el-select-dropdown__wrap {
+      .el-scrollbar__view.el-select-dropdown__list {
+        .el-select-dropdown__item {
+          padding: 0 8px;
+          font-family: Helvetica;
+          height: 24px;
+          line-height: 24px;
+          font-size: 12px;
+          color: #575757;
+          font-weight: 400;
+        }
+        .el-select-dropdown__item:hover {
+          color: #2C72C6;
+          background: #fff;
+        }
+      }
+    }
+  }
+}

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

@@ -128,3 +128,9 @@
     }
   }
 }
+.metric-select.el-select__popper {
+  top: 27px !important;
+  .el-popper__arrow {
+    display: none;
+  }
+}

src/views/charts2/charts/NetworkOverviewTabs.vue

@@ -58,7 +58,7 @@
         <el-select v-model="metric"
                    class="option__select select-column"
                    placeholder=""
-                   popper-class="option-popper"
+                   popper-class="option-popper metric-select"
                    :popper-append-to-body="false"
                    size="mini">
           <el-option

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

@@ -1,6 +1,5 @@
-import { chartColor, chartColor1, chartColor2, chartColor3, chartColor4, unitTypes } from '@/utils/constants'
+import { chartColor, chartColor1, chartColor2, chartColor3, unitTypes } from '@/utils/constants'
 import unitConvert from '@/utils/unit-convert'
-import * as echarts from 'echarts'
 import { axisFormatter } from '@/views/charts/charts/tools'
 
 export const pieChartOption1 = {
@@ -111,7 +110,6 @@ export const pieChartOption2 = {
     }
   ]
 }
-const sizes = [3, 6, 8, 9, 10]
 export const stackedLineChartOption = {
   color: chartColor3,
   tooltip: {
@@ -156,191 +154,12 @@ export const stackedLineChartOption = {
     {
       type: 'line',
       symbol: 'circle',
+      stack: 'network.total',
       smooth: true,
-      symbolSize: function (value, params) {
-        return symbolSizeSortChange(0, value[0])
-      },
       showSymbol: false,
       emphasis: {
         focus: 'series'
       },
-      lineStyle: {
-        color: chartColor3[0],
-        width: 1
-      },
-      itemStyle: {
-        emphasis: {
-          borderColor: chartColor4[0],
-          borderWidth: 2,
-          shadowColor: chartColor4[0],
-          shadowBlur: sizes[0] + 2
-        }
-      },
-      areaStyle: {
-        opacity: 0.1,
-        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-          {
-            offset: 0,
-            color: chartColor3[0]
-          },
-          {
-            offset: 1,
-            color: chartColor3[0]
-          }
-        ])
-      },
-      data: []
-    },
-    {
-      type: 'line',
-      symbol: 'circle',
-      smooth: true,
-      symbolSize: function (value, params) {
-        return symbolSizeSortChange(1, value[0])
-      },
-      showSymbol: false,
-      emphasis: {
-        focus: 'series'
-      },
-      lineStyle: {
-        color: chartColor3[1],
-        width: 1
-      },
-      itemStyle: {
-        emphasis: {
-          borderColor: chartColor4[1],
-          borderWidth: 2,
-          shadowColor: chartColor4[1],
-          shadowBlur: sizes[1] + 2
-        }
-      },
-      areaStyle: {
-        opacity: 0.1,
-        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-          {
-            offset: 0,
-            color: chartColor3[1]
-          },
-          {
-            offset: 1,
-            color: chartColor3[1]
-          }
-        ])
-      },
-      data: []
-    },
-    {
-      type: 'line',
-      symbol: 'circle',
-      smooth: true,
-      symbolSize: function (value, params) {
-        return symbolSizeSortChange(2, value[0])
-      },
-      showSymbol: false,
-      emphasis: {
-        focus: 'series'
-      },
-      lineStyle: {
-        color: chartColor3[2],
-        width: 1
-      },
-      itemStyle: {
-        emphasis: {
-          borderColor: chartColor4[2],
-          borderWidth: 2,
-          shadowColor: chartColor4[2],
-          shadowBlur: sizes[2] + 2
-        }
-      },
-      areaStyle: {
-        opacity: 0.1,
-        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-          {
-            offset: 0,
-            color: chartColor3[2]
-          },
-          {
-            offset: 1,
-            color: chartColor3[2]
-          }
-        ])
-      },
-      data: []
-    },
-    {
-      type: 'line',
-      symbol: 'circle',
-      smooth: true,
-      symbolSize: function (value, params) {
-        return symbolSizeSortChange(3, value[0])
-      },
-      showSymbol: false,
-      emphasis: {
-        focus: 'series'
-      },
-      lineStyle: {
-        color: chartColor3[3],
-        width: 1
-      },
-      itemStyle: {
-        emphasis: {
-          borderColor: chartColor4[3],
-          borderWidth: 2,
-          shadowColor: chartColor4[3],
-          shadowBlur: sizes[3] + 2
-        }
-      },
-      areaStyle: {
-        opacity: 0.1,
-        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-          {
-            offset: 0,
-            color: chartColor3[3]
-          },
-          {
-            offset: 1,
-            color: chartColor3[3]
-          }
-        ])
-      },
-      data: []
-    },
-    {
-      type: 'line',
-      symbol: 'circle',
-      smooth: true,
-      symbolSize: function (value, params) {
-        return symbolSizeSortChange(4, value[0])
-      },
-      showSymbol: false,
-      emphasis: {
-        focus: 'series'
-      },
-      lineStyle: {
-        color: chartColor3[4],
-        width: 1
-      },
-      itemStyle: {
-        emphasis: {
-          borderColor: chartColor4[4],
-          borderWidth: 2,
-          shadowColor: chartColor4[4],
-          shadowBlur: sizes[4] + 2
-        }
-      },
-      areaStyle: {
-        opacity: 0.1,
-        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-          {
-            offset: 0,
-            color: chartColor3[4]
-          },
-          {
-            offset: 1,
-            color: chartColor3[4]
-          }
-        ])
-      },
       data: []
     }
   ]
@@ -390,13 +209,15 @@ function symbolSizeSortChange (index, time) {
   const inboundData = stackedLineChartOption.series[1].data.find(t => t[0] === time)
   const outboundData = stackedLineChartOption.series[2].data.find(t => t[0] === time)
   const internalData = stackedLineChartOption.series[3].data.find(t => t[0] === time)
-  const otherData = stackedLineChartOption.series[4].data.find(t => t[0] === time)
+  const throughData = stackedLineChartOption.series[4].data.find(t => t[0] === time)
+  const otherData = stackedLineChartOption.series[5].data.find(t => t[0] === time)
   totalData[2] = 0
   inboundData[2] = 1
   outboundData[2] = 2
   internalData[2] = 3
-  otherData[2] = 4
+  throughData[2] = 4
-  const dataIntegrationArray = [totalData, inboundData, outboundData, internalData, otherData]
+  otherData[2] = 5
+  const dataIntegrationArray = [totalData, inboundData, outboundData, internalData, throughData, otherData]
   dataIntegrationArray.sort((a, b) => { return a[1] - b[1] })
   const sortIndex = dataIntegrationArray.findIndex(a => a[2] === index)
   return sizes[sortIndex]