CN-269 图表重构-echarts类型图表重构

src/views/charts/Chart2.vue

@@ -18,7 +18,14 @@
           @showLoading="showLoading"
       ></chart-map>
 
-      <div v-else style="height: 100%; width: 100%; background-color: lightcyan;"></div>
+      <chart-echart-line
+          v-else-if="isEchartsLine"
+          :chart-info="chartInfo"
+          :chart-data="chartData"
+          :result-type="resultType"
+          :query-params="queryParams"
+          @showLoading="showLoading"
+      ></chart-echart-line>
 
     </template>
   </div>
@@ -29,8 +36,10 @@ import Loading from '@/components/common/Loading'
 import ChartNoData from './charts/ChartNoData'
 import ChartTabs from './charts/ChartTabs'
 import ChartMap from './charts/ChartMap'
+import ChartEchartLine from './charts/ChartEchartLine'
 import {
   isEcharts,
+  isEchartsLine,
   isSingleValue,
   isTable,
   isActiveIpTable,
@@ -67,11 +76,13 @@ export default {
     Loading,
     ChartNoData,
     ChartTabs,
-    ChartMap
+    ChartMap,
+    ChartEchartLine
   },
   props: {
     chartInfo: Object,
     chartData: [Object, Array, String], // 数据在父组件查询后传入，本组件内不查询，只根据接传递的数据来渲染
+    resultType: Object, // 返回数据的类型
     queryParams: Object, // 接口请求参数
     customChartOption: Object, // 需要自定义echarts的option时传入，非必须；传入该值时仍需传对应格式的chartData
     isFullscreen: Boolean,
@@ -102,6 +113,7 @@ export default {
   setup (props) {
     return {
       isEcharts: isEcharts(props.chartInfo.type),
+      isEchartsLine: isEchartsLine(props.chartInfo.type),
       isEchartsTimeBar: isEchartsTimeBar(props.chartInfo.type),
       isEchartsCategoryBar: isEchartsCategoryBar(props.chartInfo.type),
       isEchartsWithTable: isEchartsWithTable(props.chartInfo.type),

src/views/charts/PanelChart.vue

@@ -3,7 +3,7 @@
   <div :class="{'panel-chart--fullscreen': isFullscreen, 'panel-chart--title-chart': isTitle}" class="panel-chart" :id="isFullscreen ? ('chart-screen-' + chartInfo.id ) : ('chart-local-' + chartInfo.id)">
     <!-- title和工具栏，支持浮动 -->
     <chart-header
-        v-if="!isFullscreen && showHeader && !isSingleValue && !isTabs"
+        v-if="!isFullscreen && showHeader && !isSingleValue"
         :is-error="isError"
         :error-info="errorInfo"
         :chart-data="chartData"
@@ -18,6 +18,7 @@
         ref="chart"
         v-if="(!isGroup || !chartInfo.param.collapse) && !isTitle"
         :chart-data="chartData"
+        :result-type="resultType"
         :chart-info="chartInfo"
         :query-params="queryParams"
         :panel-lock="panelLock"
@@ -87,6 +88,7 @@ export default {
   data () {
     return {
       chartData: null, // 图表要渲染的数据，请求接口得到，传入chart组件，chart组件内除特别情况(多级)外不做查询
+      resultType: null, // 返回数据的类型
       loading: false,
       isError: false, // 接口响应是否报错
       errorInfo: '', // 接口具体错误信息
@@ -171,6 +173,7 @@ export default {
           get(replaceUrlPlaceholder(requestUrl, this.queryParams)).then(response => {
             if (response.code === 200) {
               this.chartData = response.data.result
+              this.resultType = response.data.resultType
               this.isError = false
             } else {
               this.isError = true

src/views/charts/charts/ChartEchartLine.vue

@@ -0,0 +1,102 @@
+<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 {
+  line
+} from '@/views/charts/charts/options/line'
+
+export default {
+  name: 'ChartEchartLine',
+  data () {
+    return {
+      myChart: null,
+      chartOption: null
+    }
+  },
+  props: {
+    chartInfo: Object,
+    chartData: [Array, Object],
+    resultType: Object,
+    queryParams: Object
+  },
+  methods: {
+    initMap (id) {
+      const chartParams = this.chartInfo.params
+      const dom = document.getElementById(id)
+      !this.myChart && (this.myChart = echarts.init(dom))
+      this.chartOption = this.$_.cloneDeep(line)
+      if (chartParams.showLegend === false) {
+        this.chartOption.legend.show = false
+      }
+      const seriesTemplate = this.chartOption.series[0]
+      const allZero = this.timeLineIsAllZero(this.chartData)
+      if (allZero) {
+        this.chartOption.yAxis = {
+          ...this.chartOption.yAxis,
+          min: 0,
+          max: 5,
+          interval: 1
+        }
+      }
+      this.chartOption.series = this.chartData.map(r => {
+        return {
+          ...seriesTemplate,
+          name: legendMapping[`${this.entity && this.entity.ip ? 'ip_' : ''}${r.legend}`] ? legendMapping[`${this.entity && this.entity.ip ? 'ip_' : ''}${r.legend}`] : lineToSpace(r.legend),
+          data: r.values.map(v => [Number(v[0]) * 1000, Number(v[1]), chartParams.unitType])
+        }
+      })
+      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
+      }
+      this.loadEchartLine()
+    },
+    loadEchartLine () {
+      this.$emit('showLoading', true)
+      try {
+        this.myChart.setOption(this.chartOption)
+      } finally {
+        setTimeout(() => {
+          this.$emit('showLoading', false)
+        }, 200)
+      }
+    },
+    timeLineIsAllZero (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.initMap(`chart${this.chartInfo.id}`)
+      }
+    }
+  }
+}
+</script>

src/views/charts/charts/tools.js

@@ -62,6 +62,10 @@ export function isMapLine (type) {
 export function isMapBlock (type) {
   return type === 2
 }
+/* 普通折线图 */
+export function isEchartsLine (type) {
+  return type === 11
+}
 /* 带统计的折线图 */
 export function isEchartsWithStatistics (type) {
   return type === 12
@@ -147,7 +151,6 @@ export function isBlock (type) {
   return type === 95
 }
 
-
 /* 根据type获取图表分类 */
 const typeCategory = {
   MAP: 'map',
@@ -173,7 +176,6 @@ export function getTypeCategory (type) {
   }
 }
 
-
 /* 根据type获取布局 */
 export const layoutConstant = {
   HEADER: 'header',
@@ -190,7 +192,6 @@ export function getLayout (type) {
   return layout
 }
 
-
 export function getGroupHeight (arr) {
   if (arr.length) {
     let lastItem = []