echarts 饼图的labelLine 线的长度自适应

最新推荐文章于 2024-05-11 12:50:23 发布

nav-item

最新推荐文章于 2024-05-11 12:50:23 发布

阅读量1.2k

点赞数

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/weixin_51747462/article/details/129789997

版权

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.myChart5.getWidth() / 2,
                points = params.labelLinePoints
              points[2][0] = isLeft ? params.labelRect.x : params.labelRect.x + params.labelRect.width
              return {
                labelLinePoints: points
              }
            },  //label线设置

完整代码：

		tbyqEcharts(domId, color, gzVal, czVal) {
			var chartDom = document.getElementById(domId)
			var myChart = echarts.init(chartDom)
			myChart.setOption({
				color,
				series: {
					type: 'pie',
					// radius: ['42%', '60%'],
					radius: ['35%', '50%'],
					// left: 20,
					label: {
						minMargin: 50,
						edgeDistance: 10,
						fontSize: '12px'
					},
					labelLine: {
						lineStyle: {
							type: [5]
						},
						length: 2,
						length2: 1
					},
					labelLayout: function (params) {
						var isLeft = params.labelRect.x < myChart.getWidth() / 2
						var points = params.labelLinePoints
						// Update the end point.
						points[2][0] = isLeft ? params.labelRect.x : params.labelRect.x + params.labelRect.width
						return {
							labelLinePoints: points,
							dy: -10,
							dx: 0
						}
					},
					data: [
						{ value: gzVal, name: '过载' },
						{ value: czVal, name: '重载' }
					]
				}
			})
		},

	mounted() {
		this.$nextTick(() => {
			this.tbyqEcharts('heavy-item-left', ['#5079F8', '#f65c66'], this.tb.gzVal, this.tb.czVal)
			this.tbyqEcharts('heavy-item-right', ['#2076c1', '#f65c66'], this.tb.gzVal, this.tb.czVal)
			this.tbyqEcharts(
				'heavy-item-center',
				['rgba(248,171,80,1)', '#f65c66'],
				this.tb.gzVal,
				this.tb.czVal
			)
		})
	},