CN-626 feat: 完善 Dashboard - network overview 功能及样式

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

@@ -19,6 +19,7 @@
         font-size: 12px;
         color: #575757;
         font-weight: 400;
+        margin-right: 3px;
       }
       .line-select__operation {
         height: 24px;
@@ -80,7 +81,7 @@
       span:nth-of-type(1) {
         font-size: 28px;
         color: #353636;
-        font-weight: 500;
+        font-weight: 700;
         margin-right: 4px;
       }
       span:nth-of-type(2) {

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

@@ -13,6 +13,9 @@
       background: #E2E5EC;
     }
   }
+  .pie-button.el-button {
+    width: 96px;
+  }
   .el-button {
     width: 117px;
     min-height: 28px;

src/views/charts2/charts/NetworkOverviewPerformanceEvent.vue

@@ -5,27 +5,58 @@
       <div class="performance-event-pie-hr"></div>
       <div id="chart2"></div>
     </div>
-    <el-button size="small">{{$t('network.dashboards')}}<i class="cn-icon cn-icon-arrow-right"></i></el-button>
+    <el-button class="pie-button" size="small">{{$t('network.dashboards')}}<i class="cn-icon cn-icon-arrow-right"></i></el-button>
   </div>
 </template>
 
 <script>
 import { pieChartOption1, pieChartOption2 } from '@/views/charts2/charts/options/pie.js'
 import * as echarts from 'echarts'
+import { shallowRef } from 'vue'
 export default {
   name: 'NetworkOverviewPerformanceEvent',
+  setup () {
+    return {
+      myChart: shallowRef(null),
+      myChart2: shallowRef(null)
+    }
+  },
   data () {
     return {
+      chartOption: {},
+      chartOption2: {},
+      chartData: [
+        { value: 1048, name: '666', describe: 'Critical' },
+        { value: 735, name: '777', describe: 'High' },
+        { value: 580, name: '888', describe: 'Medium' },
+        { value: 484, name: '999', describe: 'Low' },
+        { value: 300, name: '100', describe: 'Info' }
+      ],
+      chartData2: [
+        { value: 1048, name: '111', describe: 'name1' },
+        { value: 735, name: '222', describe: 'name2' },
+        { value: 580, name: '333', describe: 'name3' },
+        { value: 484, name: '444', describe: 'name4' },
+        { value: 300, name: '555', describe: 'name5' }
+      ]
     }
   },
   methods: {
     init () {
-      const dom1 = document.getElementById('chart1')
+      const dom = document.getElementById('chart1')
       const dom2 = document.getElementById('chart2')
-      const myChart1 = echarts.init(dom1)
+      if (dom) {
-      const myChart2 = echarts.init(dom2)
+        this.myChart = echarts.init(dom)
-      myChart1.setOption(pieChartOption1)
+        this.chartOption = pieChartOption1
-      myChart2.setOption(pieChartOption2)
+        this.chartOption.series[0].data = this.chartData
+        this.myChart.setOption(pieChartOption1)
+      }
+      if (dom2) {
+        this.myChart2 = echarts.init(dom2)
+        this.chartOption2 = pieChartOption2
+        this.chartOption2.series[0].data = this.chartData2
+        this.myChart2.setOption(pieChartOption2)
+      }
     }
   },
   mounted () {

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

@@ -1,21 +1,48 @@
 import { chartColor1, chartColor2, chartColor3 } from '@/utils/constants'
+import * as echarts from 'echarts'
 
 export const pieChartOption1 = {
   color: chartColor1,
   legend: {
     orient: 'vertical',
-    top: 35,
+    top: 45,
-    left: '55%',
+    left: '50%',
-    itemGap: 8,
+    itemGap: 4,
     itemWidth: 15,
-    itemHeight: 7
+    itemHeight: 7,
+    textStyle: {
+      fontFamily: 'SimHei',
+      rich: {
+        a: {
+          width: 35,
+          align: 'left'
+        },
+        b: {
+          width: 6,
+          align: 'left',
+          fontSize: 12,
+          color: '#575757'
+        }
+      }
+    },
+    formatter: function (name) {
+      const data = pieChartOption1.series[0].data
+      let value
+      data.forEach(t => {
+        if (t.name === name) {
+          value = t.describe
+        }
+      })
+      const arr = ['{a|' + ' ' + name + '}' + '{b|' + value + '}']
+      return arr
+    }
   },
   series: [
     {
-      right: '40%',
+      right: '50%',
       name: 'Access From',
       type: 'pie',
-      radius: ['30%', '50%'],
+      radius: ['40%', '60%'],
       avoidLabelOverlap: false,
       label: {
         show: false
@@ -23,32 +50,52 @@ export const pieChartOption1 = {
       labelLine: {
         show: false
       },
-      data: [
+      data: []
-        { value: 1048, name: 'Search Engine' },
-        { value: 735, name: 'Direct' },
-        { value: 580, name: 'Email' },
-        { value: 484, name: 'Union Ads' },
-        { value: 300, name: 'Video Ads' }
-      ]
     }
   ]
 }
 export const pieChartOption2 = {
   legend: {
     orient: 'vertical',
-    top: 35,
+    top: 45,
-    left: '55%',
+    left: '50%',
-    itemGap: 8,
+    itemGap: 4,
     itemWidth: 15,
-    itemHeight: 7
+    itemHeight: 7,
+    textStyle: {
+      fontFamily: 'SimHei',
+      rich: {
+        a: {
+          width: 35,
+          align: 'left'
+        },
+        b: {
+          width: 6,
+          align: 'left',
+          fontSize: 12,
+          color: '#575757'
+        }
+      }
+    },
+    formatter: function (name) {
+      const data = pieChartOption2.series[0].data
+      let value
+      data.forEach(t => {
+        if (t.name === name) {
+          value = t.describe
+        }
+      })
+      const arr = ['{a|' + ' ' + name + '}' + '{b|' + value + '}']
+      return arr
+    }
   },
   color: chartColor2,
   series: [
     {
-      right: '40%',
+      right: '50%',
       name: 'Access From',
       type: 'pie',
-      radius: ['30%', '50%'],
+      radius: ['40%', '60%'],
       avoidLabelOverlap: false,
       label: {
         show: false
@@ -56,13 +103,7 @@ export const pieChartOption2 = {
       labelLine: {
         show: false
       },
-      data: [
+      data: []
-        { value: 1048, name: 'Search Engine' },
-        { value: 735, name: 'Direct' },
-        { value: 580, name: 'Email' },
-        { value: 484, name: 'Union Ads' },
-        { value: 300, name: 'Video Ads' }
-      ]
     }
   ]
 }
@@ -81,8 +122,8 @@ export const stackedLineChartOption = {
     type: 'scroll',
     top: 10,
     left: 20,
-    itemGap: 57,
+    itemGap: 60,
-    itemWidth: 14,
+    itemWidth: 11,
     itemHeight: 14
   },
   grid: {
@@ -94,9 +135,16 @@ export const stackedLineChartOption = {
   },
   xAxis: [
     {
-      type: 'category',
+      type: 'time',
-      boundaryGap: false,
+      splitNumber: 12,
-      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+      axisLabel: {
+        formatter: function (value) {
+          const data = new Date(value)
+          const h = data.getHours() > 9 ? data.getHours() : '0' + data.getHours()
+          const m = data.getMinutes() > 9 ? data.getMinutes() : '0' + data.getMinutes()
+          return h + ':' + m
+        }
+      }
     }
   ],
   yAxis: [
@@ -109,92 +157,146 @@ export const stackedLineChartOption = {
       name: 'Total',
       type: 'line',
       stack: 'Total',
+      symbol: 'circle',
       smooth: true,
       showSymbol: false,
-      symbolSize: 8,
-      symbol: 'circle',
-      lineStyle: {
-        width: 0
-      },
-      areaStyle: {},
       emphasis: {
         focus: 'series'
       },
-      data: [120, 132, 101, 134, 90, 230, 210]
+      lineStyle: {
+        color: chartColor3[0],
+        width: 1
+      },
+      areaStyle: {
+        opacity: 0.1,
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          {
+            offset: 0,
+            color: chartColor3[0]
+          },
+          {
+            offset: 1,
+            color: chartColor3[0]
+          }
+        ])
+      },
+      data: []
     },
     {
       name: 'Inbound',
       type: 'line',
       stack: 'Total',
+      symbol: 'circle',
       smooth: true,
       showSymbol: false,
-      symbolSize: 8,
-      symbol: 'circle',
-      lineStyle: {
-        width: 0
-      },
-      areaStyle: {},
       emphasis: {
         focus: 'series'
       },
-      data: [220, 182, 191, 234, 290, 330, 310]
+      lineStyle: {
+        color: chartColor3[1],
+        width: 1
+      },
+      areaStyle: {
+        opacity: 0.1,
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          {
+            offset: 0,
+            color: chartColor3[1]
+          },
+          {
+            offset: 1,
+            color: chartColor3[1]
+          }
+        ])
+      },
+      data: []
     },
     {
       name: 'Outbound',
       type: 'line',
       stack: 'Total',
+      symbol: 'circle',
       smooth: true,
       showSymbol: false,
-      symbolSize: 8,
-      symbol: 'circle',
-      lineStyle: {
-        width: 0
-      },
-      areaStyle: {},
       emphasis: {
         focus: 'series'
       },
-      data: [150, 232, 201, 154, 190, 330, 410]
+      lineStyle: {
+        color: chartColor3[2],
+        width: 1
+      },
+      areaStyle: {
+        opacity: 0.1,
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          {
+            offset: 0,
+            color: chartColor3[2]
+          },
+          {
+            offset: 1,
+            color: chartColor3[2]
+          }
+        ])
+      },
+      data: []
     },
     {
       name: 'Internal',
       type: 'line',
       stack: 'Total',
+      symbol: 'circle',
       smooth: true,
       showSymbol: false,
-      symbolSize: 8,
-      symbol: 'circle',
-      lineStyle: {
-        width: 0
-      },
-      areaStyle: {
-        color: '#35ADDA'
-      },
       emphasis: {
         focus: 'series'
       },
-      data: [320, 332, 301, 334, 390, 330, 320]
+      lineStyle: {
+        color: chartColor3[3],
+        width: 1
+      },
+      areaStyle: {
+        opacity: 0.1,
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          {
+            offset: 0,
+            color: chartColor3[3]
+          },
+          {
+            offset: 1,
+            color: chartColor3[3]
+          }
+        ])
+      },
+      data: []
     },
     {
       name: 'Other',
       type: 'line',
       stack: 'Total',
+      symbol: 'circle',
       smooth: true,
       showSymbol: false,
-      symbolSize: 8,
-      symbol: 'circle',
-      lineStyle: {
-        width: 0
-      },
-      label: {
-        show: true,
-        position: 'top'
-      },
-      areaStyle: {},
       emphasis: {
         focus: 'series'
       },
-      data: [820, 932, 901, 934, 1290, 1330, 1320]
+      lineStyle: {
+        color: chartColor3[4],
+        width: 1
+      },
+      areaStyle: {
+        opacity: 0.1,
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          {
+            offset: 0,
+            color: chartColor3[4]
+          },
+          {
+            offset: 1,
+            color: chartColor3[4]
+          }
+        ])
+      },
+      data: []
     }
   ]
 }