echarts 曲线图自定义提示框
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>曲线图</title><!-- 引入 ECharts 库 --><script src="https://cdn.jsdelivr.net/npm/echarts@5.3.0/dist/echarts.min.js"></script><style>/* 设置图表容器的大小 */#main {width: 800px;height: 600px;margin: 0 auto;}</style>
</head><body><!-- 图表容器 --><div id="main"></div><script>// 你的 JavaScript 函数function updateChart () {var chartDom = document.getElementById('main')var myChart = echarts.init(chartDom)// 示例数据var jsonData = [{ time: '2024-01-01', name: 'Series1', kongshen: 100, yongshuiliang: 50, leijifangshuiliang: 200, wendu: 25, shuiya: 1.5, CH4: 10 },{ time: '2024-01-02', name: 'Series2', kongshen: 120, yongshuiliang: 55, leijifangshuiliang: 220, wendu: 26, shuiya: 1.6, CH4: 12 },{ time: '2024-01-03', name: 'Series3', kongshen: 130, yongshuiliang: 60, leijifangshuiliang: 240, wendu: 27, shuiya: 1.7, CH4: 14 }]var timeData = []var series = []var kongshenData = []var yongshuiliangData = []var leijifangshuiliangData = []var wenduData = []var shuiyaData = []var CH4Data = []for (var i = 0; i < jsonData.length; i++) {var item = jsonData[i]timeData.push(item.time)kongshenData.push(item.kongshen)yongshuiliangData.push(item.yongshuiliang)leijifangshuiliangData.push(item.leijifangshuiliang)wenduData.push(item.wendu)shuiyaData.push(item.shuiya)CH4Data.push(item.CH4)series.push({name: item.name,type: 'line',stack: 'Total',data: [item.kongshen, item.yongshuiliang, item.leijifangshuiliang, item.wendu, item.shuiya, item.CH4],lineStyle: {width: 4, // 设置折线宽度为4（加粗）}})}var option = {title: {// text: '名称'},tooltip: {trigger: 'axis',formatter: function (params) {var html = '';params.forEach(function (param) {var name = param.seriesName;var value = param.value;var unit = '';var color = param.color;switch (name) {case '孔深':unit = 'm';break;case '涌水量':unit = 'm³/h';break;case '水温':unit = '℃';break;case '水压':unit = 'MPa';break;case '累计放水量':unit = 'm³';break;case 'CH4':unit = '%';break;default:break;}html += '<span style="color:' + color + '">●</span> ' + name + ': ' + value + ' ' + unit + '<br>';});return html;
}},legend: {data: ['孔深', '涌水量', '累计放水量', '水压', '水温', 'CH4'],textStyle: {color: 'blue' // 设置图例文字颜色为白色},formatter: function (name) {if (name == '孔深') {return name + '(m)'} else if (name == '涌水量') {return name + '(m³/h)'} else if (name == '水温') {return name + '(℃)'} else if (name == '水压') {return name + '(MPa)'} else if (name == '累计放水量') {return name + '(m³)'} else {return name + '(%)'}}},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},toolbox: {feature: {saveAsImage: {}}},xAxis: {type: 'category',boundaryGap: false,data: timeData},yAxis: [{type: 'value'}],series: [{name: '孔深',type: 'line',stack: 'Total',data: kongshenData,lineStyle: {normal: {width: 4, // 设置折线宽度为4（加粗）}}},{name: '涌水量',type: 'line',stack: 'Total',data: yongshuiliangData,lineStyle: {normal: {width: 4, // 设置折线宽度为4（加粗）}}},{name: '累计放水量',type: 'line',stack: 'Total',data: leijifangshuiliangData,lineStyle: {normal: {width: 4, // 设置折线宽度为4（加粗）}}},{name: '水压',type: 'line',data: shuiyaData,lineStyle: {normal: {width: 4, // 设置折线宽度为4（加粗）}}},{name: '水温',type: 'line',data: wenduData,lineStyle: {normal: {width: 4, // 设置折线宽度为4（加粗）}}},{name: 'CH4',type: 'line',data: CH4Data,lineStyle: {normal: {width: 4, // 设置折线宽度为4（加粗）}}}]}option && myChart.setOption(option)}// 在页面加载完毕后执行函数window.onload = function () {// 调用你的函数updateChart()};</script>
</body></html>主要代码就是
formatter: function (params) {var html = ''params.forEach(function (param) {var name = param.seriesNamevar value = param.valuevar unit = ''var color = param.colorswitch (name) {case '孔深':unit = 'm'breakcase '涌水量':unit = 'm³/h'breakcase '水温':unit = '℃'breakcase '水压':unit = 'MPa'breakcase '累计放水量':unit = 'm³'breakcase 'CH4':unit = '%'breakdefault:break}html += '<span style="color:' + color + '">●</span> ' + name + ': ' + value + ' ' + unit + '<br>'})return html}效果如下
相关文章：
echarts 曲线图自定义提示框
<!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>曲线图</title><!-- 引入 ECharts 库 -->…...
幻兽帕鲁服务器怎么搭建?Palworld多人联机教程
玩转幻兽帕鲁服务器，阿里云推出新手0基础一键部署幻兽帕鲁服务器教程，傻瓜式一键部署，3分钟即可成功创建一台Palworld专属服务器，成本仅需26元，阿里云服务器网aliyunfuwuqi.com分享2024年新版基于阿里云搭建幻兽帕鲁服…...
DAY39： 动态规划不同路径问题62
Leetcode: 62 不同路径 机器人从(0 , 0) 位置出发，到(m - 1, n - 1)终点。 基本思路 1、确定dp数组（dp table）以及下标的含义 dp[i][j] ：表示从（0 ，0）出发，到(i, j) 有dp[i][j]条…...
idea开发工具的简单使用与常见问题
1、配置git 选择左上角目录file->setting 打开，Version Control 目录下Git，选择git安装目录下的git.exe文件； 点击test，出现git版本，则表示git识别成功，点击右下角确认即可生效。 2、配置node.js 选…...
使用 WMI 查询安全软件信息
在这篇文章中，我们将详细介绍如何使用 Windows Management Instrumentation (WMI) API 来查询当前计算机上安装的安全软件的基本信息。我们将分析代码的各个部分，并解释每个步骤所涉及的技术和原理。 一、什么是 WMI？ WMI 是 Windows Manag…...
创建TextMeshPro字体文件
相比于Unity的Text组件，TextMesh Pro提供了更强大的文本格式和布局控制，更高级的文本渲染技术，更灵活的文本样式和纹理支持，更好的性能以及更易于使用的优点。但unity自带TextMeshPro字体不支持中文。这里使用普通字体文件生成Tex…...
信创ARM架构QT应用开发环境搭建
Linux ARM架构QT应用开发环境搭建 前言交叉工具链Ubuntu上安装 32 位 ARM 交叉工具链Ubuntu上安装 64 位 ARM 交叉工具链 交叉编译 QT 库下载 QT 源码交叉编译 QT 源码 Qt Creator交叉编译配置配置 Qt Creator Kits创建一个测试项目 小结 前言 有没有碰到过这种情况࿱…...
使用SPM_batch进行批量跑脚本（matlab.m）
软件：spm8matlab2023bwin11 数据格式： F:\ASL\HC\CBF\HC_caishaoqing\CBF.nii F:\ASL\HC\CBF\HC_caishaoqing\T1.nii F:\ASL\HC\CBF\HC_wangdonga\CBF.nii F:\ASL\HC\CBF\HC_wangdonga\T1.nii clear spmdirD:\AnalysisApps\spm8; datadirF:\ASL\HC\CBF…...
力扣0124——二叉树的最大路径和
二叉树的最大路径和 难度：困难 题目描述 二叉树中的 路径 被定义为一条节点序列，序列中每对相邻节点之间都存在一条边。同一个节点在一条路径序列中 至多出现一次 。该路径 至少包含一个 节点，且不一定经过根节点。 路径和 是路径中各节点…...
c# 字符串帮助类
public class StringHelper { #region 全角半角互相转换 /// <summary> /// 转全角的函数(SBC case) /// </summary> /// <param name"str">任意字符串</param> /// <returns>全…...
LabVIEW双光子荧光显微成像系统开发
双光子显微成像是一种高级荧光显微技术，广泛用于生物学和医学研究，尤其是用于活体组织的深层成像。在双光子成像过程中，振镜（Galvo镜）扮演了非常关键的角色，它负责精确控制激光束在样本上的扫描路径。以下是…...
Prim模板
通过代码探索Prim算法：最小生成树之旅 在计算机科学领域，图算法占据了至关重要的位置，尤其是在设计高效的网络（无论是社交网络、计算机网络还是交通网）时。在这些算法中，寻找最小生成树（MST&am…...
CSS之盒子模型
盒子模型 01-选择器 结构伪类选择器 基本使用 作用：根据元素的结构关系查找元素。 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IE…...
Linux系统安装（CentOS Vmware）
学习环境安装 VMware安装 VMware下载&安装 访问官网：https://www.vmware.com 在此处可以选择语言 点击China（简体中文） 点击产品，点击Workstation Pro 下滑，点击下载试用版 下滑找到Workstation 17 Pro for Wi…...
STM32 硬件随机数发生器(RNG)
STM32 硬件随机数发生器 文章目录 STM32 硬件随机数发生器前言第1章 随机数发生器简介1.1 RNG主要特性1.2.RNG应用 第2章 RNG原理框图第3章 RNG相关寄存器3.1 RNG 控制寄存器 (RNG_CR)3.2 RNG 状态寄存器 (RNG_SR)3.3 RNG 数据寄存器 (RNG_DR) 第3章 RNG代码部分第4章 STM32F1 …...
Window环境下使用go编译grpc最新教程
网上的grpc教程都或多或少有些老或者有些问题，导致最后执行生成文件时会报很多错。这里给出个人实践出可执行的编译命令与碰到的报错与解决方法。（ps:本文代码按照煎鱼的教程编写：4.2 gRPC Client and Server - 跟煎鱼学 Go (gitbook.io)&…...
STM32——FLASH（1）简单介绍、分类、读写流程及注意事项
文章目录 FLASH的特点Nor flash和nand flashflash的读写flash 的存储单位 flash的读写过程 FLASH的特点 可擦写数据可修改可重写访问速度<ROM Nor flash和nand flash Nor flash 1、与SDRAM相似，用户可以直接运行装载到NORFLASH里面的代码，减少SRAM…...
MySQL的DML语言
DML：Data Manipulation Language（数据操作语言） DML语言用来对数据库中表的数据记录进行增、删、改操作。 一、添加数据命令 注意： 插入数据时，指定的字段顺序需要与值的顺序是一一对应的。 字符串和日期型数据应该包…...
Vivado-IP核
Vivado-IP核 主程序 timescale 1ns / 1ps ////module ip_clk_wiz(input sys_clk,input sys_rst_n,output clk_out1,output clk_out2,output clk_out3,output clk_out4,output locked);clk_wiz_0 instance_name(// Clock out ports.clk_out1(clk_out1), // output clk_out…...
品牌如何营造生活感氛围？媒介盒子分享
「生活感」简而言之是指人们对生活的感受和意义，它往往没有充斥在各种重要的场合和事件中，而是更隐藏在细碎平凡的生活场景中。在营销越来越同质化的当下，品牌应该如何打破常规模式，洞察消费情绪，找到更能打动消费者心…...
Java 学习和实践笔记（2）
今天的学习进度： 注册并下载安装好了Java 8，之后进行以下配置。 1）path 是一个常见的环境变量，它告诉系统除了在当前的目标下妹寻找此程序外，还可以到path指定的目录下找。这句话是什么意思呢？以下举报例…...
Python：批量url链接保存为PDF
我的数据是先把url链接获取到存入excel中，后续对excel做的处理，各位也可以直接在程序中做处理，下面就是针对excel中的链接做批量处理 excel内容格式如下（涉及具体数据做了隐藏） 标题文件链接文件日期网页标题1http://…...
【LeetCode每日一题】525连续数组 303区域和检索（前缀和的基本概念和3个简单案例）
前缀和 // 构造prefix let prefix [0] arr.forEach(num > {prefix.push(prefix.at(-1) num); })如果想要计算某个区间 i 到 j 这个子数组的和时，可以根据 prefix[j1] - prefix[i] 获得。 例题1：303.区域和检索 - 数组不可变 给定一个整数数组 num…...
形态学算法应用之连通分量提取的python实现——图像处理
原理 连通分量提取是图像处理和计算机视觉中的一项基本任务，旨在识别图像中所有连通区域，并将它们作为独立对象处理。在二值图像中，连通分量通常指的是所有连接在一起的前景像素集合。这里的“连接”可以根据四连通或八连通的邻接关系来定义…...
Kafka系列之：Kafka集群同时设置基于时间和日志大小两种方式保存Topic的数据
Kafka系列之：Kafka集群同时设置基于时间和日志大小两种方式保存Topic的数据 一、基于日志大小二、基于时间大小三、参数设置四、设置命令一、基于日志大小 "log.retention.bytes"是Apache Kafka中的一项配置参数，用于指定每个日志段文件的最大大小。当日志段文件的…...
pytest+allure批量执行测试用例
在 Pytest 中，可以使用装饰器 `@pytest.fixture` 来定义用例级别的前置和后置操作。下面是一个示例代码，演示了如何使用 Pytest 的前置和后置操作： ```python import pytest @pytest.fixture(scope="function") def setup_function(): print("Setup fu…...
SpringBoot和SpringMVC
目录 一、springboot项目 （1）创建springboot项目 （2）目录介绍 （3）项目启动 （4）运行一个程序 （5）通过其他方式创建和运行springboot项目 二、SpringMVC…...
免费搭建幻兽帕鲁服务器，白嫖阿里云游戏服务器
阿里云幻兽帕鲁服务器免费搭建方案，先在阿里云高校计划「云工开物」活动领取学生专享300元无门槛代金券，幻兽帕鲁专用服务器4核16G配置26元1个月、149元半年，直接使用这个无门槛300元代金券抵扣即可免费搭建幻兽帕鲁服务器。阿里云服务器网al…...
[技术杂谈]如何下载vscode历史版本
网站模板： https://code.visualstudio.com/updates/v1_85 如果你想下载1.84系列可以访问https://code.visualstudio.com/updates/v1_84 然后看到： 选择对应版本下载即可，我是windows x64系统选择x64即可开始下载...
nginx slice模块的使用和源码分析
文章目录 1. 为什么需要ngx_http_slice_module2. 配置指令3. 加载模块4. 源码分析4.1 指令分析4.2 模块初始化4.3 slice模块的上下文4.2 $slice_range字段值获取4.3 http header过滤处理4.4 http body过滤处理5 测试和验证 1. 为什么需要ngx_http_slice_module 顾名思义&#…...
AI应用开发-python实现redis数据存储
AI应用开发相关目录 本专栏包括AI应用开发相关内容分享，包括不限于AI算法部署实施细节、AI应用后端分析服务相关概念及开发技巧、AI应用后端应用服务相关概念及开发技巧、AI应用前端实现路径及开发技巧 适用于具备一定算法及Python使用基础的人群 AI应用开发流程概…...
2024年Java架构篇之设计模式
2024年Java实战面试题_java 5 年 面试-CSDN博客 1、单例模式...
搭建macOS开发环境-1：准备工作
请记住： 最重要的准备工作永远是：备份数据 !!! 通过图形界面检查 Mac 的 CPU 类型： 在搭载 Apple 芯片的 Mac 电脑上，“关于本机”会显示一个标有“芯片”的项目并跟有相应芯片的名称： 通过命令行检查Mac的CPU类型 …...
【Makefile语法 02】Makefile语法基础
目录 一、Makefile概述 二、Makefile变量 三、Makefile符号 一、Makefile格式 1. 基本格式： targets : prerequisties [tab键]command target：目标文件，可以是 OjectFile，也可以是执行文件，还可以是一个标签&…...
如何写一个其他人可以使用的GitHub Action
前言 在GitHub中，你肯定会使用GitHub Actions自动部署一个项目到GitHub Page上，在这个过程中总要使用workflows工作流，并在其中使用action，在这个使用的过程中，总会好奇怎么去写一个action呢，所以ÿ…...
排序算法的时间复杂度存在下界问题
对于几种常用的排序算法，无论是归并排序、快速排序、以及更加常见的冒泡排序等，这些排序算法的时间复杂度都是大于等于O(n*lg(n))的，而这些排序算法存在一个共同的行为，那就是这些算法在对元素进行排序的时候，都会进行…...
详解洛谷P2016 战略游戏/BZOJ0495. 树的最小点覆盖之战略游戏(贪心/树形DP)
Description Bob喜欢玩电脑游戏，特别是战略游戏。但是他经常无法找到快速玩过游戏的办法。现在他有个问题。 他要建立一个古城堡，城堡中的路形成一棵树。他要在这棵树的结点上放置最少数目的士兵，使得这些士兵能了望到所有的路。 注意&…...
解决The Tomcat connector configured to listen on port 8080 failed to start
问题 启动javar报错，提示如下 Description: The Tomcat connector configured to listen on port 8080 failed to start. The port may already be in use or the connector may be misconfigured. Action: Verify the connector’s configuration, identify a…...
深度学习自然语言处理（NLP）模型BERT：从理论到Pytorch实战
文章目录 深度学习自然语言处理（NLP）模型BERT：从理论到Pytorch实战一、引言传统NLP技术概览规则和模式匹配基于统计的方法词嵌入和分布式表示循环神经网络（RNN）与长短时记忆网络（LSTM）Transform…...
C语言的循环结构
目录 前言 1.三种循环语句 1.while循环 2.for循环 2.1缺少表达式的情况 3.do while循环 2.break语句和continue语句 2.1在while循环中 2.2在for循环中 2.3在do while 循环中 3.循环的嵌套 4.go to语句 前言 C语⾔是结构化的程序设计语⾔，这⾥的结构指的是…...
C#用Array类的FindAll方法和List＜T＞类的Add方法按关键词在数组中检索元素并输出
目录 一、使用的方法 1. Array.FindAll(T[], Predicate) 方法 （1）定义 （2）示例 2.List类的常用方法 （1）List.Add(T) 方法 （2）List.RemoveAt(Int32) 方法 （3&…...
【前后端接口AES+RSA混合加解密详解（vue+SpringBoot）附完整源码】
前后端接口AES+RSA混合加解密详解（vue+SpringBoot） 前后端接口AES+RSA混合加解密一、AES加密原理和为什么不使用AES加密二、RSA加密原理和为什么不使用rsa加密三、AES和RSA混合加密的原理四、代码样例前端1. 请求增加加密标识2. 前端加密工具类3.前端axios请求统一封装，和返…...
React环境配置
1.安装Node.js Node.js官网：https://nodejs.org/en/ 下载之后按默认选项安装好 重启电脑即可自动完成配置 2.安装React 国内使用 npm 速度很慢，可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm。 ①使用 winR 输入 cmd 打开终端 ②依…...
Pandas 数据处理-排序与排名的深度探索【第69篇—python：文本数据处理】
文章目录 Pandas 数据处理-排序与排名的深度探索1. sort_index方法2. sort_values方法3. rank方法4. 多列排序5. 排名方法的参数详解6. 处理重复值7. 对索引进行排名8. 多级索引排序与排名9. 更高级的排序自定义10. 性能优化技巧10.1 使用nsmallest和nlargest10.2 使用sort_val…...
第8节、双电机多段直线运动【51单片机+L298N步进电机系列教程】
↑↑↑点击上方【目录】，查看本系列全部文章 摘要：前面章节主要介绍了bresenham直线插值运动，本节内容介绍让两个电机完成连续的直线运动,目标是画一个正五角星 一、五角星图介绍 五角星总共10条直线，10个顶点。设定左下角为原点…...
Elasticsearch：基本 CRUD 操作 - Python
在我之前的文章 “Elasticsearch：关于在 Python 中使用 Elasticsearch 你需要知道的一切 - 8.x”，我详细讲述了如何建立 Elasticsearch 的客户端连接。我们也详述了如何对数据的写入及一些基本操作。在今天的文章中，我们针对数据的 CRUD (cre…...
1992-2022年全国及31省对外开放度测算数据（含原始数据+计算结果）（无缺失）
1992-2022年全国及31省对外开放度测算数据（含原始数据计算结果）（无缺失） 1、时间：1992-2022年 2、来源：各省年鉴、国家统计局、统计公报、 3、指标：进出口总额（万美元）…...
JVM之GC垃圾回收
GC垃圾回收 如何判断对象可以回收 引用计数法 如果有对象引用计数加一，没有对象引用，计数减一，如果计数为零，则回收 但是如果存在循环引用，即A对象引用B对象，B对象引用A对象，会造成内存泄漏 可…...
自然语言学习nlp 六
https://www.bilibili.com/video/BV1UG411p7zv?p118 Delta Tuning，尤其是在自然语言处理（NLP）和机器学习领域中，通常指的是对预训练模型进行微调的一种策略。这种策略不是直接更新整个预训练模型的权重，而是仅针对模型…...
fpga 需要掌握哪些基础知识？
个人根据自己的一些心得总结一下fpga 需要掌握的基础知识，希望对你有帮助。 1、数电（必须掌握的基础），然后进阶学模电， 2、掌握HDL（verilog或VHDL）一般建议先学verilog，然后可以学…...