echarts 饼图标签和图形重叠了如何解决？

Question

我想实现的是这种效果，也是官网的例子

可是我显示出来的效果标签和图形重叠了，如何解决？

这是我的代码：

option.title = {
          text: '121312', // 主标题文本
          subtext: '发薪总额', // 副标题文本
          left: 'center',
          top: '38%',
          textStyle: {
            fontSize: 18,
            color: '#454c5c',
            align: 'center'
          },
          subtextStyle: {
            fontFamily: '微软雅黑',
            fontSize: 14,
            color: '#6c7a89'
          }
        }

        option.series[0].type = 'pie'
        option.series[0].radius = [40, 60]
        option.series[0].itemStyle = {
          borderColor: '#fff',
          borderWidth: 1
        }
        option.series[0].labelLine = {
          length: 15,
          length2: 0,
          maxSurfaceAngle: 80
        }
        option.series[0].label = {
          alignTo: 'edge',
          formatter: '{name|{b}}\n{time|{c} 小时}',
          minMargin: 5,
          edgeDistance: 10,
          lineHeight: 15,
          rich: {
            time: {
              fontSize: 10,
              color: '#999'
            }
          }
        }
        option.series[0].labelLayout = function (params) {
          const isLeft = params.labelRect.x < myChart.getWidth() / 2
          const points = params.labelLinePoints
          // Update the end point.
          points[2][0] = isLeft
            ? params.labelRect.x
            : params.labelRect.x + params.labelRect.width
          return {
            labelLinePoints: points
          }
        }
        option.series[0].data = [
          { value: 1048, name: 'Search Engine' },
          { value: 735, name: 'Direct' },
          { value: 580, name: 'Email' },
          { value: 484, name: 'Union Ads' },
          { value: 320, name: 'sdfsdf' }
        ]

Answer 1

解决了，是因为echarts版本问题，我从4.9升级到5.4就没问题了

    "echarts": "^4.9.0",

升级到

    "echarts": "^5.4.0",

Answer 2

labelLine 加长，textStyle变小，合成一行，然后echarts的渲染区域变大。图表会自动计算排版的

Answer 3

你这是不是设置了固定宽高

option = {
                tooltip: {
                    trigger: 'item',
                    fontSize: 14,
                    formatter: function (a) {
                        var relVal = '<div style="text-align: left;color: #000000;">' + a.marker + a.name + '：' + a.data.valueTwo
                                +  '%' + '&nbsp;&nbsp;' + '(' + a.data.value + '人' + ')' + '</div>'  
                        
                        return relVal
                    },
                },
                series: [
                    {
                        type: 'pie',
                        radius: '50%',
                        data: this.uData
                        },
                        label: {
                            color: '#000000',
                            fontSize: 14,
                            formatter: function (a) {
                                var val = a.name + '：' + a.data.valueTwo + '%' + '  ' + '(' + a.data.value + '人' + ')'
                                return val
                            }
                        },
                        emphasis: {
                            itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            }
            option && myChart.setOption(option, { notMerge: 'true'})