vue中对echarts折线图设置基准线/警告线，可在输入框输入想要的值，并改变已有的基准线的值。
系列文章目录
前端小白，来此做笔记，前端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的形式为数字形式。最后添加一个判断语句.
vue中对echarts折线图设置基准线/警告线，可在输入框输入想要的值，并改变已有的基准线的值。相关推荐
- 在vue中，Echarts雷达图中indicator的点击事件，不能改变data中的值的解决方法
在vue中,Echarts雷达图中indicator的点击事件,不能改变data中的值的解决方法 参考文章: (1)在vue中,Echarts雷达图中indicator的点击事件,不能改变data中的 ...
- echarts折线图设置圆点_echarts 设置折线图单个数据小圆圈样式
在使用echarts 折线图时,可能会遇到针对不同的数据显示不同的小圆点样式,经过查看echarts配置项,其中data中有一个value配置项选项,可以单独设置某一个数据的显示样式,具体使用方式如下 ...
- echarts 折线图 设置y轴最小刻度_手把手教你玩转echarts(二)折线图
茫茫人海中与你相遇 相信未来的你不会很差 作者:婷酱Yaaa 来源:https://juejin.im/post/5f0292d35188252e5a5dbed0 前言 哈喽,everybody,我又 ...
- echarts折线图动态多条线
echarts折线图配置项 由于工作中遇到的图表特别多,每次用过配置项总是想不起来,在这里记录一下,希望也可以帮到路过的你.话不多说我们上图: 左边的是设计稿,右边的是echarts的示例图,我们先找 ...
- echarts折线图设置横向基准线/水平线
注意:请勿复制源码以防页面乱码 具体基准线设置项请参考js注释 需求:在搜索框内输入数值 基准线会自动移动至相应位置 代码如下: <div class="mt43 globalflo ...
- echarts 折线图 设置y轴最小刻度_Vue 项目如何使用Echarts ， 手摸手带你入门
前言 最近可视化浪潮越发凶猛 但是有些小伙伴们就慌了,觉得自己不是很懂,或者说对里面的参数不是很清楚,所以也就印象也就很模糊 那么今天严老湿就带大家好好梳理梳理思路,顺便也带大家写几个Demo 首先得 ...
- echarts 折线图 设置y轴最小刻度_数据可视化—Echarts图表应用
<错误>郑愁予 我打江南走过, 那等在季节里的容颜如莲花的开落,东风不来,三月的柳絮不飞.你的心如小小寂寞的城,恰若青石的街道向晚.蛩音不响,三月的春帷不揭,你的心是小小的窗扉紧掩.我达达 ...
- echarts 折线图 设置y轴最小刻度_【硬货】vue全家桶+Echarts+百度地图，搭建数据可视化系统...
作者丨夙言 来源丨前端大牛爱好者(Web-2017) https://segmentfault.com/a/1190000018993981 本文章篇幅略长,内容有点多,大佬可根据目录选择性查阅,新人 ...
- echarts折线图设置横向基准线/水平线，超过基准线时折线会变色
option = {title: {text: '未来一周气温变化',subtext: '纯属虚构'},tooltip: {trigger: 'axis'},legend: {data: ['最高气温 ...
最新文章
- Unity-WIKI 之 AnimationToPNG
- cocos2d-x 3.2 listview scorllview 等容器在小米华为等部分手机显示泛白解决
- ios android 发东西,Android、IOS主动发事件给React Native
- mysqladmin flush-hosts 解决方法
- 海量数据中，寻找最小的k个数。
- visual studio toolbox 修复
- 春考计算机组装维修知识点,【校选修】计算机组装与维修 考试题
- 算法与数据结构(三) 二叉树的遍历及其线索化(Swift版)
- wps如何保存最终状态_怎么让word显示最终状态
- Machine Learning---LMS 算法
- vscode插件之常用插件
- 【IOS逆向】基本环境配置和脱壳初体验
- ignite java,Ignite 之计算运用的 Hello world
- 【云计算学习教程】软件（程序）是什么？
- 苹果手机各种尺寸列表
- vue有纵向和横向表头表格
- NET 模拟Htpp请求
- unity3d api 中文文档_unity3D游戏开发工程师完整简历范文
- 腾讯云部署DevOps
- CMMI认证是什么？为什么这些IT类企业都在申请？