首页 前端知识 echarts:去掉markLine

echarts:去掉markLine

2024-03-26 08:03:08 前端知识 前端哥 667 52 我要收藏

需求:当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 = {};
复制

特别注意:

  1. 三元运算符里要写===,我开始写成了=,浪费很多时间。

  1. 想要去掉markline,要用this.option.series[0].markLine.data[0].yAxis = {},

千万不要写成this.option.series[0].markLine.data[0] = {},否则会一直报错。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/4169.html
标签
评论
还可以输入200
共0条数据,当前/页
会员中心 联系我 留言建议 回顶部
复制成功!