ECharts饼图labelLine长度自适应实现方案

// 标签对应数据的 dataIndex
dataIndex: number
// 标签对应的数据类型，只在关系图中会有 node 和 edge 数据类型的区分
dataType?: string
// 标签对应的系列的 index
seriesIndex: number
// 标签显示的文本
text: string
// 默认的标签的包围盒，由系列默认的标签布局决定
labelRect: {x: number, y: number, width: number, height: number}
// 默认的标签水平对齐
align: 'left' | 'center' | 'right'
// 默认的标签垂直对齐
verticalAlign: 'top' | 'middle' | 'bottom'
// 标签所对应的数据图形的包围盒，可用于定位标签位置
rect: {x: number, y: number, width: number, height: number}
// 默认引导线的位置，目前只有饼图(pie)和漏斗图(funnel)有默认标签位置
// 如果没有该值则为 null
labelLinePoints?: number[][]

自适应引导线代码实现

  labelLayout: (params) => {
            const isLeft = params.labelRect.x < this.curEChartObj.getWidth() / 2
            const centerX = this.curEChartObj.getWidth() / 2
            let newX = 0
            if (isLeft) {
              newX = centerX - 50 - params.labelRect.width
            } else {
              newX = centerX + 50 + params.labelRect.width
            }
            const points = params.labelLinePoints
            points[2][0] = isLeft
              ? newX + 10
              : newX
            return {
              x: newX,
              labelLinePoints: points
            }
          },

完整配置示例

const option = {
        color: ['#94b6f3', '#5087ec', '#b9cff7'],
        legend: {
          show: false
        },
        grid: {
          top: '1px',
          right: '1px',
          bottom: '1px',
          left: '2px'
        },
        series: {
          type: 'pie',
          radius: ['45%', '60%'],
          center: ['50%', '50%'],
          itemStyle: {
            borderColor: '#fff',
            borderWidth: 1
          },
          label: {
            alignTo: 'edge',
            formatter: '{name|{b}}\n{time|{c}人}',
            minMargin: 5,
            edgeDistance: 10,
            lineHeight: 15,
            width: 58,
            padding: [0, 6, 0, 10], // 关键代码！关键代码！关键代码！
            rich: {
              name: {
                align: 'left'
              },
              time: {
                fontSize: 12,
                color: '#333',
                align: 'left'
              }
            }
          },
          labelLine: {
            length: 15,
            length2: 0,
            maxSurfaceAngle: 80
          },
          labelLayout: (params) => {
            const isLeft = params.labelRect.x < this.curEChartObj.getWidth() / 2
            const centerX = this.curEChartObj.getWidth() / 2
            let newX = 0
            if (isLeft) {
              newX = centerX - 50 - params.labelRect.width
            } else {
              newX = centerX + 50 + params.labelRect.width
            }
            const points = params.labelLinePoints
            points[2][0] = isLeft
              ? newX + 10
              : newX
            return {
              x: newX,
              labelLinePoints: points
            }
          },
          data: pieData
        }
      }