echarts餅圖labelLine線的長度自適應設置

更新時間：2023年08月28日 11:51:19 作者：前端小咸魚一條

這篇文章主要給大家介紹了關于echarts餅圖labelLine線的長度自適應設置的相關資料,在echarts中,餅圖的標簽線可以通過設置 labelLine屬性來自定義位置,需要的朋友可以參考下

基本思路：首先求出中心點的位置，然后判斷一下當前l(fā)abel的位置是左邊還是右邊，如果是左邊的話，中心點的位置減去 label的寬度，如果是右邊的話中心點的位置加上 label的寬度。因為圖的大小不一樣可根據(jù)實際情況添加一個數(shù)值，我這邊添加的是50

labelLayout:標簽的統(tǒng)一布局配置。該配置項是在每個系列默認的標簽布局基礎上，統(tǒng)一調(diào)整標簽的(x, y)位置，標簽對齊等屬性以實現(xiàn)想要的標簽布局效果。

該配置項也可以是一個有如下參數(shù)的回調(diào)函數(shù)

// 標簽對應數(shù)據(jù)的 dataIndex
dataIndex: number
// 標簽對應的數(shù)據(jù)類型，只在關系圖中會有 node 和 edge 數(shù)據(jù)類型的區(qū)分
dataType?: string
// 標簽對應的系列的 index
seriesIndex: number
// 標簽顯示的文本
text: string
// 默認的標簽的包圍盒，由系列默認的標簽布局決定
labelRect: {x: number, y: number, width: number, height: number}
// 默認的標簽水平對齊
align: 'left' | 'center' | 'right'
// 默認的標簽垂直對齊
verticalAlign: 'top' | 'middle' | 'bottom'
// 標簽所對應的數(shù)據(jù)圖形的包圍盒，可用于定位標簽位置
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|}\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
        }
      }

總結(jié)

到此這篇關于echarts餅圖labelLine線的長度自適應設置的文章就介紹到這了,更多相關echarts labelLine線長度自適應內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: