echarts:去掉markLine

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值