Echarts中rich属性的使用和调整label显示位置

原创已于 2022-06-30 21:47:16 修改 · 1.3w 阅读

17 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #javascript

于 2022-06-30 10:55:22 首次发布

echarts使用心得专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍了如何在Echarts中使用rich属性定制Pie图的标签样式，包括自定义颜色、字体和布局，并展示了如何在tooltip中重写样式以适应不同场景。还讨论了如何调整扇区角度以优化标签显示。

在echarts中rich主要是用于设置用户自定样式，我们可以在title，legend中使用rich，比如下面这个需求的label就可以用rich属性来实现。

label实现代码：

series: [
		    {
			    type: 'pie',
				radius: ['40%', '60%'],
				avoidLabelOverlap: false,
				itemStyle: {
					borderRadius: 4,
					borderColor: '#fff',
					borderWidth: 2
				},
				label: {
					show: true,
					position: 'outside',
					lineHeight: 18,// 行高
					formatter: (params) => {
                        // a,b为rich属性中定义的样式名，相当于css中的class
						const arr = [
							`{a|${params.name}}`,
							`{b|${that.change(params.value)}万}`,
							`{b|${params.percent}%}`
						]
					    return arr.join('\n') // 数组转成字符串并换行
					},
					rich: {
						a: {
							color: '#333',
							fontWeight: 'bold',
							fontSize: 14,
							fontFamily: 'Microsoft YaHei'
						    },
						b: {
							color: '#666',
							fontSize: 13,
							align: 'left'
						    }
					    }
				    },
					labelLine: {
						show: true
					},
					data: data
			}
		]

tooltip中没有rich属性，故不能使用rich改变样式。我们可以直接在formatter属性中重写样式：

tooltip: {
	trigger: 'item',
	formatter: (params) => {
		// 定义样式
		const tooltip_title = `font-size: 13px;color: \#333;font-weight:bold`
		const tooltip_text = `font-size: 13px;color: \#666;margin-left:12px;`
        
        // change是自己定义的处理函数
		const str = `${params.marker} <span style="${tooltip_title}">${params.name}</span>
		            <br/> <span style="${tooltip_text}">${that.change(params.value)}万      
                    </span>
		            <br/> <span style="${tooltip_text}">${params.percent}%</span>`
		return str
	}
},

我们的echarts容器有时候可能比较小，标签可能会显示不完整，会被遮挡住。我们可以调整扇区的最小角度和起始角度来调整位置。

series: [
	{
		type: 'pie',
		radius: ['50%', '70%'],
		avoidLabelOverlap: false,
		minAngle: 15,//扇区最小角度
		startAngle: 190, //扇区起始角度
		itemStyle: {
			borderRadius: 4,
			borderColor: '#fff',
			borderWidth: 2
		},
    }
]