echarts怎么实现如下效果?

Question

想用echarts实现如下效果:

边上有白色描边,明显一点如下图:

但是现在用边框border实现会有如下问题:

代码:

 var option = {
                legend: {
                    textStyle: {
                        color: '#999999',
                        fontSize: '12'
                    },
                    selectedMode: false,
                    bottom: 15,
                    data: []
                },
                series: [{
                    name: '',
                    type: 'pie',
                    radius: ['70%', '30%'],
                    center: ['50%', '46%'],
                    minAngle: 20,
                    data: arr1,
                    silent: true,
                    itemStyle: {
                        normal: {
                            borderColor: '#fff',
                            borderWidth:2,
                            label: {
                                show: true,
                                formatter: function (obj) {
                                    if(obj.data == '101'){
                                        return '';
                                    } else {
                                        return obj.percent.toFixed(0) + '%';
                                    }
                                }
                            }

                        }
                    },
                    label: {
                        normal: {
                            position: 'inside'
                        }
                    }
                }],
                color: ['#E1E1E1'],
                textStyle: {
                    fontSize: 14
                }
            };

Answer 1

用另一个环盖住就可以了.让没有border的环层级高一点,盖住有环的.

 var option = {
    legend: {
        textStyle: {
            color: '#999999',
            fontSize: '12'
        },
        selectedMode: false,
        bottom: 15,
        data: []
    },
    series: [{
        name: '',
        type: 'pie',
        radius: ['30%', '70%'],
        center: ['50%', '46%'],      
        data: arr1,
        zlevel: 2,
        silent: true,
        itemStyle: {
            normal: {
                borderColor: '#fff',
                borderWidth:2,
                label: {
                    show: true,
                    formatter: function (obj) {
                        if(obj.data == '101'){
                            return '';
                        } else {
                            return obj.percent.toFixed(0) + '%';
                        }
                    }
                }

            }
        },
        label: {
            normal: {
                position: 'inside'
            }
        }
    },
    {
        name: '',
        type: 'pie',
        radius: ['31%', '69%'],
        center: ['50%', '46%'],      
        data: arr1,
        zlevel: 3,
        silent: true,
        itemStyle: {
            normal: {             
                label: {
                    show: true,
                    formatter: function (obj) {
                        if(obj.data == '101'){
                            return '';
                        } else {
                            return obj.percent.toFixed(0) + '%';
                        }
                    }
                }

            }
        },
        label: {
            normal: {
                position: 'inside'
            }
        }
    }
    ],
    color: ['#E1E1E1'],
    textStyle: {
        fontSize: 14
    }
};

Answer 2

border有问题？有个方案就是同心圆。