最近用echarts做了一个血压心率的折线图，记录下项目中遇到的问题：
如图，当某一点的血压或者心率异常，需要将该点设置红色，相关代码如下：
series:[{
symbol:'emptyCircle',//拐点样式
symbolSize:3.5,//拐点大小
lineStyle:{
color:'rgba(1,139,239,1)', //设置折线的颜色
},
//让每个点显示数值
itemStyle:{
normal:{
label:{
show:true,
fontSize:11,
formatter:function (param) { //拐点文字回调
var currentValue =new String()
currentValue = param.value;
if(currentValue >140){
currentValue =currentValue +'偏高';
}else if(currentValue <90){
currentValue =currentValue +'偏低';
}
return currentValue;
}
},
color:function (param) { //拐点颜色回调
if (param.value >140) {
return '#ff0000';
}else if (param.value <90){
return '#ff0000';
}else {
return 'rgba(1,139,239,1)';
}
}
}
},
},
现在我们已经成功设置了异常拐点的颜色，但是随后发现图例图形的颜色有的也跟着变红了，研究发现图例取折线首个拐点的颜色，我的解决办法是用图片作为图例的图形：
legend:{
data:[
{
name:'高压',
icon:'image://./highPressure.png'
},{
name:'低压',
icon:'image://./lowPressure.png'
},{
name:'心率（脉搏）',
icon:'image://./rate.png'
}
],
大功告成！
网友评论