feat: 初始 echarts 图表

src/assets/css/components/components/layout/layout.scss

@@ -2,6 +2,9 @@
   height: calc(100% - 50px);
   background-color: $--content-right-background-color;
   width: 100%;
+  &>div {
+    height: 100%;
+  }
 }
 
 .cn-header {

src/assets/css/components/index.scss

@@ -46,4 +46,7 @@
 @import './components/rightBox/report/builtinReportBox';
 
 @import './views/charts2/panel';
+@import 'views/charts/NetworkOverviewLine';
+@import 'views/charts/NetworkOverviewDdosDetection';
+@import 'views/charts/NetworkOverviewPerformanceEvent';
 //@import '../chart';

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

@@ -0,0 +1,52 @@
+.ddos-detection {
+  display: flex;
+  height: 100%;
+  width: 85%;
+  margin: auto;
+  flex-direction: column;
+  justify-content: space-evenly;
+  .ddos-detection-type {
+    display: flex;
+    justify-content: space-between;
+    .ddos-detection-type-value {
+      display: flex;
+      flex-direction: column;
+      .ddos-detection-type-value-name {
+        font-family: NotoSansSChineseRegular;
+        font-size: 12px;
+        color: #575757;
+        line-height: 12px;
+        font-weight: 400;
+        margin-bottom: 12px;
+      }
+      .ddos-detection-type-value-number {
+        font-family: NotoSerifMyanmar-Medium;
+        font-size: 18px;
+        color: #E26154;
+        line-height: 12px;
+        font-weight: 500;
+      }
+    }
+  }
+  .el-button {
+    width: 117px;
+    min-height: 28px;
+    background: #FBFBFB;
+    border: 1px solid #C5C5C5;
+    box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
+    border-radius: 4px;
+    padding: 8px 5px;
+    span {
+      font-family: NotoSansHans-Medium;
+      font-size: 12px;
+      color: #575757;
+      font-weight: 500;
+      i {
+        transform: rotate(-90deg);
+        color: #575757;
+        font-size: 12px;
+        margin-left: 4px;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,8 @@
+.line {
+  height: 100%;
+  width: 100%;
+  #chart {
+    width: 1288px;
+    height: 340px;
+  }
+}

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

@@ -0,0 +1,38 @@
+.performance-event {
+  width: 100%;
+  .performance-event-pie {
+    width: 100%;
+    div {
+      height: 175px;
+      width: 324px;
+    }
+    .performance-event-pie-hr {
+      height: 1px;
+      width: 310px;
+      margin: auto;
+      background: #E2E5EC;
+    }
+  }
+  .el-button {
+    width: 117px;
+    min-height: 28px;
+    background: #FBFBFB;
+    border: 1px solid #C5C5C5;
+    box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
+    border-radius: 4px;
+    padding: 8px 5px;
+    margin-left: 30px;
+    span {
+      font-family: NotoSansHans-Medium;
+      font-size: 12px;
+      color: #575757;
+      font-weight: 500;
+      i {
+        transform: rotate(-90deg);
+        color: #575757;
+        font-size: 12px;
+        margin-left: 4px;
+      }
+    }
+  }
+}

src/utils/constants.js

@@ -189,6 +189,10 @@ export const chartColor = ['#5370C6', '#90CC74', '#FAC858', '#EE6666',
   '#E97CCC', '#FEA69E', '#0F8AB2', '#57CBAC',
   '#5888BC', '#63B6AC', '#EDC6B2', '#D5746B']
 
+export const chartColor1 = ['#E26154', '#E48E4D', '#E7B34E', '#DAC74B', '#88AF65']
+
+export const chartColor2 = ['#86B565', '#A37FA7', '#EFAFC7', '#EFC48F', '#B4B1A8']
+
 export const iso36112 = {
   [storageKey.iso36112Capital]: 'data/countriesWithCapital',
   [storageKey.iso36112WorldLow]: 'worldChinaLow',

src/views/charts/Panel.vue

@@ -150,12 +150,14 @@ export default {
       if (panels && panels.length > 0) {
         this.panel = panels[0]
       }
+      console.log(this.panel)
       if (this.panel.id) {
         if (this.panel.params) {
           this.panel.params = JSON.parse(this.panel.params)
         } else {
           this.panel.params = {}
         }
+        console.log(this.panel)
         const allCharts = (await getChartList({ panelId: this.panel.id, pageSize: -1 })).map(chart => {
           chart.i = chart.id
           this.recursionParamsConvert(chart)

src/views/charts2/Chart.vue

@@ -3,8 +3,17 @@
     <loading :loading="loading"></loading>
     <chart-no-data v-if="isNoData"></chart-no-data>
     <network-overview-line
-      v-if="chart.type === typeMapping.networkOverview.line"
+        v-if="chart.type === typeMapping.networkOverview.line"
+        :chart="chart"
     ></network-overview-line>
+    <network-overview-ddos-detection
+        v-else-if="chart.type === typeMapping.networkOverview.ddosDetection"
+        :chart="chart"
+    ></network-overview-ddos-detection>
+    <network-overview-performance-event
+        v-else-if="chart.type === typeMapping.networkOverview.performanceEvent"
+        :chart="chart"
+    ></network-overview-performance-event>
   </div>
 </template>
 
@@ -12,13 +21,17 @@
 import Loading from '@/components/common/Loading'
 import ChartNoData from '@/views/charts/charts/ChartNoData'
 import { typeMapping } from '@/views/charts2/chart-tools'
-import NetworkOverviewLine from '@/views/charts2/charts/NetworkOverviewLine';
+import NetworkOverviewLine from '@/views/charts2/charts/NetworkOverviewLine'
+import NetworkOverviewDdosDetection from '@/views/charts2/charts/NetworkOverviewDdosDetection'
+import NetworkOverviewPerformanceEvent from '@/views/charts2/charts/NetworkOverviewPerformanceEvent'
 export default {
   name: 'Chart',
   components: {
     Loading,
     ChartNoData,
-    NetworkOverviewLine
+    NetworkOverviewLine,
+    NetworkOverviewDdosDetection,
+    NetworkOverviewPerformanceEvent
   },
   props: {
     chart: Object

src/views/charts2/charts/NetworkOverviewDdosDetection.vue

@@ -0,0 +1,29 @@
+<template>
+ <div class="ddos-detection">
+   <div class="ddos-detection-type">
+     <div class="ddos-detection-type-value">
+       <div class="ddos-detection-type-value-name">{{$t('network.numberOfAttacks')}}</div>
+       <div class="ddos-detection-type-value-number">365</div>
+     </div>
+     <div class="ddos-detection-type-value">
+       <div class="ddos-detection-type-value-name">{{$t('network.number0fVictims')}}</div>
+       <div class="ddos-detection-type-value-number">65</div>
+     </div>
+     <div class="ddos-detection-type-value">
+       <div class="ddos-detection-type-value-name">{{$t('network.number0fDetectedAttackEvents')}}</div>
+       <div class="ddos-detection-type-value-number">25</div>
+     </div>
+   </div>
+   <el-button size="small">{{$t('network.ddosDetection')}}<i class="cn-icon cn-icon-arrow-right"></i></el-button>
+ </div>
+</template>
+
+<script>
+export default {
+  name: 'NetworkOverviewDdosDetection'
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/charts2/charts/NetworkOverviewLine.vue

@@ -1,9 +1,76 @@
 <template>
-呵呵
+  <div class="line">
+    <div id="chart"></div>
+    <div>
+      <div>
+        <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>
+        <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>
+    </div>
+  </div>
 </template>
 
 <script>
+import * as echarts from 'echarts'
+import { stackedLineChartOption } from '@/views/charts2/charts/options/pie'
+
 export default {
-  name: 'NetworkOverviewLine'
+  name: 'NetworkOverviewLine',
+  props: {
+    chart: Object
+  },
+  data () {
+    return {
+      options: [
+        {
+          value: 'Option1',
+          label: 'Option1'
+        },
+        {
+          value: 'Option2',
+          label: 'Option2'
+        },
+        {
+          value: 'Option3',
+          label: 'Option3'
+        },
+        {
+          value: 'Option4',
+          label: 'Option4'
+        },
+        {
+          value: 'Option5',
+          label: 'Option5'
+        }
+      ]
+    }
+  },
+  methods: {
+    init () {
+      const dom = document.getElementById('chart')
+      const myChart = echarts.init(dom)
+      myChart.setOption(stackedLineChartOption)
+    }
+  },
+  mounted () {
+    this.init()
+  }
 }
 </script>

src/views/charts2/charts/NetworkOverviewPerformanceEvent.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="performance-event">
+    <div class="performance-event-pie">
+      <div id="chart1"></div>
+      <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>
+  </div>
+</template>
+
+<script>
+import { pieChartOption1, pieChartOption2 } from '@/views/charts2/charts/options/pie.js'
+import * as echarts from 'echarts'
+export default {
+  name: 'NetworkOverviewPerformanceEvent',
+  data () {
+    return {
+    }
+  },
+  methods: {
+    init () {
+      const dom1 = document.getElementById('chart1')
+      const dom2 = document.getElementById('chart2')
+      const myChart1 = echarts.init(dom1)
+      const myChart2 = echarts.init(dom2)
+      myChart1.setOption(pieChartOption1)
+      myChart2.setOption(pieChartOption2)
+    }
+  },
+  mounted () {
+    this.init()
+  }
+}
+</script>

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

@@ -0,0 +1,198 @@
+import { chartColor1, chartColor2 } from '@/utils/constants'
+
+export const pieChartOption1 = {
+  color: chartColor1,
+  legend: {
+    orient: 'vertical',
+    top: 35,
+    left: '55%',
+    itemGap: 8,
+    itemWidth: 15,
+    itemHeight: 7
+  },
+  series: [
+    {
+      right: '40%',
+      name: 'Access From',
+      type: 'pie',
+      radius: ['30%', '50%'],
+      avoidLabelOverlap: false,
+      label: {
+        show: false
+      },
+      labelLine: {
+        show: false
+      },
+      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,
+    left: '55%',
+    itemGap: 8,
+    itemWidth: 15,
+    itemHeight: 7
+  },
+  color: chartColor2,
+  series: [
+    {
+      right: '40%',
+      name: 'Access From',
+      type: 'pie',
+      radius: ['30%', '50%'],
+      avoidLabelOverlap: false,
+      label: {
+        show: false
+      },
+      labelLine: {
+        show: false
+      },
+      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 stackedLineChartOption = {
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'cross',
+      label: {
+        backgroundColor: '#6a7985'
+      }
+    }
+  },
+  legend: {
+    type: 'scroll',
+    top: 10,
+    left: 20,
+    itemGap: 8,
+    itemWidth: 14,
+    itemHeight: 14
+  },
+  grid: {
+    left: '1%',
+    right: '2%',
+    bottom: 15,
+    containLabel: true
+  },
+  xAxis: [
+    {
+      type: 'category',
+      boundaryGap: false,
+      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+    }
+  ],
+  yAxis: [
+    {
+      type: 'value'
+    }
+  ],
+  series: [
+    {
+      name: 'Total',
+      type: 'line',
+      stack: 'Total',
+      smooth: true,
+      showSymbol: false,
+      symbolSize: 8,
+      symbol: 'circle',
+      lineStyle: {
+        width: 0
+      },
+      areaStyle: {},
+      emphasis: {
+        focus: 'series'
+      },
+      data: [120, 132, 101, 134, 90, 230, 210]
+    },
+    {
+      name: 'Inbound',
+      type: 'line',
+      stack: 'Total',
+      smooth: true,
+      showSymbol: false,
+      symbolSize: 8,
+      symbol: 'circle',
+      lineStyle: {
+        width: 0
+      },
+      areaStyle: {},
+      emphasis: {
+        focus: 'series'
+      },
+      data: [220, 182, 191, 234, 290, 330, 310]
+    },
+    {
+      name: 'Outbound',
+      type: 'line',
+      stack: 'Total',
+      smooth: true,
+      showSymbol: false,
+      symbolSize: 8,
+      symbol: 'circle',
+      lineStyle: {
+        width: 0
+      },
+      areaStyle: {},
+      emphasis: {
+        focus: 'series'
+      },
+      data: [150, 232, 201, 154, 190, 330, 410]
+    },
+    {
+      name: 'Internal',
+      type: 'line',
+      stack: 'Total',
+      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]
+    },
+    {
+      name: 'Other',
+      type: 'line',
+      stack: 'Total',
+      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]
+    }
+  ]
+}