echarts 饼图的labelLine 线的长度自适应-Toy模板网

这篇具有很好参考价值的文章主要介绍了echarts 饼图的labelLine 线的长度自适应。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

基本思路：首先求出中心点的位置，然后判断一下当前label的位置是左边还是右边，如果是左边的话，中心点的位置减去 label的宽度，如果是右边的话中心点的位置加上 label的宽度。因为图的大小不一样可根据实际情况添加一个数值，我这边添加的是50

labelLayout:标签的统一布局配置。
该配置项是在每个系列默认的标签布局基础上，统一调整标签的(x, y)位置，标签对齐等属性以实现想要的标签布局效果。

该配置项也可以是一个有如下参数的回调函数

// 标签对应数据的 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
            }
          },

echarts labelline长度,echarts,javascript,前端
完整代码如下：文章来源地址https://www.toymoban.com/news/detail-589298.html

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
        }
      }