饼图数据项过多时，指示线超出绘图区域

[cxytomo]

One-line summary [问题简述]

饼图数据项过多时，指示线超出绘图区域

Version & Environment [版本及环境]

• ECharts version [ECharts 版本]:3.8.4
• Browser version [浏览器类型和版本]:都存在
• OS Version [操作系统类型和版本]:都存在

Expected behaviour [期望结果]

指示线全部包含在绘图区域内

ECharts option [ECharts配置项]

option = {
            tooltip: {
                trigger: 'item',
                //访问来源
                //ip:数量（百分比）
                backgroundColor: 'rgba(15, 25, 53, 0.8)',
                borderColor: 'rgba(15, 25, 53, 0.8)',
                formatter: function(params) {
                    var _html = '';
                    _html += '<div class="tooltip-wrapper controller-1"><h3 class="tooltip-title">' + params.name + '</h3>';
                    _html += '<div class="tooltip-cont">防护次数占比：' + params.percent + '%</div>';
                    _html += '<div class="tooltip-cont">防护次数：' + thousandBitSeparator(params.value) + '次</div>';
                    _html += '</div>';
                    return _html;
                }
            },
            color: ['#BB312B','#FF7336','#B5DE56','#E7A541','#ABD2FA','#9489E0','#30AEF0','#1676A8','#4598E3','#53E0EA'],
            legend: {
                show: false
            },
            grid: {
                top: '4%',
                bottom: '0',
                containLabel: true
            },
            series: [{
                name: '',
                type: 'pie',
                center : [ '50%', '180' ],
                //startAngle: 0,
                labelLine: {
                    normal: {
                        length: 0,
                        length2: 20,
                        lineStyle: {
                            color: '#fff'
                        }
                    }
                },
                itemStyle: {
                    normal: {
                        opacity: 0.8
                    },
                    emphasis: {
                        opacity: 1
                    }
                },
                label: {
                    normal: {
                        color: '#fff'
                    }
                },
                data: [{
        "percent": "86.49%",
        "name": "业务音乐",
        "value": 65
    }, {
        "name": "业务数媒",
        "percent": "81.08%",
        "value": 40
    }, {
        "percent": "13.51%",
        "name": "业务动漫",
        "value": 4
    }, {
        "name": "业务视讯",
        "percent": "0.00%",
        "value": 1
    }, {
        "value": 2,
        "name": "**院",
        "percent": "0.00%"
    }, {
        "value": 0.5,
        "name": "验收测试",
        "percent": "0.00%"
    }, {
        "name": "验收测试2",
        "percent": "0.00%",
        "value": 0
    }, {
        "percent": "0.00%",
        "name": "业务互娱",
        "value": 0
    }, {
        "percent": "0.00%",
        "name": "互联网业务基地",
        "value": 0
    }, {
        "name": "业务视讯",
        "percent": "0.00%",
        "value": 0
    }, {
        "value": 0,
        "name": "杭研院",
        "percent": "0.00%"
    }, {
        "value": 0,
        "name": "验收测试",
        "percent": "0.00%"
    }, {
        "name": "验收测试2",
        "percent": "0.00%",
        "value": 0
    }, {
        "percent": "0.00%",
        "name": "业务互娱",
        "value": 0
    }, {
        "percent": "0.00%",
        "name": "互联网业务基地",
        "value": 0
    }, {
        "percent": "0.00%",
        "name": "互联网业务基地",
        "value": 0
    }, {
        "percent": "0.00%",
        "name": "互联网业务基地",
        "value": 0
    }, {
        "percent": "0.00%",
        "name": "互联网业务基地",
        "value": 0
    }, {
        "percent": "0.00%",
        "name": "互联网业务基地",
        "value": 0
    }, {
        "percent": "0.00%",
        "name": "互联网业务基地",
        "value": 0
    }, {
        "percent": "0.00%",
        "name": "互联网业务基地",
        "value": 0
    }, {
        "percent": "0.00%",
        "name": "互联网业务基地",
        "value": 0
    }, {
        "percent": "0.00%",
        "name": "互联网业务基地",
        "value": 0
    }, {
        "percent": "0.00%",
        "name": "互联网业务基地",
        "value": 0
    }, {
        "percent": "0.00%",
        "name": "互联网业务基地",
        "value": 0
    }, {
        "percent": "0.00%",
        "name": "互联网业务基地",
        "value": 0
    }, {
        "percent": "0.00%",
        "name": "互联网业务基地",
        "value": 0
    }]
            }]
        };

Other comments [其他信息]

##示例截图

[cxytomo]

数据项数量不定，有多有少，分布也没有规律

[hanfengcan]

想这种情况,不是要合并那些小数据项成其他会合适一点?

[cxytomo]

@hanfengcan 但是需求方想看到所有业务

[airwin]

我们也遇到了类似的问题，应该是饼图的avoidLabelOverlap防标签冲突机制，导致的渲染超出容器，目前还没有好的方案，临时调整一下startAngle来规避，期望官网的解决方案

[airwin]

@cxytomo 我提了一个PR，暂时能够规避标签渲染出范围，可以参考 #8513