echarts饼图labelLine线的长度自适应设置
作者：前端小咸鱼一条
这篇文章主要给大家介绍了关于echarts饼图labelLine线的长度自适应设置的相关资料,在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
}
},
完整代码如下：
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
}
}总结
到此这篇关于echarts饼图labelLine线的长度自适应设置的文章就介绍到这了,更多相关echarts labelLine线长度自适应内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！