Echarts折线图超出警戒线标红显示

效果图

实现代码

 <div id="chart" style="height: 500px"></div>

 import echarts from "echarts"; 引入Echarts

 initEcharts() {
      // 创建图表实例
      const chart = echarts.init(document.getElementById("chart"));
      // 定义图表的配置项和数据
      const option = {
        xAxis: {
          type: "category",
          data: this.echartsTrend.date,
          axisLabel: {
            rotate: 45, // 设置标签倾斜角度，单位为度
            formatter: function (value) { // 日期格式化
              var date = new Date(value);
              var year = date.getFullYear();
              var month = date.getMonth() + 1;
              var day = date.getDate();
              return (
                year +
                "-" +
                (month < 10 ? "0" + month : month) +
                "-" +
                (day < 10 ? "0" + day : day)
              );
            },
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            formatter: function (value) {
              return value + "%";
            },
          },
          splitLine: { show: false },
        },
        series: [
          {
            data: this.echartsTrend.alertData, // 这里的数据应该是根据日期计算得出的数值
            type: "line",
            smooth: false, // 开启平滑曲线显示
            //注意点：在series 里面不能设置线的颜色，要不然会以series里面设置的颜色为准，设置的范围变色将不起作用
            itemStyle: {
              normal: {
                color: "rgb(53, 146, 232)",
                // lineStyle: {
                //   color: "#598CDA", //改变折线颜色
                // },
              },
            },
            markLine: {
              symbol: "none",
              silent: true, //鼠标悬停事件  true没有，false有
              label: {
                show: true,
                position: "end", //将警示值放在哪个位置，三个值“start”,"middle","end"  开始  中点 结束
                formatter: "预警值%",
              },
                data: [
                {
                  type: 'line',
                  triggerEvent: false, //坐标轴的标签是否响应和触发鼠标事件
                  yAxis: this.alcWarnPercent,
                  lineStyle: {
                    color: "#D9001B",
                  },
                  axisPointer: {
			        type: 'none'
			      }
                },
              ],
            },
            markPoint: { data: [{ name: "预警值", value: this.alcWarnPercent }] },
          },
        ],
        visualMap: {
          pieces: [
            {
              lte: this.alcWarnPercent,
              color: "#797979",
            },
            {
              gt: this.alcWarnPercent,
              lte: 100,
              color: "#EC808D",
            },
            {
              gt: this.alcWarnPercent,
              color: "#EC808D",
            },
          ],
          left: "center", //标签距离左边的距离，还可以用left。center等字段
          top: "25", //标签距离顶部距离。还可以用top。middle等字段
          orient: "horizontal", //标签排列方式，水平和垂直
          show: false, //标签是否显示
        },
      };
      // 将配置项和数据设置到图表中
      chart.setOption(option);

注：
lt（小于，little than）
gt（大于，greater than）
lte（小于等于 lettle than or equals）
gte（大于等于，greater than or equals）