echarts怎么实现如下效果?

Question

想用echarts实现如下效果:边上有白色描边,明显一点如下图:但是现在用边框border实现会有如下问题:代码:

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

    }

};