系列文章目录

前端小白，来此做笔记，前端vue框架下的echart添加警戒线，可在输入框中去输入想要设置的数值，按保存键去实现。同时可对警戒线的上下进行颜色的区分。采用的后端动态数据

---

写文章为了以后碰见相似的问题，以此来当做笔记

---

前言

看效果图是否是你想要的效果，在选择往下看。

---

**注：本案例是基于已经准备好的echart的dom**

---

1、首先添加右上角的： 安全基线、输入框、确认

代码如下：

<div class="c1">
      <span class="whiteColor">安全基线</span>
      <input type="text"  placeholder="请设置基线(kb)"  v-model="inputVal"   value="" > <!--v-model="inputVal"绑定输入框数字-->
     
      <button v-on:click="search()">确认</button>
     <div id="main" style="width: 600px;height: 400px;"></div>
    </div>

v-model="inputVal"中的inputal代表输入框中输入的字符
确认按钮的触发事件是search（）这个函数

2.绑定触发事件

代码如下：

首先在全局定义数据

然后在option函数中添加markline，这为警戒线绘制函数。所有的警戒线的格式都在这里设置。

在mounted上方添加确认按钮的触发函数search（）

警戒线上下区域颜色区分是依靠visualMap函数进行设置，pieces里面的gt和lte设置改变颜色的区域，比如我想让他在Y轴=10处改变颜色，就设置lte：10。注意：冒号后面只能为数字，不能为字符串，或者从数组里面去选择，这样他是显示不出来的。
为了解决inputVal为数组的形式，改为数字形式，便添加以下东西

判断语句

---

总结

输入框输入的数字是实时的赋值给inputVa这个值，点击确定，便触发search这个函数，便可将inputVa赋值给that.jingjiexian这个值。此时警戒线的数值便设置好了，然后便就是基线上下颜色区分，此处只需要注意他的data的形式为数字形式。最后添加一个判断语句.