快捷導(dǎo)航

echarts餅圖labelLine線的長(zhǎng)度自適應(yīng)設(shè)置

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

這篇文章主要給大家介紹了關(guān)于echarts餅圖labelLine線的長(zhǎng)度自適應(yīng)設(shè)置的相關(guān)資料,在echarts中,餅圖的標(biāo)簽線可以通過設(shè)置 labelLine屬性來自定義位置,需要的朋友可以參考下

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

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

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

// 標(biāo)簽對(duì)應(yīng)數(shù)據(jù)的 dataIndex
dataIndex: number
// 標(biāo)簽對(duì)應(yīng)的數(shù)據(jù)類型，只在關(guān)系圖中會(huì)有 node 和 edge 數(shù)據(jù)類型的區(qū)分
dataType?: string
// 標(biāo)簽對(duì)應(yīng)的系列的 index
seriesIndex: number
// 標(biāo)簽顯示的文本
text: string
// 默認(rèn)的標(biāo)簽的包圍盒，由系列默認(rèn)的標(biāo)簽布局決定
labelRect: {x: number, y: number, width: number, height: number}
// 默認(rèn)的標(biāo)簽水平對(duì)齊
align: 'left' | 'center' | 'right'
// 默認(rèn)的標(biāo)簽垂直對(duì)齊
verticalAlign: 'top' | 'middle' | 'bottom'
// 標(biāo)簽所對(duì)應(yīng)的數(shù)據(jù)圖形的包圍盒，可用于定位標(biāo)簽位置
rect: {x: number, y: number, width: number, height: number}
// 默認(rèn)引導(dǎo)線的位置，目前只有餅圖(pie)和漏斗圖(funnel)有默認(rèn)標(biāo)簽位置
// 如果沒有該值則為 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], // 關(guān)鍵代碼！關(guān)鍵代碼！關(guān)鍵代碼！
            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é)

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

您可能感興趣的文章: