echart 中实现折线拐点的显示和指定的样式设置


实现效果:

 

 

 

 折线拐点显示数值,并且设置单独的样式。

1 注意echart版本要大于3.7以上,不然下面设置不生效

series: [{
smooth: true,
// symbol: 'circle',//折线点设置为实心点
data: data,
type: "line",
symbolSize: 8,
label: {
normal: {
show: true ,// 是否显示拐点
textStyle:{color:'#000'},//拐点文字样式
formatter:(params)=>{
let value=(params.value*100).toFixed(2)+'%'
let d='基准值'
if(params.name=='2019-12'){
// return value+ '\n'+d;
return '{a|'+value+ '\n'+d+'}' // 使用样式a对应下面rich的a的样式设置
// return html
}else{
// return '{a|' + value + '}';
return (params.value*100).toFixed(2)+'%'
}
},
rich:{
a:{
color:'red',
fontSize:'14',
lineHeight: 15
},
b:{
color:"red",
lineHeight: 10
},
},
 
},
 
},
}
] ,


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM