diff --git a/src/assets/css/components/views/charts2/npmEventsByType.scss b/src/assets/css/components/views/charts2/npmEventsByType.scss
index b7aa9880..de0904e5 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: 100%;
+        width: 50%;
       }
       .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 a8feb942..007aa33d 100644
--- a/src/views/charts2/charts/npm/NpmEventsByType.vue
+++ b/src/views/charts2/charts/npm/NpmEventsByType.vue
@@ -8,6 +8,23 @@
       <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 :style="`width: 9px;height: 9px;background-color: ${legend.color};margin-right: 5px;`"></div>
+                <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>
@@ -23,6 +40,7 @@ import ChartNoData from '@/views/charts/charts/ChartNoData'
 import chartMixin from '@/views/charts2/chart-mixin'
 import ChartError from '@/components/common/Error'
 import axios from 'axios'
+import { chartColor5 } from '@/utils/constants'
 
 export default {
   name: 'NpmEventsByType',
@@ -56,13 +74,35 @@ export default {
   },
   methods: {
     init () {
+      const _this = this
       const dom = document.getElementById('chart')
       !this.myChart && (this.myChart = echarts.init(dom))
       this.chartOption = pieChartOption3
       this.chartOption.series[0].data = this.chartData
+      console.log('查看数据', this.chartData)
+      console.log('查看option', this.chartOption)
       this.chartOption.series[0].label = {
-        show: false
+        show: true,
+        position: 'center',
+        fontFamily: 'NotoSansHans-Medium',
+        fontSize: 20,
+        fontWeight: 500,
+        formatter: function () {
+          let num = 0
+          _this.chartData.forEach(t => {
+            num += t.value
+          })
+          return num
+        }
       }
+      this.myChart.on('mouseover', function () {
+        _this.chartOption.series[0].label.show = false
+        _this.myChart.setOption(_this.chartOption)
+      })
+      this.myChart.on('mouseout', function () {
+        _this.chartOption.series[0].label.show = true
+        _this.myChart.setOption(_this.chartOption)
+      })
       this.myChart.setOption(this.chartOption)
     },
     eventsByTypeData () {
@@ -92,6 +132,9 @@ export default {
           this.chartData = arrData.sort((a, b) => { return b.value - a.value })
           this.$nextTick(() => {
             if (this.chartData.length > 0) {
+              this.chartData.forEach((t, i) => {
+                t.color = chartColor5[i]
+              })
               if (!this.isUnitTesting) {
                 this.init()
               }
diff --git a/src/views/charts2/charts/options/echartOption.js b/src/views/charts2/charts/options/echartOption.js
index 44d16cef..fb40ff8c 100644
--- a/src/views/charts2/charts/options/echartOption.js
+++ b/src/views/charts2/charts/options/echartOption.js
@@ -130,53 +130,15 @@ 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%'],
       avoidLabelOverlap: false,
       emphasis: {
         label: {
-          show: false,
+          show: true,
           fontSize: 20,
           fontWeight: 500,
           fontFamily: 'NotoSansHans-Medium',
diff --git a/test/views/charts2/charts/npm/NpmEventsByType.test.js b/test/views/charts2/charts/npm/NpmEventsByType.test.js
index d3c4b6c6..ee2af046 100644
--- a/test/views/charts2/charts/npm/NpmEventsByType.test.js
+++ b/test/views/charts2/charts/npm/NpmEventsByType.test.js
@@ -31,25 +31,25 @@ function axiosPostAndMounted (data) {
 }
 
 describe('views/charts2/charts/npm/NpmEventsByType.vue测试', () => {
-  // test('类型分类事件统计信息： npm events 类型分类事件图 ', async () => {
-  //   axiosPostAndMounted()
-  //
-  //   await new Promise(resolve => setTimeout(() => {
-  //     // type
-  //     const testNode0 = wrapper.get('[test-id="testNode0"]')
-  //     const testNode1 = wrapper.get('[test-id="testNode1"]')
-  //
-  //     expect(testNode0.text()).toEqual('dns error')
-  //     expect(testNode1.text()).toEqual('http error')
-  //
-  //     // total
-  //     const total0 = wrapper.get('[test-id="total0"]')
-  //     const total1 = wrapper.get('[test-id="total1"]')
-  //     expect(total0.text()).toEqual('151')
-  //     expect(total1.text()).toEqual('32')
-  //     resolve()
-  //   }, 200))
-  // })
+  test('类型分类事件统计信息： npm events 类型分类事件图 ', async () => {
+    axiosPostAndMounted()
+
+    await new Promise(resolve => setTimeout(() => {
+      // type
+      const testNode0 = wrapper.get('[test-id="testNode0"]')
+      const testNode1 = wrapper.get('[test-id="testNode1"]')
+
+      expect(testNode0.text()).toEqual('dns error')
+      expect(testNode1.text()).toEqual('http error')
+
+      // total
+      const total0 = wrapper.get('[test-id="total0"]')
+      const total1 = wrapper.get('[test-id="total1"]')
+      expect(total0.text()).toEqual('151')
+      expect(total1.text()).toEqual('32')
+      resolve()
+    }, 200))
+  })
   test('类型分类事件统计信息： npm events 类型分类事件图无数据 ', async () => {
     axiosPostAndMounted(mockData.empty.data)
 
@@ -59,19 +59,19 @@ describe('views/charts2/charts/npm/NpmEventsByType.vue测试', () => {
       resolve()
     }, 200))
   })
-  // test('类型分类事件统计信息： npm events 类型分类事件图无Http Error类型 ', async () => {
-  //   const data = JSON.parse(JSON.stringify(mockData.common.data))
-  //   data.data.data.result = data.data.data.result.filter(item => item.eventType !== 'http error')
-  //   axiosPostAndMounted(data)
-  //
-  //   await new Promise(resolve => setTimeout(() => {
-  //     const testNode0 = wrapper.get('[test-id="testNode0"]')
-  //     expect(testNode0.text()).toEqual('dns error')
-  //
-  //     // total
-  //     const total0 = wrapper.get('[test-id="total0"]')
-  //     expect(total0.text()).toEqual('151')
-  //     resolve()
-  //   }, 200))
-  // })
+  test('类型分类事件统计信息： npm events 类型分类事件图无Http Error类型 ', async () => {
+    const data = JSON.parse(JSON.stringify(mockData.common.data))
+    data.data.data.result = data.data.data.result.filter(item => item.eventType !== 'http error')
+    axiosPostAndMounted(data)
+
+    await new Promise(resolve => setTimeout(() => {
+      const testNode0 = wrapper.get('[test-id="testNode0"]')
+      expect(testNode0.text()).toEqual('dns error')
+
+      // total
+      const total0 = wrapper.get('[test-id="total0"]')
+      expect(total0.text()).toEqual('151')
+      resolve()
+    }, 200))
+  })
 })