feat：添加type类型为 23 24的 bar

2022-01-19 17:42:41 +08:00
parent 759cbe3ce6
commit c2f0af81bb
8 changed files with 308 additions and 3 deletions
--- a/src/views/charts/Chart2.vue
+++ b/src/views/charts/Chart2.vue
@@ -51,6 +51,23 @@
          @showLoading="showLoading"
      ></chart-echart-line>

+      <chart-time-bar
+              v-else-if="isEchartsTimeBar"
+              :chart-info="chartInfo"
+              :chart-data="chartData"
+              :result-type="resultType"
+              :query-params="queryParams"
+              @showLoading="showLoading"
+      ></chart-time-bar>
+
+      <chart-category-bar
+              v-else-if="isEchartsCategoryBar"
+              :chart-info="chartInfo"
+              :chart-data="chartData"
+              :result-type="resultType"
+              :query-params="queryParams"
+              @showLoading="showLoading"
+      ></chart-category-bar>
    </template>
  </div>
 </template>
@@ -64,6 +81,8 @@ import ChartSingleValue from './charts/ChartSingleValue'
 import ChartBlock from './charts/ChartBlock'
 import IpBasicInfo from '@/views/charts/charts/IpBasicInfo'
 import ChartEchartLine from './charts/ChartEchartLine'
+import ChartTimeBar from './charts/ChartTimeBar'
+import ChartCategoryBar from './charts/ChartCategoryBar'
 import {
  isEcharts,
  isEchartsLine,
@@ -107,7 +126,9 @@ export default {
    ChartTabs,
    ChartMap,
    ChartEchartLine,
-    ChartBlock
+    ChartBlock,
+    ChartTimeBar,
+    ChartCategoryBar
  },
  props: {
    chartInfo: Object,
--- a/src/views/charts/Panel.vue
+++ b/src/views/charts/Panel.vue
@@ -96,6 +96,7 @@ export default {
          this.recursionParamsConvert(chart)
          return chart
        })
+        // allCharts = allCharts.filter(chart => chart.type === 24)
        this.chartList = allCharts
        setTimeout(() => {
          this.$emit('chartLoaded', allCharts)
--- a/src/views/charts/PanelChart.vue
+++ b/src/views/charts/PanelChart.vue
@@ -38,6 +38,7 @@
 <script>
 import ChartHeader from './ChartHeader'
 import Chart from '@/views/charts/Chart2'
+import testData from './charts/testData'
 import {
  isEcharts,
  isSingleValue,
@@ -177,6 +178,12 @@ export default {
        const requestUrl = url || (chartParams && chartParams.url)
        if (requestUrl) {
          get(replaceUrlPlaceholder(requestUrl, this.queryParams)).then(response => {
+            console.log(testData)
+            if (this.chartInfo.type === 23 && testData) {
+              response = testData.data
+            } else if (this.chartInfo.type === 24 && testData) {
+              response = testData.data2
+            }
            if (response.code === 200) {
              this.chartData = response.data.result
              this.resultType = response.data.resultType
--- a/src/views/charts/charts/ChartCategoryBar.vue
+++ b/src/views/charts/charts/ChartCategoryBar.vue
@@ -0,0 +1,90 @@
+<template>
+    <div class="chart-drawing" :id="`chart${chartInfo.id}`"></div>
+</template>
+
+<script>
+import unitConvert from '@/utils/unit-convert'
+import * as echarts from 'echarts'
+import { lineToSpace } from '@/utils/tools'
+import { unitTypes } from '@/utils/constants'
+import { legendMapping } from '@/components/charts/chart-table-title'
+import {
+  categoryBar
+} from '@/views/charts/charts/options/bar'
+import { getCharBartColor } from '@/views/charts/charts/tools'
+
+export default {
+  name: 'ChartCategoryBar',
+  data () {
+    return {
+      myChart: null,
+      chartOption: null
+    }
+  },
+  props: {
+    chartInfo: Object,
+    chartData: [Array, Object],
+    resultType: Object,
+    queryParams: Object
+  },
+  methods: {
+    init (id) {
+      const chartParams = this.chartInfo.params
+      const dom = document.getElementById(id)
+      !this.myChart && (this.myChart = echarts.init(dom))
+      this.chartOption = this.$_.cloneDeep(categoryBar)
+      if (!chartParams.itemColorAlternately) {
+        this.chartOption.series[0].itemStyle.color = function (params) {
+          return getCharBartColor(0)
+        }
+      }
+      if (chartParams.showLegend === false) {
+        this.chartOption.legend.show = false
+      }
+      const seriesTemplate = this.chartOption.series[0]
+      const obj = {
+        ...seriesTemplate,
+        name: ' ',
+        data: []
+      }
+      this.chartData.forEach((r, index) => {
+        // chartParams.direction === 'vertical' ? r.values.map(v => [Number(v[0]) * 1000, Number(v[1]), chartParams.unitType]) : r.values.map(v => [Number(v[1]), Number(v[0]) * 1000, chartParams.unitType])
+        if (chartParams.direction === 'horizontal') {
+          obj.data.push([Number(r.events), r.clientCountry + ' ' + r.clientRegion, r])
+        } else {
+          obj.data.push([r.clientCountry + ' ' + r.clientRegion, Number(r.events), r])
+        }
+        return obj
+      })
+      this.chartOption.series = obj
+      const rows = (this.chartData.length - 1) / 4 + 1 // 根据legend个数动态预留legend空间
+      const gridTop = 10 + 27 * rows
+      this.chartOption.grid.top = gridTop
+      if (chartParams.direction === 'horizontal') {
+        const temp = this.chartOption.yAxis
+        this.chartOption.yAxis = { ...this.chartOption.xAxis }
+        this.chartOption.xAxis = temp
+      }
+      this.loadEchartBar()
+    },
+    loadEchartBar () {
+      this.$emit('showLoading', true)
+      try {
+        this.myChart.setOption(this.chartOption)
+      } finally {
+        setTimeout(() => {
+          this.$emit('showLoading', false)
+        }, 200)
+      }
+    }
+  },
+  watch: {
+    chartData: {
+      deep: true,
+      handler (n) {
+        this.init(`chart${this.chartInfo.id}`)
+      }
+    }
+  }
+}
+</script>
--- a/src/views/charts/charts/ChartTimeBar.vue
+++ b/src/views/charts/charts/ChartTimeBar.vue
@@ -0,0 +1,120 @@
+<template>
+    <div class="chart-drawing" :id="`chart${chartInfo.id}`"></div>
+</template>
+
+<script>
+import unitConvert from '@/utils/unit-convert'
+import * as echarts from 'echarts'
+import { lineToSpace } from '@/utils/tools'
+import { unitTypes } from '@/utils/constants'
+import { legendMapping } from '@/components/charts/chart-table-title'
+import {
+  timeBar
+} from '@/views/charts/charts/options/bar'
+import { getCharBartColor } from '@/views/charts/charts/tools'
+
+export default {
+  name: 'ChaetTimeBar',
+  data () {
+    return {
+      myChart: null,
+      chartOption: null
+    }
+  },
+  props: {
+    chartInfo: Object,
+    chartData: [Array, Object],
+    resultType: Object,
+    queryParams: Object
+  },
+  methods: {
+    init (id) {
+      const chartParams = this.chartInfo.params
+      const dom = document.getElementById(id)
+      !this.myChart && (this.myChart = echarts.init(dom))
+      this.chartOption = this.$_.cloneDeep(timeBar)
+      if (!chartParams.itemColorAlternately) {
+        this.chartOption.series[0].itemStyle.color = function (params) {
+          return getCharBartColor(0)
+        }
+      }
+      if (chartParams.showLegend === false) {
+        this.chartOption.legend.show = false
+      }
+      const seriesTemplate = this.chartOption.series[0]
+      const allZero = this.timeBarIsAllZero(this.chartData)
+      if (allZero) {
+        this.chartOption.yAxis = {
+          ...this.chartOption.yAxis,
+          min: 0,
+          max: 5,
+          interval: 1
+        }
+      }
+      this.chartOption.series = this.chartData.map(r => {
+        const obj = {
+          ...seriesTemplate,
+          name: legendMapping[`${this.entity && this.entity.ip ? 'ip_' : ''}${r.legend}`] ? legendMapping[`${this.entity && this.entity.ip ? 'ip_' : ''}${r.legend}`] : lineToSpace(r.legend),
+          data: ''
+        }
+        // chartParams.direction === 'vertical' ? r.values.map(v => [Number(v[0]) * 1000, Number(v[1]), chartParams.unitType]) : r.values.map(v => [Number(v[1]), Number(v[0]) * 1000, chartParams.unitType])
+        if (chartParams.direction === 'horizontal') {
+          obj.data = r.values.map(v => [Number(v[1]), Number(v[0]) * 1000, chartParams.unitType])
+        } else {
+          obj.data = r.values.map(v => [Number(v[0]) * 1000, Number(v[1]), chartParams.unitType])
+        }
+        return obj
+      })
+      const rows = (this.chartData.length - 1) / 4 + 1 // 根据legend个数动态预留legend空间
+      const gridTop = 10 + 27 * rows
+      this.chartOption.grid.top = gridTop
+      if (chartParams.unitType === unitTypes.byte) {
+        this.chartOption.yAxis.axisLabel.formatter = function (value, index, a, b) {
+          return unitConvert(value, unitTypes.byte).join(' ')
+        }
+        this.chartOption.grid.left = 75
+      }
+      if (chartParams.direction === 'horizontal') {
+        const temp = this.chartOption.yAxis
+        this.chartOption.yAxis = { ...this.chartOption.xAxis }
+        this.chartOption.xAxis = temp
+      }
+      this.loadEchartBar()
+    },
+    loadEchartBar () {
+      this.$emit('showLoading', true)
+      try {
+        this.myChart.setOption(this.chartOption)
+      } finally {
+        setTimeout(() => {
+          this.$emit('showLoading', false)
+        }, 200)
+      }
+    },
+    timeBarIsAllZero (data) {
+      if (this.resultType === 'matrix') {
+        let allZero = true
+        try {
+          data.forEach(d => {
+            d.values.forEach(r => {
+              if (r[1] && r[1] !== '0') {
+                allZero = false
+                throw new Error('break')
+              }
+            })
+          })
+        } catch (e) {}
+        return allZero
+      }
+    }
+  },
+  watch: {
+    chartData: {
+      deep: true,
+      handler (n) {
+        this.init(`chart${this.chartInfo.id}`)
+      }
+    }
+  }
+}
+</script>
--- a/src/views/charts/charts/options/bar.js
+++ b/src/views/charts/charts/options/bar.js
@@ -4,7 +4,7 @@ import {
  categoryVerticalFormatter,
  chartColor,
  getCharBartColor,
-  timeVerticalFormatter
+  timeVerticalFormatter, tooLongFormatter
 } from '@/views/charts/charts/tools'

 export const ipOpenPortBar = {
@@ -121,7 +121,6 @@ export const timeBar = {
  },
  color: chartColor,
  series: [{
-    barWidth: 15,
    data: [],
    type: 'bar',
    label: { show: false },
--- a/src/views/charts/charts/testData.js
+++ b/src/views/charts/charts/testData.js
@@ -0,0 +1,66 @@
+const data = {
+  status: 200,
+  code: 200,
+  queryKey: '4f362f9ee3ffefc777e57fc65af78a2f',
+  success: true,
+  message: null,
+  formatType: 'json',
+  data: {
+    resultType: 'matrix',
+    result:
+                [
+                  {
+                    values: [
+                      ['1642575780', '4324'],
+                      ['1642575840', '5978'],
+                      ['1642575900', '3458'],
+                      ['1642575960', '2533'],
+                      ['1642576020', '4431'],
+                      ['1642576080', '9557'],
+                      ['1642576140', '3131'],
+                      ['1642576200', '2358'],
+                      ['1642576260', '3049'],
+                      ['1642576320', '2602'],
+                      ['1642576380', '2446'],
+                      ['1642576440', '3357'],
+                      ['1642576500', '2777'], ['1642576560', '2080'], ['1642576620', '6080'], ['1642576680', '2620'], ['1642576740', '4394'], ['1642576800', '3403'], ['1642576860', '3820'], ['1642576920', '3022'], ['1642576980', '3139'], ['1642577040', '3012'], ['1642577100', '3749'], ['1642577160', '4947'], ['1642577220', '4005'], ['1642577280', '4724'], ['1642577340', '3426'], ['1642577400', '2785'], ['1642577460', '3451'], ['1642577520', '3317'], ['1642577580', '4970'], ['1642577640', '1869'], ['1642577700', '3491'], ['1642577760', '2410'], ['1642577820', '1802'], ['1642577880', '2199'], ['1642577940', '3083'], ['1642578000', '6992'], ['1642578060', '1782'], ['1642578120', '1610'], ['1642578180', '2993'], ['1642578240', '2195'], ['1642578300', '1855'], ['1642578360', '3784'], ['1642578420', '2969'], ['1642578480', '5891'], ['1642578540', '7949'], ['1642578600', '1655'], ['1642578660', '4799'], ['1642578720', '9208'], ['1642578780', '9159'], ['1642578840', '3296'], ['1642578900', '5717'], ['1642578960', '3911'], ['1642579020', '6369'], ['1642579080', '3183'], ['1642579140', '3051'], ['1642579200', '4449'], ['1642579260', '4990'], ['1642579320', '6962']],
+                    legend: 'packets_received_rate',
+                    aggregation: { first: 4324, last: 6962, avg: '3942.80', max: 9557 }
+                  }
+                ]
+  },
+  originalUrl: 'http://192.168.44.55:9999?query=SELECT%20%20%20%20%20TIME_FLOOR_WITH_FILL%28UNIX_TIMESTAMP%28common_recv_time%29%2C%27PT1M%27%2C%27zero%27%29%20AS%20stat_time%2C%20%20%20%20%20ROUND%28SUM%28common_s2c_pkt_num%29%2F60%29%20AS%20packets_received_rate%2C%20%20%20%20%20ROUND%28SUM%28common_c2s_pkt_num%29%2F60%29%20AS%20packets_sent_rate%2C%20%20%20%20%20ROUND%28SUM%28common_c2s_pkt_num%20%2B%20common_s2c_pkt_num%29%2F60%29%20AS%20packets_rate%20FROM%20%20%20%20%20tsg_base_metrics%20WHERE%20%20%20%20%20common_recv_time%20%3E%3DtoDateTime%281642575761%29%20%20%20%20%20AND%20common_recv_time%20%3C%20toDateTime%281642579361%29%20GROUP%20BY%20%20%20%20%20stat_time&format=json&option=real-time',
+  msg: 'OK'
+}
+const data2 = {
+  status: 200,
+  code: 200,
+  queryKey: '4f362f9ee3ffefc777e57fc65af78a2f',
+  success: true,
+  message: null,
+  formatType: 'json',
+  originalUrl: 'http://192.168.44.55:9999?query=SELECT%20%20%20%20%20TIME_FLOOR_WITH_FILL%28UNIX_TIMESTAMP%28common_recv_time%29%2C%27PT1M%27%2C%27zero%27%29%20AS%20stat_time%2C%20%20%20%20%20ROUND%28SUM%28common_s2c_pkt_num%29%2F60%29%20AS%20packets_received_rate%2C%20%20%20%20%20ROUND%28SUM%28common_c2s_pkt_num%29%2F60%29%20AS%20packets_sent_rate%2C%20%20%20%20%20ROUND%28SUM%28common_c2s_pkt_num%20%2B%20common_s2c_pkt_num%29%2F60%29%20AS%20packets_rate%20FROM%20%20%20%20%20tsg_base_metrics%20WHERE%20%20%20%20%20common_recv_time%20%3E%3DtoDateTime%281642575761%29%20%20%20%20%20AND%20common_recv_time%20%3C%20toDateTime%281642579361%29%20GROUP%20BY%20%20%20%20%20stat_time&format=json&option=real-time',
+  msg: 'OK',
+  data: {
+    resultType: 'table',
+    result: [{
+      serverCountry: 'America',
+      serverRegion: 'Washington',
+      serverId: 'US',
+      clientCountry: 'China',
+      clientRegion: 'Beijing',
+      clientId: 'CN',
+      events: 27010
+    }, {
+      serverCountry: 'America2',
+      serverRegion: 'Washington2',
+      serverId: 'US',
+      clientCountry: 'China',
+      clientRegion: 'ShangHai',
+      clientId: 'CN',
+      events: 13000
+    }
+    ]
+  }
+}
+export default { data, data2 }
--- a/src/views/charts/charts/tools.js
+++ b/src/views/charts/charts/tools.js
@@ -315,6 +315,7 @@ export function categoryVerticalFormatter (params) {
  return str
 }
 export function timeVerticalFormatter (params) {
+  console.log(params)
  let str = '<div>'
  params.forEach((item, i) => {
    const tData = item.data[0]