vue解决echart饼图比例过小影响交互的问题

饼图一般有两种，第一种为实心圆，第二种为圆环，如南宫玫瑰图

南宫玫瑰图.png

如果是正常的圆，只需要在series添加一个属性startAngle，这个属性代表初始的角度，可以设置大一点

如果是南宫玫瑰图这种，计算出最大值，并放大最大值20%（这个值可以自己定），在渲染数据的时候在还原，比如你的数据格式是这样的：

var data = [{name: 'vpn', value: 10}, {name: 'ids', value: 10000}]

如果数据是这样的那么vpn的数据在图形上显示比例会很小，解决方法：

// 定义一个函数
let max = 0;
getMaxNumber(data) {
    data.forEach(item => {
        // 计算出最大值
       if(item.value >= max) max = item.value
    })
  //随机放大最大值,我这里放大20%
  var number = Math.round(max*0.8)
  // 在原有数据上放大随机值
  var maxData = data.map(item => {
       return {
           value: number + item.value,
           name: item.name
      }
  })
   return maxData 
}

在渲染数据的时候在label的normal下面还原数据如下：

 label: {
    normal: {
        formatter: function(params) {
               return params.value - number
        } 
   }
}