CN-649 feat: Dahsboard - npm - location六个折线图开发

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

@@ -69,6 +69,7 @@
     height: 100%;
     border: 1px solid #E2E5EC;
     border-radius: 4px;
+    padding: 1px;
     .app-table.el-table {
       .el-table__header-wrapper {
         tr th {

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

@@ -1,6 +1,6 @@
 .npm-event {
-  height: calc(100% - 24px);
   width: 100%;
+  height: 100%;
   .npm-event-title {
     font-family: NotoSansHans-Medium;
     font-size: 14px;
@@ -10,7 +10,7 @@
   }
   .npm-event-pie {
     width: 100%;
-    height: 100%;
+    height: calc(100% - 30px);
     border: 1px solid #E2E5EC;
     border-radius: 4px;
     display: flex;

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

@@ -1,5 +1,6 @@
 .npm-recent {
-  height: calc(100% - 24px);
+  height: 100%;
+  width: 100%;
   .npm-recent-title {
     font-family: NotoSansHans-Medium;
     font-size: 14px;
@@ -8,11 +9,13 @@
     margin-bottom: 10px;
   }
   .npm-recent-table {
+    height: calc(100% - 30px) !important;
     border: 1px solid #E2E5EC;
     border-radius: 4px;
+    padding: 1px;
     .el-table__header-wrapper {
       tr th {
-        padding: 5px 0;
+        padding: 4px 0;
         .data-column__span {
           font-family: NotoSansHans-Medium;
           font-size: 12px;
@@ -23,7 +26,7 @@
     }
     .el-table__body-wrapper.is-scrolling-none {
       tr td {
-        padding: 7px 0;
+        padding: 7.5px 0;
       }
     }
   }

src/utils/constants.js

@@ -216,8 +216,7 @@ export const chartColor2 = ['#86B565', '#A37FA7', '#EFAFC7', '#EFC48F', '#B4B1A8
 export const chartColor3 = ['#00A7AB', '#7FA054', '#35ADDA', '#E48F3E', '#9FBC1D', '#98709B']
 
 export const chartColor4 = ['#E5F6F6', '#F2F6EE', '#EBF7FC', '#FCF4EB', '#9FBC1D', '#F5F1F5']
-export const chartColor5 = ['#749F4D', '#98709B', '#E5A219']
-export const chartColor6 = ['#E26154', '#E48E4D', '#E7B34E', '#DAC74B', '#88AF65']
+export const chartColor5 = ['#E26154', '#E48E4D', '#E7B34E', '#DAC74B', '#88AF65']
 
 export const iso36112 = {
   [storageKey.iso36112Capital]: 'data/countriesWithCapital',

src/views/charts2/charts/NpmLine.vue

@@ -1,9 +1,139 @@
 <template>
-  <div style="height: 100%;width: 100%;border: 1px solid #f0f0f0"></div>
+  <div class="npm-line">
+    <div class="npm-line-header" v-if="chartData.params && chartData.params.showLegend">
+      <div class="npm-line-header-right" v-for="(item, index) in chartOptionLineData" :key="index" @click="legendSelectChange(item, index)">
+        <div class="npm-line-header-icon" :class="'icon' + index"></div>
+        <div class="npm-line-header-value">{{$t(item.legend)}}</div>
+      </div>
+    </div>
+    <div class="chart-drawing" :id="`chart${chartData.name}`"></div>
+  </div>
 </template>
 
 <script>
+import * as echarts from 'echarts'
+import { npmLineChartOption } from '@/views/charts2/charts/options/echartOption.js'
+import { shallowRef } from 'vue'
+import _ from 'lodash'
+import { stackedLineTooltipFormatter } from '@/views/charts/charts/tools'
+
 export default {
-  name: 'NpmLine'
+  name: 'NpmLine',
+  props: {
+    chart: Object
+  },
+  setup () {
+    return {
+      myChart: shallowRef()
+    }
+  },
+  data () {
+    return {
+      chartData: {},
+      chartOptionLineData: [
+        { legend: 'network.total', index: 0 },
+        { legend: 'network.inbound', index: 1 },
+        { legend: 'network.outbound', index: 2 }
+      ],
+      timer: null,
+      myChartArray: []
+    }
+  },
+  methods: {
+    init () {
+      const dom = document.getElementById(`chart${this.chartData.name}`)
+      this.myChart = echarts.init(dom)
+      this.chartOption = npmLineChartOption
+      const seriesTemplate = this.chartOption.series[0]
+      this.chartOption.title.text = this.chartData.i18n ? this.chartData.i18n : this.chartData.name
+      this.chartOption.color = this.chartData.params.color
+      let result = [
+        {
+          values: [[1435781430781, '1'], [1435781431781, '2']],
+          legend: 'network.total',
+          color: '#749F4D'
+        },
+        {
+          values: [[1435781430781, '1'], [1435781431781, '2']],
+          legend: 'network.inbound',
+          color: '#98709B'
+        },
+        {
+          values: [[1435781430781, '1'], [1435781431781, '2']],
+          legend: 'network.outbound',
+          color: '#E5A219'
+        }
+      ]
+      result = result.filter(item => this.chartData.params.color.indexOf(item.color) > -1)
+      this.chartOption.series = result.map((t, i) => {
+        return {
+          ...seriesTemplate,
+          name: t.legend,
+          stack: this.chartData.params.isStack ? 'network.total' : '',
+          lineStyle: {
+            width: 1
+          },
+          areaStyle: {
+            opacity: 0.1
+          },
+          data: t.values.map((v) => [Number(v[0]) * 1000, Number(v[1]), this.chartData.params.unitType])
+        }
+      })
+      this.chartOption.tooltip.formatter = (params) => {
+        params.forEach(t => {
+          t.seriesName = this.$t(t.seriesName)
+        })
+        const str = stackedLineTooltipFormatter(params)
+        return str
+      }
+      this.myChartArray.push(this.myChart)
+      this.myChart.setOption(this.chartOption)
+    },
+    dispatchLegendSelectAction (name) {
+      this.myChart.dispatchAction({
+        type: 'legendSelect',
+        name: name
+      })
+    },
+    dispatchLegendUnSelectAction (name) {
+      this.myChart.dispatchAction({
+        type: 'legendUnSelect',
+        name: name
+      })
+    },
+    legendSelectChange (item, index) {
+      if (index === 0) {
+        this.chartOptionLineData.forEach((t) => {
+          this.dispatchLegendSelectAction(t.legend)
+        })
+      } else {
+        if (this.chartOptionLineData[index].legend == item.legend) {
+          this.dispatchLegendSelectAction(item.legend)
+          this.chartOptionLineData.forEach((t) => {
+            if (t.legend !== item.legend) {
+              this.dispatchLegendUnSelectAction(t.legend)
+            }
+          })
+        }
+      }
+    },
+    resize () {
+      this.myChartArray.forEach(t => {
+        t.resize()
+      })
+    }
+  },
+  mounted () {
+    if (this.chart) {
+      this.chartData = _.cloneDeep(this.chart)
+    }
+    this.timer = setTimeout(() => {
+      this.init()
+    }, 100)
+    window.addEventListener('resize', this.resize)
+  },
+  beforeUnmount () {
+    clearTimeout(this.timer)
+  }
 }
 </script>

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

@@ -4,7 +4,6 @@ import {
   chartColor2,
   chartColor3,
   chartColor5,
-  chartColor6,
   unitTypes
 } from '@/utils/constants'
 import unitConvert from '@/utils/unit-convert'
@@ -119,7 +118,7 @@ export const pieChartOption2 = {
   ]
 }
 export const pieChartOption3 = {
-  color: chartColor6,
+  color: chartColor5,
   series: [
     {
       name: 'Access From',
@@ -241,7 +240,6 @@ export const appListChartOption = {
 }
 
 export const npmLineChartOption = {
-  color: chartColor5,
   title: {
     text: '',
     top: 20,