CN-341 Dashboard--dns 饼图调整

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 => {

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 => {
+        if(chartParams.size && chartParams.size === 'small'){
-          return {
+          this.chartOption.series[0] = {
-            name: lineToSpace(d.name),
+            ...this.chartOption.series[0],
-            data: d,
+            radius : ['30%', '45%'],
-            value: parseInt(d.num),
+            label: {
-            unitType: chartParams.unitType ? chartParams.unitType : 'number'
+              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 => {