echarts柱状图每根柱子添加警戒值/阈值，分段警戒线
需求：柱状图每根柱子都添加单独的警戒值（黄色线部分），效果图如下：
实现方式我这有两种方案，如下介绍。
方案1：使用echarts的标线markLine实现（ps：此种方案有弊端：需要一一设置每个柱子的标线起始点，不好控制，不太建议使用）
代码如下：
<body><!-- 为 ECharts 准备一个定义了宽高的 DOM --><div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript">// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 警戒线let markLines = []let markLineValue = [10,20,30,40,30] //警戒线值let markLineItem = [//第一条警戒线{yAxis: markLineValue[0],x: 60, //设置警戒线的起点偏移量lineStyle: { type: "solid", color: "yellow", width: 3 },label: { show: true, color: "yellow", position: "insideMiddleBottom", formatter: markLineValue[0] + 'db' },},{position: "middle",yAxis: markLineValue[0],x: 110, //设置警戒线的终点偏移量lineStyle: { type: "solid", color: "yellow", width: 3 },label: { show: true, position: "insideMiddleBottom" },}]markLines.push(markLineItem);//设置每一条标线的起始偏移量，根据实际情况自行改之for (let i = 1; i <markLineValue.length; i++) {let item = JSON.parse(JSON.stringify(markLines[i-1]))let xStart = item[0].xlet xEnd = item[1].xitem[0].x = xStart + 115item[0].yAxis = markLineValue[i]item[0].label.formatter = markLineValue[i] +'db'item[1].x = xEnd + 115item[1].yAxis = markLineValue[i]markLines.push(item)}var option = {title: {text: 'ECharts 入门示例'},tooltip: {show: true,trigger: 'axis'},legend: {data: ['销量']},xAxis: {data: ['衬衫11111111111111111', '羊毛衫', '雪纺衫', '裤子', '高跟鞋'],axisLabel: {// 文字省略formatter: function (value) {if (value.length > 3) {return `${value.slice(0, 3)}...`}return value}}},yAxis: {splitLine: { show: false }},grid: {containLabel: true,top: 30,left: 10,right: 10,bottom: 8},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10],barWidth: '50px', // 柱图宽度itemStyle: {normal: {label: {formatter: '{c}' + 'db',show: true,position: 'top',textStyle: {color: 'blue'}}}},//设置柱状图背景showBackground: true,backgroundStyle: {color: 'rgba(180, 180, 180, 0.2)'},markLine: {symbol: "none", //去掉警戒线最后面的箭头data:markLines}}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);</script>
</body>
方案2：使用echarts的自定义图形custom实现（此方案较方案一更实用）
代码如下：
<body><!-- 为 ECharts 准备一个定义了宽高的 DOM --><div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript">// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));let markLineValue = [10,20,30,40,30] //警戒线值var option = {title: {text: 'ECharts 入门示例'},tooltip: {show: true,trigger: 'axis'},legend: {data: ['销量']},xAxis: {data: ['衬衫11111111111111111', '羊毛衫', '雪纺衫', '裤子', '高跟鞋'],axisLabel: {// 文字省略formatter: function (value) {if (value.length > 3) {return `${value.slice(0, 3)}...`}return value}}},yAxis: {splitLine: { show: false }},grid: {containLabel: true,top: 30,left: 10,right: 10,bottom: 8},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10],barWidth: '50px', // 柱图宽度itemStyle: {normal: {label: {formatter: '{c}' + 'db',show: true,position: 'top',textStyle: {color: 'blue'}}}},//设置柱状图背景showBackground: true,backgroundStyle: {color: 'rgba(180, 180, 180, 0.2)'}},{type: 'custom',// 图形渲染逻辑函数renderItem: function renderItem(param, api) {//获取每根柱子中点的x，y坐标var point = api.coord([api.value(0), api.value(1)]);return {type: 'line',transition: ['shape'],shape: {x1: point[0] - 25, //每根柱子的起点x轴坐标，我这的柱子宽度为50px，起点就为point[0]-50/2x2: point[0] + 25, //每根柱子的终点x轴坐标y1: point[1],y2: point[1]},style: api.style({stroke: api.visual('color'),lineWidth: 3,})};},itemStyle: {borderType: 'soild', //可以控制警示线的样式normal: {label: {formatter: '{c}' + 'db',show: true,position: 'bottom',textStyle: {color: 'yellow'}},color: "yellow",}},z: 999, //控制图形前后顺序，数值小会被数值大的覆盖data: markLineValue //警示线的数值}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);</script>
</body>
相关文章：
echarts柱状图每根柱子添加警戒值/阈值，分段警戒线
需求：柱状图每根柱子都添加单独的警戒值（黄色线部分），效果图如下： 实现方式我这有两种方案，如下介绍。 方案1：使用echarts的标线markLine实现（ps：此种方案有弊端&#x…...
边缘提取总结
边缘提取：什么是边缘？ 图象的边缘是指图象局部区域亮度变化显著的部分，该区域的灰度剖面一般可以 看作是一个阶跃，既从一个灰度值在很小的缓冲区域内急剧变化到另一个灰度相 差较大的灰度值。 边缘有正负之分，就像…...
intellij 编辑器内性能提示
介绍 IntelliJ IDEA已经出了最新版的2023.2，最耀眼的功能无法两个 AI Assistant编辑器内性能提示 AI Assistant 已经尝试过了是限定功能，因为是基于open ai,所以限定的意思是国内无法使用，今天我们主要介绍是编辑器内性能提示 IntelliJ Pr…...
手机python怎么用海龟画图,python怎么在手机上编程
大家好，给大家分享一下手机python怎么用海龟画图，很多人还不知道这一点。下面详细解释一下。现在让我们来看看！ 1、如何python手机版创造Al？ 如果您想在手机上使用Python来创建AI（人工智能）程序࿰…...
谈谈你对Synchronized关键字的理解及使用
synchronized关键字最主要的三种使用方式的总结 修饰实例方法，作用于当前对象实例加锁，进入同步代码前要获得当前对象实例的锁修饰静态方法，作用于当前类对象加锁，进入同步代码前要获得当前类对象的锁 。也就是给当前类加锁&…...
移动硬盘文件或目录损坏且无法读取
早上插上硬盘，拔的时候不太规范，再插进去就显示无法读取了 搜了很多方法，很多让使用什么软件进行恢复 还参考了这个方法，但是我的属性打开跟博主的完全不一样 最后，参考移动硬盘“文件或目录损坏，无法读取…...
MySQL - 常用的命令
当涉及到具体的数据库操作时，我会给出实际的示例，以更清楚地说明每个命令的用法。 创建数据库： CREATE DATABASE students;列出数据库： SHOW DATABASES;使用数据库： USE students;创建表： CREATE TABL…...
【代理模式】了解篇：静态代理 动态代理~
目录 1、什么是代理模式？ 2、静态代理 3、动态代理 3.1 JDK动态代理类 3.2 CGLIB动态代理类 4、JDK动态代理和CGLIB动态代理的区别？ 1、什么是代理模式？ 定义： 代理模式就是为其他对象提供一种代理以控制这个对象的访问。在某…...
LLM 大语言模型 Prompt Technique 论文精读-3
WebShop: Towards Scalable Real-World Web Interaction with Grounded Language Agents 面向可扩展的基于语言引导的真实世界网络交互 链接：https://arxiv.org/abs/2207.01206 摘要：现有的用于在交互环境中引导语言的基准测试要么缺乏真实世界的语言元…...
架构重构实践心得
一、前言 大多数的技术研发都对重构有所了解，而每个研发又都有自己的理解。从代码重构到架构重构，我参与了携程大型全链路重构项目，积累了一点经验心得，在此抛砖引玉和大家分享。 二、重构的定义 重构是指在不改变外部行为的情…...
【配置环境】Windows下 VS Code 远程连接虚拟机Ubuntu
一，环境 Windows 11 家庭中文版VMware Workstation 16 Pro （版本：16.1.2 build-17966106）ubuntu-22.04.2-desktop-amd64 二，关键步骤 Windows下安装OpenSSHVS Code安装Remote - SSH插件 三，详细步骤 在Ubun…...
【设计模式——学习笔记】23种设计模式——组合模式Composite（原理讲解+应用场景介绍+案例介绍+Java代码实现）
案例引入 学校院系展示 编写程序展示一个学校院系结构: 需求是这样，要在一个页面中展示出学校的院系组成，一个学校有多个学院，一个学院有多个系 【传统方式】 将学院看做是学校的子类，系是学院的子类，小的组织继承大…...
vue3+Luckysheet实现表格的在线预览编辑(electron可用)
前言： 整理中 官方资料： 1、github 项目地址https://github.com/oy-paddy/luckysheet-vue-importAndExport/tree/master/https://github.com/oy-paddy/luckysheet-vue-importAndExport/tree/master/ 2、xlsx vue3 json数据导出excel_vue3导出excel_羊…...
前端html中让两个或者多个div在一行显示，用style给div加上css样式
文章目录 前言一、怎么让多个div在一行显示 前言 DIV是层叠样式表中的定位技术，全称DIVision，即为划分。有时可以称其为图层。DIV在编程中又叫做整除，即只得商的整数。 DIV元素是用来为HTML（标准通用标记语言下的一个应用&#x…...
【linux基础(二)】Linux基本指令(中)
💓博主CSDN主页:杭电码农-NEO💓 ⏩专栏分类:Linux从入门到开通⏪ 🚚代码仓库:NEO的学习日记🚚 🌹关注我🫵带你学更多操作系统知识 🔝🔝 Linux基本指令 1. 前言2. 删除…...
ceph集群---使用RBD块存储
文章目录 创建和删除池RBD设备的配置及使用RBD 块设备数据的导出和导入 块存储接口是一种主流的存储访问接口，也是常见的存储形态，比如服务器下的/dev/sdx都是块存储设备。你可以像使用磁盘一样来使用Ceph提供的块存储设备。 在创建块存储设备之前&#…...
2022.09.17【读书笔记】丨生物信息学与功能基因组学（第十三章 蛋白质结构预测 下）
目录 蛋白质结构预测三种方法同源建模(比较建模)穿线法从头预测（ab initio）基于假设推荐策略 精度与方法选择Alphafold2相关信息 蛋白质结构预测 三种方法 同源建模(比较建模) 建模4步骤 1.模板选择和确定折叠构象 通过blast或delta-blast搜索同源蛋白…...
ardupilot获取飞行员目标倾斜角度
目录 文章目录 目录摘要1. 4.0.7获取目标倾斜角度2. 4.3.7获取目标倾斜角度3.仿真摘要 本节主要记录ardupilot获取目标倾斜角度的两种实现方法，主要针对4.0.7和4.3.7进行对比。 1. 4.0.7获取目标倾斜角度 1.姿态模式下获取函数 //获取飞行员期望的倾斜角度get_pilot_desire…...
机器人制作开源方案 | 智能垃圾桶
1. 功能说明 智能垃圾桶是一种利用物联网技术和智能感知能力的智能设备，旨在提高垃圾分类和处理的效率。通常具备以下特点和功能： ① 智能感知：智能垃圾桶配备各种传感器，如压力传感器、红外线传感器等，可以实时感知…...
【手撕】list
系列文章目录 文章目录 系列文章目录前言list_node<T>（节点）_list_iterator<T, Ref, Ptr>（迭代器）成员变量构造函数运算符重载 List<T>（链表）成员变量构造函数析构函数区间构造函数拷贝构…...
RestClient
什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端，它允许HTTP与Elasticsearch 集群通信，而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点 轻量级ÿ…...
LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明
LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造，完美适配AGV和无人叉车。同时，集成以太网与语音合成技术，为各类高级系统（如MES、调度系统、库位管理、立库等）提供高效便捷的语音交互体验。 L…...
观成科技：隐蔽隧道工具Ligolo-ng加密流量分析
1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具，该工具基于TUN接口实现其功能，利用反向TCP/TLS连接建立一条隐蔽的通信信道，支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式，适应复杂网…...
CVPR 2025 MIMO: 支持视觉指代和像素grounding 的医学视觉语言模型
CVPR 2025 | MIMO：支持视觉指代和像素对齐的医学视觉语言模型 论文信息 标题：MIMO: A medical vision language model with visual referring multimodal input and pixel grounding multimodal output作者：Yanyuan Chen, Dexuan Xu, Yu Hu…...
使用分级同态加密防御梯度泄漏
抽象 联邦学习 （FL） 支持跨分布式客户端进行协作模型训练，而无需共享原始数据，这使其成为在互联和自动驾驶汽车 （CAV） 等领域保护隐私的机器学习的一种很有前途的方法。然而，最近的研究表明&…...
NLP学习路线图（二十三）：长短期记忆网络（LSTM）
在自然语言处理（NLP）领域，我们时刻面临着处理序列数据的核心挑战。无论是理解句子的结构、分析文本的情感，还是实现语言的翻译，都需要模型能够捕捉词语之间依时序产生的复杂依赖关系。传统的神经网络结构在处理这种序列依赖时显得力不从心，而循环神经网络（RNN） 曾被视为…...
IT供电系统绝缘监测及故障定位解决方案
随着新能源的快速发展，光伏电站、储能系统及充电设备已广泛应用于现代能源网络。在光伏领域，IT供电系统凭借其持续供电性好、安全性高等优势成为光伏首选，但在长期运行中，例如老化、潮湿、隐裂、机械损伤等问题会影响光伏板绝缘层…...
【论文阅读28】-CNN-BiLSTM-Attention-（2024）
本文把滑坡位移序列拆开、筛优质因子，再用 CNN-BiLSTM-Attention 来动态预测每个子序列，最后重构出总位移，预测效果超越传统模型。 文章目录 1 引言2 方法2.1 位移时间序列加性模型2.2 变分模态分解 (VMD) 具体步骤2.3.1 样本熵（S…...
在WSL2的Ubuntu镜像中安装Docker
Docker官网链接: https://docs.docker.com/engine/install/ubuntu/ 1、运行以下命令卸载所有冲突的软件包： for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done2、设置Docker…...
使用Matplotlib创建炫酷的3D散点图：数据可视化的新维度
文章目录 基础实现代码代码解析进阶技巧1. 自定义点的大小和颜色2. 添加图例和样式美化3. 真实数据应用示例实用技巧与注意事项完整示例（带样式）应用场景在数据科学和可视化领域，三维图形能为我们提供更丰富的数据洞察。本文将手把手教你如何使用Python的Matplotlib库创建引…...