亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

 更新時間:2023年08月28日 11:51:19   作者:前端小咸魚一條  
這篇文章主要給大家介紹了關(guān)于echarts餅圖labelLine線的長度自適應(yīng)設(shè)置的相關(guān)資料,在echarts中,餅圖的標簽線可以通過設(shè)置 labelLine屬性來自定義位置,需要的朋友可以參考下

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

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

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

// 標簽對應(yīng)數(shù)據(jù)的 dataIndex
dataIndex: number
// 標簽對應(yīng)的數(shù)據(jù)類型,只在關(guān)系圖中會有 node 和 edge 數(shù)據(jù)類型的區(qū)分
dataType?: string
// 標簽對應(yīng)的系列的 index
seriesIndex: number
// 標簽顯示的文本
text: string
// 默認的標簽的包圍盒,由系列默認的標簽布局決定
labelRect: {x: number, y: number, width: number, height: number}
// 默認的標簽水平對齊
align: 'left' | 'center' | 'right'
// 默認的標簽垂直對齊
verticalAlign: 'top' | 'middle' | 'bottom'
// 標簽所對應(yīng)的數(shù)據(jù)圖形的包圍盒,可用于定位標簽位置
rect: {x: number, y: number, width: number, height: number}
// 默認引導(dǎo)線的位置,目前只有餅圖(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], // 關(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線的長度自適應(yīng)設(shè)置的文章就介紹到這了,更多相關(guān)echarts labelLine線長度自適應(yīng)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • ES6新特性之Symbol類型用法分析

    ES6新特性之Symbol類型用法分析

    這篇文章主要介紹了ES6新特性之Symbol類型用法,結(jié)合形式分析了Symbol類型的功能、使用方法及相關(guān)注意事項,需要的朋友可以參考下
    2017-03-03
  • javascript json字符串到j(luò)son對象轉(zhuǎn)義問題

    javascript json字符串到j(luò)son對象轉(zhuǎn)義問題

    今天小編就為大家分享一篇關(guān)于javascript json字符串到j(luò)son對象轉(zhuǎn)義問題,小編覺得內(nèi)容挺不錯的,現(xiàn)在分享給大家,具有很好的參考價值,需要的朋友一起跟隨小編來看看吧
    2019-01-01
  • javascript對HTML字符轉(zhuǎn)義與反轉(zhuǎn)義

    javascript對HTML字符轉(zhuǎn)義與反轉(zhuǎn)義

    這篇文章主要介紹了javascript對HTML字符轉(zhuǎn)義與反轉(zhuǎn)義,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-12-12
  • JS forEach跳出循環(huán)2種實現(xiàn)方法

    JS forEach跳出循環(huán)2種實現(xiàn)方法

    這篇文章主要介紹了JS forEach跳出循環(huán)2種實現(xiàn)方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
    2020-06-06
  • ES6 Generator基本使用方法示例

    ES6 Generator基本使用方法示例

    這篇文章主要介紹了ES6 Generator基本使用方法,結(jié)合實例形式分析了ES6 Generator基本功能、使用方法與操作注意事項,需要的朋友可以參考下
    2020-06-06
  • 如何在微信小程序中實現(xiàn)Mixins方案

    如何在微信小程序中實現(xiàn)Mixins方案

    這篇文章主要給大家介紹了關(guān)于如何在微信小程序中實現(xiàn)Mixins方案的相關(guān)資料,文中通過示例代碼介紹的非常詳細,對大家學習或者使用微信小程序具有一定的參考學習價值,需要的朋友們下面來一起學習學習吧
    2019-06-06
  • 將json當數(shù)據(jù)庫一樣操作的javascript lib

    將json當數(shù)據(jù)庫一樣操作的javascript lib

    使用javascript操作JSON的類庫TAFFY DB,具體介紹了:查詢數(shù)據(jù)、添加數(shù)據(jù)、刪除數(shù)據(jù)、修改數(shù)據(jù)。
    2013-10-10
  • Bootstrap導(dǎo)航條可點擊和鼠標懸停顯示下拉菜單的實現(xiàn)代碼

    Bootstrap導(dǎo)航條可點擊和鼠標懸停顯示下拉菜單的實現(xiàn)代碼

    這篇文章主要介紹了Bootstrap導(dǎo)航條可點擊和鼠標懸停顯示下拉菜單的實現(xiàn)代碼的相關(guān)資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下
    2016-06-06
  • JavaScript實現(xiàn)左右滾動電影畫布

    JavaScript實現(xiàn)左右滾動電影畫布

    這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)左右滾動電影畫布,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-02-02
  • html中通過JS獲取JSON數(shù)據(jù)并加載的方法

    html中通過JS獲取JSON數(shù)據(jù)并加載的方法

    本篇內(nèi)容主要給大家講了如何通過javascript解析JSON并得到數(shù)據(jù)后添加到HTML中的方法,需要的朋友參考下。
    2017-11-11

最新評論