From e6d7e7b774dde01f9937e6798e5b0a71559243fd Mon Sep 17 00:00:00 2001
From: zhangyu <zhangyu@geedgenetworks.com>
Date: Fri, 10 Dec 2021 16:41:43 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=20stat=20=E5=8C=B9=E9=85=8D=20tex?=
 =?UTF-8?q?t=E7=9A=84=E8=A7=84=E5=88=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/chart/chart/chartStat.vue  | 29 ++++++++++++++++---
 1 file changed, 25 insertions(+), 4 deletions(-)

diff --git a/nezha-fronted/src/components/chart/chart/chartStat.vue b/nezha-fronted/src/components/chart/chart/chartStat.vue
index ec9821cb9..e47363b9d 100644
--- a/nezha-fronted/src/components/chart/chart/chartStat.vue
+++ b/nezha-fronted/src/components/chart/chart/chartStat.vue
@@ -1,10 +1,27 @@
 <template>
   <div class="chart-stat" ref="chart-stat-box">
     <div class="chart-stat-item"  :style="{background:item.mapping ? item.mapping.color.bac : false,height:item.height+'px',width:item.width + 'px'}" v-for="(item,index) in statData" :key="index">
-    <span v-if="item.mapping" :style="{color:item.mapping.color.text}">
-        {{handleDisplay(item.mapping.display, { ...item.label, value: item.showValue })}}
-    </span>
-      <span v-else>{{item.showValue}}</span>
+      <span v-if="chartInfo.param.text==='all'">
+        <span v-if="item.mapping" :style="{color:item.mapping.color.text}">
+          {{item.legend + ': ' + handleDisplay(item.mapping.display, { ...item.label, value: item.showValue })}}
+        </span>
+        <span v-else>{{item.legend + ': ' + item.showValue}}</span>
+      </span>
+      <span v-if="chartInfo.param.text==='legend'">
+        <span v-if="item.mapping" :style="{color:item.mapping.color.text}">
+          {{item.legend + ': ' + handleDisplay(item.mapping.display, { ...item.label, value: item.showValue })}}
+        </span>
+        <span v-else>{{item.legend}}</span>
+      </span>
+      <span v-if="chartInfo.param.text==='value'">
+        <span v-if="item.mapping" :style="{color:item.mapping.color.text}">
+          {{handleDisplay(item.mapping.display, { ...item.label, value: item.showValue })}}
+        </span>
+        <span v-else>{{item.showValue}}</span>
+      </span>
+      <span v-if="chartInfo.param.text==='none'">
+        ' '
+      </span>
     </div>
   </div>
 </template>
@@ -36,6 +53,7 @@ export default {
     },
     initStatData (chartInfo, originalDatas) {
       return new Promise(resolve => {
+        let colorIndex = 0
         originalDatas.forEach((originalData, expressionIndex) => {
           originalData.forEach((data, dataIndex) => {
             const stat = {
@@ -44,15 +62,18 @@ export default {
               label: {},
               width: '',
               height: '',
+              legend: '',
               mapping: {
 
               }
             }
             stat.value = getMetricTypeValue(data.values, chartInfo.param.statistics)
             stat.label = data.metric
+            stat.legend = this.handleLegend(chartInfo, data, expressionIndex, dataIndex, colorIndex)
             stat.showValue = chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(stat.value, null, -1, 2)
             stat.mapping = this.selectMapping(stat.value, chartInfo.param.valueMapping)
             this.statData.push(stat)
+            colorIndex++
           })
         })
         resolve()