From 791ce5792e0df36d87148b25b35ec3e5048c7980 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E6=B4=AA=E6=B4=AA?= <2498601771@qq.com>
Date: Mon, 24 Jul 2023 15:08:46 +0800
Subject: [PATCH] =?UTF-8?q?CN-1135=20fix:=20=E7=BB=9F=E4=B8=80NPM=E7=9A=84?=
 =?UTF-8?q?=E7=8E=AF=E5=BD=A2=E5=9B=BE=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/charts2/npmEventsByType.scss        |  2 +-
 .../charts2/charts/npm/NpmEventsByType.vue    | 16 --------
 .../charts2/charts/options/echartOption.js    | 38 +++++++++++++++++++
 3 files changed, 39 insertions(+), 17 deletions(-)

diff --git a/src/assets/css/components/views/charts2/npmEventsByType.scss b/src/assets/css/components/views/charts2/npmEventsByType.scss
index de0904e5..b7aa9880 100644
--- a/src/assets/css/components/views/charts2/npmEventsByType.scss
+++ b/src/assets/css/components/views/charts2/npmEventsByType.scss
@@ -25,7 +25,7 @@
       align-items: center;
       .chart-drawing {
         height: 100%;
-        width: 50%;
+        width: 100%;
       }
       .npm-event-pie-legends {
         display: flex;
diff --git a/src/views/charts2/charts/npm/NpmEventsByType.vue b/src/views/charts2/charts/npm/NpmEventsByType.vue
index fe11f24d..a8feb942 100644
--- a/src/views/charts2/charts/npm/NpmEventsByType.vue
+++ b/src/views/charts2/charts/npm/NpmEventsByType.vue
@@ -8,22 +8,6 @@
       <chart-no-data v-if="isNoData" test-id="noData"></chart-no-data>
       <div class="npm-event-pies" v-show="!isNoData">
         <div class="chart-drawing" id="chart"></div>
-        <div class="npm-event-pie-legends">
-          <div class="npm-event-pie-legend">
-            <div class="npm-event-pie-legend-title" v-if="chartData.length > 0">{{ $t('overall.type') }}</div>
-            <template v-for="(legend, index) in chartData" :key="index">
-              <div class="npm-event-pie-legend-type">
-                <div class="npm-event-pie-legend-type-severity" :test-id="`testNode${index}`">{{legend.name}}</div>
-              </div>
-            </template>
-          </div>
-          <div class="npm-event-pie-legend">
-            <div class="npm-event-pie-legend-title" v-if="chartData.length > 0">{{ $t('network.total') }}</div>
-            <template v-for="(legend, index) in chartData" :key="index">
-              <div class="npm-event-pie-legend-total" :test-id="`total${index}`">{{legend.value}}</div>
-            </template>
-          </div>
-        </div>
       </div>
     </div>
   </div>
diff --git a/src/views/charts2/charts/options/echartOption.js b/src/views/charts2/charts/options/echartOption.js
index adfcf36f..44d16cef 100644
--- a/src/views/charts2/charts/options/echartOption.js
+++ b/src/views/charts2/charts/options/echartOption.js
@@ -130,8 +130,46 @@ export const pieChartOption2 = {
 }
 export const pieChartOption3 = {
   color: chartColor5,
+  legend: {
+    orient: 'vertical',
+    top: '25%',
+    left: '50%',
+    itemGap: 4,
+    itemWidth: 15,
+    itemHeight: 7,
+    textStyle: {
+      fontFamily: 'SimHei',
+      rich: {
+        a: {
+          width: 60,
+          align: 'left',
+          fontWeight: 'bold'
+        },
+        b: {
+          align: 'left',
+          fontSize: 12,
+          color: '#575757'
+        }
+      }
+    },
+    tooltip: {
+      show: true
+    },
+    formatter: function (name) {
+      const data = pieChartOption3.series[0].data
+      let value
+      data.forEach(t => {
+        if (t.name === name) {
+          value = t.value
+        }
+      })
+      name = name.length > 9 ? name.substr(0, 9) + '...' : name
+      return ['{a|' + ' ' + value + '}' + '{b|' + name + '}']
+    }
+  },
   series: [
     {
+      right: '50%',
       name: 'Access From',
       type: 'pie',
       radius: ['40%', '50%'],