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