echarts formatter_echarts仿支付宝饼图

最新的活动一个需求仿支付宝饼图，作为一个前端画了一天是不是太过分了，哈哈哈

支付宝的的账单统计中的饼图(请忽略我和这个月过分的花费)

我们设计的饼图

使用的echarts插件，因为之前没用canvas，画个饼还行，那个标示线标注自己画的画觉得更难，所以选择了echarts。

(1)标注线脱离饼：看尽了官网的饼图参数配置，并没有参数设置可以使标示线脱离饼图，于是画了两个数据源相同的饼，外层的饼设置成透明，这样就使标注线和饼脱离了。

(2)标注线头部加点：内饼的标注线颜色设置成透明，末尾画了点，这里尝试了好几种方式，这个点只能设置在标示线的末尾，设置不到头部，这也是很头疼的了。点的颜色需要通过循环的方式设置和饼同步

item.label = {normal: {show: true,    formatter:'{b|}',    rich: {b: {height: 4,        width: 4,        lineHeight: 4,        padding: [0, -4],        borderRadius: 4,        backgroundColor:dataPersent[i] > this.minAngleNum ? color[i] : 'transparent'      }
    },  }
}

(3)标注线上的指示百分比文字：formatter中给文字最后加上'\n\n'就可以使文字占位到标注线上方，然后通过padding设置文字的位置。这里也有一个坑，那就是这个不能用rem适配，安卓和ios上有2大概两像素的差距，所以要做适配，而且距离是距离近饼处的距离，所以还要根据百分比的位数做适配，适配了很多种情况，也是没谁了。