需求:当markline的值为0的时候不显示,不为0的时候则显示。
我的图里有多条markline,如下定义。
markLine: {
tooltip: {
formatter: '{b}:{c}',
},
label: {
position: 'end',
formatter: '{b}:{c}',
silent: true
},
symbol: "none",
data: [
// UCL和LCL的markline
{
lineStyle: { //警戒线的样式 ,虚实 颜色
type: "solid",
color: "#005500"
},
name: 'UCL',
yAxis: 0 //警戒线的值
},
{
lineStyle: { //警戒线的样式 ,虚实 颜色
type: "solid",
color: "#FA3934"
},
name: 'CL',
yAxis: 0
},
{
lineStyle: { //警戒线的样式 ,虚实 颜色
type: "solid",
color: "#00007f"
},
name: 'LCL',
yAxis: 0
},
// USL和LSL的markline
{
lineStyle: { //警戒线的样式 ,虚实 颜色
type: "solid",
color: "#ffff00"
},
name: 'USL',
yAxis: 0
},
{
lineStyle: { //警戒线的样式 ,虚实 颜色
type: "solid",
color: "#55ff7f"
},
name: 'LSL',
yAxis: 0
},
{
lineStyle: { //警戒线的样式 ,虚实 颜色
type: "solid",
color: "#FA3934"
},
name: 'SL',
yAxis: 0
},
]
},
初始值都是0,然后根据自己的条件给每个markline赋值。
// 给6条markline赋值
this.option.series[0].markLine.data[0].yAxis = this.chart.UCL;
this.option.series[0].markLine.data[1].yAxis = this.chart.CL;
this.option.series[0].markLine.data[2].yAxis = this.chart.LCL;
// USL、LSL、SL为0的时候不显示
this.option.series[0].markLine.data[3].yAxis = this.chart.USL === 0 ? {} : this.chart.USL;
this.option.series[0].markLine.data[4].yAxis = this.chart.LSL === 0 ? {} : this.chart.LSL;
this.option.series[0].markLine.data[5].yAxis = this.chart.SL === 0 ? {} : this.chart.SL;
// 去掉UCL、LCL、CL
this.option.series[0].markLine.data[0].yAxis = {};
this.option.series[0].markLine.data[1].yAxis = {};
this.option.series[0].markLine.data[2].yAxis = {};
特别注意:
三元运算符里要写===,我开始写成了=,浪费很多时间。
想要去掉markline,要用this.option.series[0].markLine.data[0].yAxis = {},
千万不要写成this.option.series[0].markLine.data[0] = {},否则会一直报错。