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+ ' '+d;
return '{a|'+value+ ' '+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
},
},
 
},
 
},
}
] ,
原文地址:https://www.cnblogs.com/bride/p/12964104.html