当前位置： 首页 > news >正文

echarts柱状图每根柱子添加警戒值/阈值，分段警戒线

news 2025/9/18 2:29:09

需求：柱状图每根柱子都添加单独的警戒值（黄色线部分），效果图如下：
在这里插入图片描述
实现方式我这有两种方案，如下介绍。
方案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柱状图每根柱子添加警戒值/阈值，分段警戒线

需求&#xff1a;柱状图每根柱子都添加单独的警戒值&#xff08;黄色线部分&#xff09;&#xff0c;效果图如下&#xff1a; 实现方式我这有两种方案&#xff0c;如下介绍。 方案1&#xff1a;使用echarts的标线markLine实现&#xff08;ps&#xff1a;此种方案有弊端&#x…...

编程日记 2023/7/28 19:05:15

边缘提取总结

边缘提取&#xff1a;什么是边缘&#xff1f; 图象的边缘是指图象局部区域亮度变化显著的部分&#xff0c;该区域的灰度剖面一般可以 看作是一个阶跃&#xff0c;既从一个灰度值在很小的缓冲区域内急剧变化到另一个灰度相 差较大的灰度值。 边缘有正负之分&#xff0c;就像…...

编程日记 2023/7/28 19:04:11

intellij 编辑器内性能提示

介绍 IntelliJ IDEA已经出了最新版的2023.2&#xff0c;最耀眼的功能无法两个 AI Assistant编辑器内性能提示 AI Assistant 已经尝试过了是限定功能&#xff0c;因为是基于open ai,所以限定的意思是国内无法使用&#xff0c;今天我们主要介绍是编辑器内性能提示 IntelliJ Pr…...

编程日记 2023/7/28 19:03:10

手机python怎么用海龟画图,python怎么在手机上编程

大家好&#xff0c;给大家分享一下手机python怎么用海龟画图&#xff0c;很多人还不知道这一点。下面详细解释一下。现在让我们来看看&#xff01; 1、如何python手机版创造Al&#xff1f; 如果您想在手机上使用Python来创建AI&#xff08;人工智能&#xff09;程序&#xff0…...

编程日记 2023/7/28 19:02:09

谈谈你对Synchronized关键字的理解及使用

synchronized关键字最主要的三种使用方式的总结 修饰实例方法&#xff0c;作用于当前对象实例加锁&#xff0c;进入同步代码前要获得当前对象实例的锁修饰静态方法&#xff0c;作用于当前类对象加锁&#xff0c;进入同步代码前要获得当前类对象的锁 。也就是给当前类加锁&…...

编程日记 2023/7/28 19:01:08

移动硬盘文件或目录损坏且无法读取

早上插上硬盘&#xff0c;拔的时候不太规范&#xff0c;再插进去就显示无法读取了 搜了很多方法&#xff0c;很多让使用什么软件进行恢复 还参考了这个方法&#xff0c;但是我的属性打开跟博主的完全不一样 最后&#xff0c;参考移动硬盘“文件或目录损坏&#xff0c;无法读取…...

编程日记 2023/7/28 19:00:04

MySQL - 常用的命令

当涉及到具体的数据库操作时&#xff0c;我会给出实际的示例&#xff0c;以更清楚地说明每个命令的用法。 创建数据库&#xff1a; CREATE DATABASE students;列出数据库&#xff1a; SHOW DATABASES;使用数据库&#xff1a; USE students;创建表&#xff1a; CREATE TABL…...

编程日记 2023/7/28 18:59:02

【代理模式】了解篇：静态代理 动态代理~

目录 1、什么是代理模式&#xff1f; 2、静态代理 3、动态代理 3.1 JDK动态代理类 3.2 CGLIB动态代理类 4、JDK动态代理和CGLIB动态代理的区别&#xff1f; 1、什么是代理模式&#xff1f; 定义&#xff1a; 代理模式就是为其他对象提供一种代理以控制这个对象的访问。在某…...

编程日记 2023/7/28 18:58:01

LLM 大语言模型 Prompt Technique 论文精读-3

WebShop: Towards Scalable Real-World Web Interaction with Grounded Language Agents 面向可扩展的基于语言引导的真实世界网络交互 链接&#xff1a;https://arxiv.org/abs/2207.01206 摘要&#xff1a;现有的用于在交互环境中引导语言的基准测试要么缺乏真实世界的语言元…...

编程日记 2023/7/28 18:56:59

架构重构实践心得

一、前言 大多数的技术研发都对重构有所了解&#xff0c;而每个研发又都有自己的理解。从代码重构到架构重构&#xff0c;我参与了携程大型全链路重构项目&#xff0c;积累了一点经验心得&#xff0c;在此抛砖引玉和大家分享。 二、重构的定义 重构是指在不改变外部行为的情…...

编程日记 2023/7/28 18:55:58

【配置环境】Windows下 VS Code 远程连接虚拟机Ubuntu

一&#xff0c;环境 Windows 11 家庭中文版VMware Workstation 16 Pro &#xff08;版本&#xff1a;16.1.2 build-17966106&#xff09;ubuntu-22.04.2-desktop-amd64 二&#xff0c;关键步骤 Windows下安装OpenSSHVS Code安装Remote - SSH插件 三&#xff0c;详细步骤 在Ubun…...

编程日记 2023/7/28 18:54:56

【设计模式——学习笔记】23种设计模式——组合模式Composite（原理讲解+应用场景介绍+案例介绍+Java代码实现）

案例引入 学校院系展示 编写程序展示一个学校院系结构: 需求是这样&#xff0c;要在一个页面中展示出学校的院系组成&#xff0c;一个学校有多个学院&#xff0c;一个学院有多个系 【传统方式】 将学院看做是学校的子类&#xff0c;系是学院的子类&#xff0c;小的组织继承大…...

编程日记 2023/7/28 18:53:55

vue3+Luckysheet实现表格的在线预览编辑(electron可用)

前言&#xff1a; 整理中 官方资料&#xff1a; 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_羊…...

编程日记 2023/7/28 18:52:55

前端html中让两个或者多个div在一行显示，用style给div加上css样式

文章目录 前言一、怎么让多个div在一行显示 前言 DIV是层叠样式表中的定位技术&#xff0c;全称DIVision&#xff0c;即为划分。有时可以称其为图层。DIV在编程中又叫做整除&#xff0c;即只得商的整数。 DIV元素是用来为HTML&#xff08;标准通用标记语言下的一个应用&#x…...

编程日记 2023/7/28 18:51:53

【linux基础(二)】Linux基本指令(中)

&#x1f493;博主CSDN主页:杭电码农-NEO&#x1f493;   ⏩专栏分类:Linux从入门到开通⏪   &#x1f69a;代码仓库:NEO的学习日记&#x1f69a;   &#x1f339;关注我&#x1faf5;带你学更多操作系统知识   &#x1f51d;&#x1f51d; Linux基本指令 1. 前言2. 删除…...

编程日记 2023/7/28 18:50:52

ceph集群---使用RBD块存储

文章目录 创建和删除池RBD设备的配置及使用RBD 块设备数据的导出和导入 块存储接口是一种主流的存储访问接口&#xff0c;也是常见的存储形态&#xff0c;比如服务器下的/dev/sdx都是块存储设备。你可以像使用磁盘一样来使用Ceph提供的块存储设备。 在创建块存储设备之前&#…...

编程日记 2023/7/28 18:49:51

2022.09.17【读书笔记】丨生物信息学与功能基因组学（第十三章 蛋白质结构预测 下）

目录 蛋白质结构预测三种方法同源建模(比较建模)穿线法从头预测&#xff08;ab initio&#xff09;基于假设推荐策略 精度与方法选择Alphafold2相关信息 蛋白质结构预测 三种方法 同源建模(比较建模) 建模4步骤 1.模板选择和确定折叠构象 通过blast或delta-blast搜索同源蛋白…...

编程日记 2023/7/28 18:48:49

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…...

编程日记 2023/7/28 18:47:48

机器人制作开源方案 | 智能垃圾桶

1. 功能说明 智能垃圾桶是一种利用物联网技术和智能感知能力的智能设备&#xff0c;旨在提高垃圾分类和处理的效率。通常具备以下特点和功能&#xff1a; ① 智能感知&#xff1a;智能垃圾桶配备各种传感器&#xff0c;如压力传感器、红外线传感器等&#xff0c;可以实时感知…...

编程日记 2023/7/28 18:46:47

【手撕】list

系列文章目录 文章目录 系列文章目录前言list_node<T>&#xff08;节点&#xff09;_list_iterator<T, Ref, Ptr>&#xff08;迭代器&#xff09;成员变量构造函数运算符重载 List<T>&#xff08;链表&#xff09;成员变量构造函数析构函数区间构造函数拷贝构…...

编程日记 2023/7/28 18:45:46

三维GIS开发cesium智慧地铁教程（5）Cesium相机控制

一、环境搭建 <script src"../cesium1.99/Build/Cesium/Cesium.js"></script> <link rel"stylesheet" href"../cesium1.99/Build/Cesium/Widgets/widgets.css"> 关键配置点&#xff1a; 路径验证&#xff1a;确保相对路径.…...

编程新知 2025/8/21 15:41:11

3.3.1_1 检错编码（奇偶校验码）

从这节课开始&#xff0c;我们会探讨数据链路层的差错控制功能&#xff0c;差错控制功能的主要目标是要发现并且解决一个帧内部的位错误&#xff0c;我们需要使用特殊的编码技术去发现帧内部的位错误&#xff0c;当我们发现位错误之后&#xff0c;通常来说有两种解决方案。第一…...

编程新知 2025/9/16 21:02:35

【Java_EE】Spring MVC

目录 Spring Web MVC ​编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 ​编辑参数重命名 RequestParam ​编辑​编辑传递集合 RequestParam 传递JSON数据 ​编辑RequestBody ​…...

编程新知 2025/9/3 18:59:01

LINUX 69 FTP 客服管理系统 man 5 /etc/vsftpd/vsftpd.conf

FTP 客服管理系统 实现kefu123登录&#xff0c;不允许匿名访问&#xff0c;kefu只能访问/data/kefu目录&#xff0c;不能查看其他目录 创建账号密码 useradd kefu echo 123|passwd -stdin kefu [rootcode caozx26420]# echo 123|passwd --stdin kefu 更改用户 kefu 的密码…...

编程新知 2025/9/3 19:49:50

前端中slice和splic的区别

1. slice slice 用于从数组中提取一部分元素&#xff0c;返回一个新的数组。 特点&#xff1a; 不修改原数组&#xff1a;slice 不会改变原数组&#xff0c;而是返回一个新的数组。提取数组的部分&#xff1a;slice 会根据指定的开始索引和结束索引提取数组的一部分。不包含…...

编程新知 2025/6/20 15:06:56

认识CMake并使用CMake构建自己的第一个项目

1.CMake的作用和优势 跨平台支持&#xff1a;CMake支持多种操作系统和编译器&#xff0c;使用同一份构建配置可以在不同的环境中使用 简化配置&#xff1a;通过CMakeLists.txt文件&#xff0c;用户可以定义项目结构、依赖项、编译选项等&#xff0c;无需手动编写复杂的构建脚本…...

编程新知 2025/9/17 17:54:23

9-Oracle 23 ai Vector Search 特性 知识准备

很多小伙伴是不是参加了 免费认证课程&#xff08;限时至2025/5/15&#xff09; Oracle AI Vector Search 1Z0-184-25考试&#xff0c;都顺利拿到certified了没。 各行各业的AI 大模型的到来&#xff0c;传统的数据库中的SQL还能不能打&#xff0c;结构化和非结构的话数据如何和…...

编程新知 2025/9/10 0:28:06

Python竞赛环境搭建全攻略

Python环境搭建竞赛技术文章大纲 竞赛背景与意义 竞赛的目的与价值Python在竞赛中的应用场景环境搭建对竞赛效率的影响 竞赛环境需求分析 常见竞赛类型&#xff08;算法、数据分析、机器学习等&#xff09;不同竞赛对Python版本及库的要求硬件与操作系统的兼容性问题 Pyth…...

编程新知 2025/9/5 19:04:58

API网关Kong的鉴权与限流：高并发场景下的核心实践

&#x1f525;「炎码工坊」技术弹药已装填&#xff01; 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 引言 在微服务架构中&#xff0c;API网关承担着流量调度、安全防护和协议转换的核心职责。作为云原生时代的代表性网关&#xff0c;Kong凭借其插件化架构…...

编程新知 2025/9/6 9:35:29

0x-3-Oracle 23 ai-sqlcl 25.1 集成安装-配置和优化

是不是受够了安装了oracle database之后sqlplus的简陋&#xff0c;无法删除无法上下翻页的苦恼。 可以安装readline和rlwrap插件的话&#xff0c;配置.bahs_profile后也能解决上下翻页这些&#xff0c;但是很多生产环境无法安装rpm包。 oracle提供了sqlcl免费许可&#xff0c…...

编程新知 2025/8/18 1:22:10