[echarts] rich属性的使用和调整label显示位置_echarts 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
	}
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

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
	}
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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