echarts餅圖labelLine線的長(zhǎng)度自適應(yīng)設(shè)置
基本思路:首先求出中心點(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)文章希望大家以后多多支持腳本之家!
相關(guān)文章
javascript json字符串到j(luò)son對(duì)象轉(zhuǎn)義問題
今天小編就為大家分享一篇關(guān)于javascript json字符串到j(luò)son對(duì)象轉(zhuǎn)義問題,小編覺得內(nèi)容挺不錯(cuò)的,現(xiàn)在分享給大家,具有很好的參考價(jià)值,需要的朋友一起跟隨小編來看看吧2019-01-01javascript對(duì)HTML字符轉(zhuǎn)義與反轉(zhuǎn)義
這篇文章主要介紹了javascript對(duì)HTML字符轉(zhuǎn)義與反轉(zhuǎn)義,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12JS forEach跳出循環(huán)2種實(shí)現(xiàn)方法
這篇文章主要介紹了JS forEach跳出循環(huán)2種實(shí)現(xiàn)方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-06-06如何在微信小程序中實(shí)現(xiàn)Mixins方案
這篇文章主要給大家介紹了關(guān)于如何在微信小程序中實(shí)現(xiàn)Mixins方案的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用微信小程序具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06將json當(dāng)數(shù)據(jù)庫一樣操作的javascript lib
使用javascript操作JSON的類庫TAFFY DB,具體介紹了:查詢數(shù)據(jù)、添加數(shù)據(jù)、刪除數(shù)據(jù)、修改數(shù)據(jù)。2013-10-10Bootstrap導(dǎo)航條可點(diǎn)擊和鼠標(biāo)懸停顯示下拉菜單的實(shí)現(xiàn)代碼
這篇文章主要介紹了Bootstrap導(dǎo)航條可點(diǎn)擊和鼠標(biāo)懸停顯示下拉菜單的實(shí)現(xiàn)代碼的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06JavaScript實(shí)現(xiàn)左右滾動(dòng)電影畫布
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)左右滾動(dòng)電影畫布,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-02-02html中通過JS獲取JSON數(shù)據(jù)并加載的方法
本篇內(nèi)容主要給大家講了如何通過javascript解析JSON并得到數(shù)據(jù)后添加到HTML中的方法,需要的朋友參考下。2017-11-11