首页 前端知识 [echarts] rich属性的使用和调整label显示位置

[echarts] rich属性的使用和调整label显示位置

2024-06-05 13:06:04 前端知识 前端哥 658 410 我要收藏

在这里插入图片描述

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中rich属性的使用和调整label显示位置

转载请注明出处或者链接地址:https://www.qianduange.cn//article/10843.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!