让echarts折线图的某一拐点变红

最近用echarts做了一个血压心率的折线图,记录下项目中遇到的问题:


让echarts折线图的某一拐点变红_第1张图片

如图,当某一点的血压或者心率异常,需要将该点设置红色,相关代码如下:

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'


                                  }


                        ],


大功告成!

你可能感兴趣的:(让echarts折线图的某一拐点变红)