当前位置: 首页 > Web前端 > vue.js

Echarts自定义标签格式化器样式

时间:2023-03-31 22:07:24 vue.js

如图,我需要自定义显示千价和字体样式调整。根据官方文档,可以通过formatter函数自定义返回的内容。通过|调整每个字符的样式自定义属性名称结合rich.直接上代码option1:{tooltip:{trigger:'item',formatter:'{a}
{b}:¥{c}({d}%)'},series:[{name:'费用占比',type:'pie',radius:[50,140],roseType:'area',itemStyle:{borderRadius:10,borderColor:'#fff',borderWidth:2},label:{formatter(params){return`{name|${params.name}}\n¥{value|${(+params.value).toLocaleString('en-US')}}{percent|${params.percent}}%`},rich:{name:{color:'#86909C',fontSize:12,lineHeight:26},value:{color:'#1D2129',fontSize:14,lineHeight:22},percent:{color:'#1D2129',fontSize:14,lineHeight:22}}},数据:[{value:10000,name:'玫瑰2'},{值:5000,名称:'玫瑰2'},{值:2000,名称:'玫瑰3'},{值:1000,名称:'玫瑰5'},{值:1000,名称:'玫瑰6'}]}]}