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

实现效果:

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

 

 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 }, },   },   }, } ] ,
上一篇:echart 柱图的label只显示总数


下一篇:Vue中使用echarts图表的两种方式