From 6e698ba60c9a3c9740e452bdb346317f157a5ecb Mon Sep 17 00:00:00 2001
From: hanyuxia <hanyuxia@geedgenetworks.com>
Date: Tue, 8 Mar 2022 12:09:41 +0800
Subject: [PATCH] =?UTF-8?q?CN-341=20Dashboard--dns=20=E9=A5=BC=E5=9B=BE?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/tools.js                      |  6 ++
 src/views/charts/charts/ChartEchart.vue | 73 ++++++++++++++++++++++---
 2 files changed, 71 insertions(+), 8 deletions(-)

diff --git a/src/utils/tools.js b/src/utils/tools.js
index 8427d3f9..1280e719 100644
--- a/src/utils/tools.js
+++ b/src/utils/tools.js
@@ -458,6 +458,12 @@ export function humpToLine (name) {
   }
   return name.replace(/([A-Z])/g, '_$1').toLowerCase()
 }
+//排序功能
+export function sortBy (i) {
+  return function (a, b) {
+    return b[i] - a[i]
+  }
+}
 // 搜索功能：对象转字符串
 export function objToStr (obj) {
   return Object.keys(obj).map(k => {
diff --git a/src/views/charts/charts/ChartEchart.vue b/src/views/charts/charts/ChartEchart.vue
index 767a51ef..cad57cf6 100644
--- a/src/views/charts/charts/ChartEchart.vue
+++ b/src/views/charts/charts/ChartEchart.vue
@@ -5,7 +5,7 @@
 <script>
 import unitConvert from '@/utils/unit-convert'
 import * as echarts from 'echarts'
-import { lineToSpace } from '@/utils/tools'
+import { lineToSpace,sortBy } from '@/utils/tools'
 import { unitTypes } from '@/utils/constants'
 import chartEchartMixin from './chart-echart-mixin'
 import { getOption, isEchartsPie } from './tools'
@@ -36,14 +36,71 @@ export default {
       this.handleYaxis()
 
       if (this.isEchartsPie) {
-        this.chartOption.series[0].data = this.chartData.map(d => {
-          return {
-            name: lineToSpace(d.name),
-            data: d,
-            value: parseInt(d.num),
-            unitType: chartParams.unitType ? chartParams.unitType : 'number'
+        if(chartParams.size && chartParams.size === 'small'){
+          this.chartOption.series[0] = {
+            ...this.chartOption.series[0],
+            radius : ['30%', '45%'],
+            label: {
+              show: false
+            },
+            labelLine: {
+              show: false
+            }
           }
-        })
+          this.chartOption.legend = {
+            ...this.chartOption.legend,
+            left :'60%',
+            itemGap:5,
+            itemWidth:8,
+            itemHeight:8,
+            formatter: function (name) {
+              return name.length > 9 ? name.substr(0, 9) + '...' : name
+              //return echarts.format.truncateText(name, 6, '…');
+            },
+            tooltip: {
+              show: true
+            },
+            textStyle: { //图例文字的样式
+              color: '#666666',
+              fontSize: 12,
+              fontWeight: 400
+            }
+          }
+          let chartDataTmp = []
+          let otherData = []
+          this.chartData.sort(sortBy('num'))
+
+          if(this.chartData.length>5){
+            chartDataTmp = this.chartData.slice(0, 5)
+            chartDataTmp.forEach(data=>{
+              if(data.name===''){
+                data.name = ' '
+              }
+            })
+            let otherSum = 0
+            otherData = this.chartData.slice(5)
+            otherData.forEach(data=>{
+              otherSum = otherSum+data.num
+            })
+            chartDataTmp.push({'num':otherSum,'name':'other'})
+          } else if(this.chartData.length<=5){
+            chartDataTmp = this.chartData.slice(0, this.chartData.length)
+            chartDataTmp.forEach(data=>{
+              if(data.name===''){
+                data.name = ' '
+              }
+            })
+          }
+
+          this.chartOption.series[0].data = chartDataTmp.map(d => {
+            return {
+              name: lineToSpace(d.name),
+              data: d,
+              value: parseInt(d.num),
+              unitType: chartParams.unitType ? chartParams.unitType : 'number'
+            }
+          })
+        }
       } else {
         const seriesTemplate = this.chartOption.series[0]
         this.chartOption.series = this.chartData.map(r => {