需求:当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] = {},否则会一直报错。