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显示位置