首页 前端知识 echarts:去掉markLine

echarts:去掉markLine

2024-03-26 08:03:08 前端知识 前端哥 648 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
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!