echarts 折线图动态基准线设置超出基准线标红
基准线属性:markLine
线条标红关键属性:visualMap
小于: lt (less than)
大于:gt (greater than)
小于等于:lte (Less than or equal to)
大于等于:gte (Greater than or equal to)
1、基础应用——2条基准线

当存在2条基准线时,折线图切割为3部分,小于最低基准线和大于最高标准线的部分标红,中间位置为蓝色。代码如下(可直接cv到echarts官网的调试页面):
option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},visualMap: {pieces: [{lte: 160, // 小于等于160color: 'red' // 为红色},{gt: 160, // 大于160lte: 225, // 小于等于225color: '#5470c6' // 为蓝色},{gt: 225, // 大于225color: 'red' // 为红色}],show: false, // 不显示色块的图例},series: [{data: [150, 230, 224, 218, 135, 147, 260],type: 'line',markLine: {symbol: 'none',data: [{yAxis: 160, // 最小值label: {show: true},lineStyle: {type: 'dashed',color: '#b17063'}},{yAxis: 225, // 最大值label: {show: true},lineStyle: {type: 'dashed',color: '#b17063'}}]}}]
};
2. 1条基准线,该线可能为最大值,可能为最小值
一条基准线时,需要注意visualMap.pieces里面的数据不可以相同,否则会报错。解决方案就是在gt或gte的数值后加上0.0001
1. 基准线为最小值时
当基准线为最低限时,需要做到小于基准线的部分标红,其余为蓝色

// ...
visualMap: {pieces: [{lte: 160, // 小于或等于160color: 'red' // 为红色},{gt: 160.0001, // 大于160color: '#5470c6' // 为蓝色}],show: false},
series: [{data: [150, 230, 224, 218, 135, 147, 260],type: 'line',markLine: {symbol: 'none',data: [{yAxis: 160, // 最小值label: {show: true},lineStyle: {type: 'dashed',color: '#b17063'}}]}}]
2. 基准线为最大值时
当基准线为最大限时,需要做到小于基准线的部分为蓝色,超过基准的部分为红色

// ...visualMap: {pieces: [{lte: 225, // 小于等于225color: '#5470c6' // 为蓝色},{gt: 225.0001, // 大于225color: 'red' // 为红色}],show: false},
series: [{data: [150, 230, 224, 218, 135, 147, 260],type: 'line',markLine: {symbol: 'none',data: [{yAxis: 225, // 最大值label: {show: true},lineStyle: {type: 'dashed',color: '#b17063'}}]}}]
3. 通用方法——当不确定有几条基准线时
已知后端返回的基准线的数据格式为数组lines:[data, data],lines第一项为最小值,第二项是最大值。lines[0]=null时则没有最小值,lines[1]=null时则没有最大值。
// 图表超出上下限值的部分显示红色getVisualMapData(lines) {if(lines?.length) {if(lines[0] && lines[1]) {// 存在上下限值return [{lt: lines[0],// 小于最小值color: 'red',// 为红色},{gte: lines[0],// 大于或等于最小值lte: lines[1],// 小于或等于最大值color: '#5470c6', // 为蓝色},{gt: lines[1],// 大于最大值color: 'red',// 为红色},];} else if(lines[0] && ! lines[1]) {// 只存在下限值return [{lt: lines[0],// 小于最小值color: 'red',// 为红色},{gte: lines[0] + 0.00001,// 大于或等于最小值color: '#5470c6',// 为蓝色},];} else if(! lines[0] && lines[1]) {// 只存在上限值return [{gt: lines[1] + 0.00001,// 大于最大值color: 'red',// 为红色},{lte: lines[1],// 小于或等于最大值color: '#5470c6',// 为蓝色},];} else {// 没有上下限值return null;}} else {return null;}},
使用该方法:
const visualMapData = this.getVisualMapData(lines);// ...
option = {visualMap: visualMapData ? {pieces: visualMapData,show: false,} : undefined,
}
相关文章:
echarts 折线图动态基准线设置超出基准线标红
基准线属性:markLine 线条标红关键属性:visualMap 小于: lt (less than) 大于:gt (greater than) 小于等于:lte (Less than or equal to) 大于等于:gte (Greater than or equal to) 1、基础应用——2条基准…...
Part 3 第十二章 单元测试 Unit Testing
概述 第十二章围绕单元测试展开,阐述了单元测试的实践与重要性,通过对比其他测试类型,突出其特点,还介绍了单元测试的最佳实践、避免的反模式以及与测试替身相关的内容,为编写高质量单元测试提供指导。 章节概要 1…...
C++与Python:两种编程语言的区别
C和Python都是当今编程领域广泛使用的语言,它们各有特色,适用于不同的开发场景。本文将从语言特性、性能、学习难度、应用领域等多个方面探讨C与Python之间的区别。 一、语言特性 类型系统: C:是一种静态类型语言…...
Springboot 高频面试题
以下是Spring Boot的高频面试题及答案和底层原理解释: 基础概念 什么是Spring Boot,其主要特点是什么? 答案: Spring Boot本质上是一个建立在Spring框架之上的快速应用开发框架。其主要特点包括: 启动器:一…...
常用电脑,护眼软件推荐 f.lux 3400K | 撰写论文 paper
常用电脑?平均每天用 5 个小时?你就要考虑用一个护眼软件了,对皮肤也好。因为电脑屏幕有辐射,比如蓝光。 f.lux 作为一款专业护眼软件,值得使用。之前用了三年的 Iris Pro,现在 f.lux 做的更好了。 使用…...
MacOS下使用Ollama本地构建DeepSeek并使用本地Dify构建AI应用
目录 1 大白话说一下文章内容2 作者的电脑配置3 DeepSeek的本地部署3.1 Ollamal的下载和安装3.2 选择合适的deepseek模型3.3 安转deepseek 4 DifyDeepSeek构建Al应用4.1 Dify的安装4.1.1 前置条件4.1.2 拉取代码4.1.3 启动Dify 4.2 Dify控制页面4.3 使用Dify实现个“文章标题生…...
如何有效利用MYSQL的连接数
连接数配置2500~3000 依然发现连接不够用? -- 查看当前最大连接数 SHOW VARIABLES LIKE MAX_CONNECTIONS; -- 查看当前总链接数 SHOW STATUS LIKE Threads_connected; -- 查看当前进程明细 SHOW PROCESSLIST; 合理设置以下参数: 1. MySQL 的参数设置 …...
调用click.getchar()时Windows PyCharm无法模拟键盘输入
文章目录 问题描述解决方案参考文献 问题描述 调用 click.getchar() 时,Windows PyCharm 无法模拟键盘输入 解决方案 Run → Edit Configurations… → Modify options → Emulate terminal in output console 参考文献 Terminal emulator | PyCharm Documentati…...
使用Hardhat实现ERC20 代币合约详解
ERC20 代币合约详解 💰 1. 合约概览 // SPDX-License-Identifier: MIT pragma solidity ^0.8.20;import "openzeppelin/contracts/token/ERC20/ERC20.sol";contract MyToken is ERC20 {constructor() ERC20("MyToken", "MTK") {_min…...
清华大学《DeepSeek与AI幻觉》(无套路免费分享)
随着人工智能技术的飞速发展,以DeepSeek为代表的国产大模型正逐渐成为各行各业的重要工具。然而,AI在生成内容时常常会出现“幻觉”——即生成与事实不符、逻辑断裂或脱离上下文的内容。 清华大学新闻与传播学院与人工智能学院联合推出的这篇教程《Deep…...
代码随想录算法【Day52】
Day51 101. 孤岛的总面积 思路 从周边找到陆地然后 通过 dfs或者bfs 将周边靠陆地且相邻的陆地都变成海洋,然后再去重新遍历地图 统计此时还剩下的陆地 代码 #include <iostream> #include <vector> using namespace std; int dir[4][2] {-1, 0, …...
Spark 和 Flink
Spark 和 Flink 都是目前流行的大数据处理引擎,但它们在架构设计、应用场景、性能和生态方面有较大区别。以下是详细对比: 1. 架构与核心概念 方面Apache SparkApache Flink计算模型微批(Micro-Batch)为主,但支持结构…...
Unity结合Vuforia虚拟按键实现AR机械仿真动画效果
零、最终效果 待上传 一、资源准备 1、Vuforia Vuforia版本不能高于10.17.4(往上的版本虚拟按键功能被删除) 2、Unity Unity版本必须要高于2022.3.x,不然使用Vuforia插件时会出现bug 二、主要内容 1、添加虚拟按钮 2、为虚拟按钮设置…...
PL/SQL 异常处理
目录 一、命名的系统异常 1.常见命名的系统异常 2.预定义的系统异常数量以及描述 3.处理命名的系统异常的一般步骤 二、程序员定义的异常 1.概念 2.自定义异常的定义与抛出 3.自定义异常的处理 三、未命名的系统异常 1.概述 2.处理未命名的系统异常的方法 3.使用场景 …...
【自学笔记】Spring Boot框架技术基础知识点总览-持续更新
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 Spring Boot框架技术基础知识点总览一、Spring Boot简介1.1 什么是Spring Boot?1.2 Spring Boot的主要特性 二、Spring Boot快速入门2.1 搭建Spring Boo…...
Redis 缓存穿透、击穿、雪崩:问题与解决方案
在使用 Redis 作为缓存中间件时,系统可能会面临一些常见的问题,如 缓存穿透、缓存击穿 和 缓存雪崩。这些问题如果不加以解决,可能会导致数据库压力过大、系统响应变慢甚至崩溃。本文将详细分析这三种问题的起因,并提供有效的解决…...
第一个CMAKE项目hello cmake
#注意! 这篇文章是为WINDWOS用户写的 #请检查你的电脑上已经安装了MINGW和CMAKE 快速检查方法如下 C:\Users\Basicoperation>g --version g (x86_64-win32-seh-rev1, Built by MinGW-Builds project) 14.2.0 Copyright (C) 2024 Free Software Foundation, Inc. …...
骶骨神经
骶骨肿瘤手术后遗症是什么_39健康网_癌症 [健康之路]匠心仁术(七) 勇闯禁区 骶骨肿瘤切除术...
基于Django的购物商城平台的设计与实现(源码+lw+部署文档+讲解),源码可白嫖!
摘要 当今社会进入了科技进步、经济社会快速发展的新时代。国际信息和学术交流也不断加强,计算机技术对经济社会发展和人民生活改善的影响也日益突出,人类的生存和思考方式也产生了变化。传统购物管理采取了人工的管理方法,但这种管理方法存…...
使用快捷键高效管理 VSCode:提升工作效率,告别鼠标操作
如果你想提高工作效率,减少鼠标操作,掌握键盘快捷键是一个非常有效的方式。在编程过程中,熟练使用快捷键能够快速管理文件、标签页,节省时间并提升效率。比如,Ctrl P 和 Ctrl W 可以快速打开和关闭文件,而…...
国防科技大学计算机基础课程笔记02信息编码
1.机内码和国标码 国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制,因此这个了16进制的数据既可以翻译成为这个机器码,也可以翻译成为这个国标码,所以这个时候很容易会出现这个歧义的情况; 因此,我们的这个国…...
零门槛NAS搭建:WinNAS如何让普通电脑秒变私有云?
一、核心优势:专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发,是一款收费低廉但功能全面的Windows NAS工具,主打“无学习成本部署” 。与其他NAS软件相比,其优势在于: 无需硬件改造:将任意W…...
java_网络服务相关_gateway_nacos_feign区别联系
1. spring-cloud-starter-gateway 作用:作为微服务架构的网关,统一入口,处理所有外部请求。 核心能力: 路由转发(基于路径、服务名等)过滤器(鉴权、限流、日志、Header 处理)支持负…...
多场景 OkHttpClient 管理器 - Android 网络通信解决方案
下面是一个完整的 Android 实现,展示如何创建和管理多个 OkHttpClient 实例,分别用于长连接、普通 HTTP 请求和文件下载场景。 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas…...
基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能,多端兼容
基于 UniApp + WebSocket实现多端兼容的实时通讯系统,涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能,适配微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...
UDP(Echoserver)
网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法:netstat [选项] 功能:查看网络状态 常用选项: n 拒绝显示别名&#…...
uniapp手机号一键登录保姆级教程(包含前端和后端)
目录 前置条件创建uniapp项目并关联uniClound云空间开启一键登录模块并开通一键登录服务编写云函数并上传部署获取手机号流程(第一种) 前端直接调用云函数获取手机号(第三种)后台调用云函数获取手机号 错误码常见问题 前置条件 手机安装有sim卡手机开启…...
android RelativeLayout布局
<?xml version"1.0" encoding"utf-8"?> <RelativeLayout xmlns:android"http://schemas.android.com/apk/res/android"android:layout_width"match_parent"android:layout_height"match_parent"android:gravity&…...
渗透实战PortSwigger靶场:lab13存储型DOM XSS详解
进来是需要留言的,先用做简单的 html 标签测试 发现面的</h1>不见了 数据包中找到了一个loadCommentsWithVulnerableEscapeHtml.js 他是把用户输入的<>进行 html 编码,输入的<>当成字符串处理回显到页面中,看来只是把用户输…...
热烈祝贺埃文科技正式加入可信数据空间发展联盟
2025年4月29日,在福州举办的第八届数字中国建设峰会“可信数据空间分论坛”上,可信数据空间发展联盟正式宣告成立。国家数据局党组书记、局长刘烈宏出席并致辞,强调该联盟是推进全国一体化数据市场建设的关键抓手。 郑州埃文科技有限公司&am…...
