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

echarts折线图自定义打点标记小工具

news 2026/3/31 17:33:40

由于没研究明白echarts怎么用label和lableLine实现自定义打点标记，索性用markPoint把长方形压扁成线模拟了一番自定义打点标记，记录下来备用。（markLine同理也能实现）

实现代码如下：

<!DOCTYPE html>
<html lang="en" style="height:100%;"><head><meta charset="utf-8"></head><body style="height:100%;margin:0;"><div><form>显示文本 <input id="name" />旋转角度 <input id="rotate" />指示线长 <input id="size" />横坐标 <input id="x" /><input type="button" onclick="add()" value="添加" /><input type="button" onclick="del()" value="删除" /><input type="button" onclick="edit()" value="修改" /></form></div><div id="container" style="height:100%;" /><script type="text/javascript" src="https://registry.npmmirror.com/echarts/5.5.0/files/dist/echarts.min.js"></script><script type="text/javascript">var data = [['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],[10, 11, 13, 11, 12, 12, 9]];var index = -1;var dom;var myChart;var items = [{name: '显示1',symbolRotate: 45,symbolSize: 60,coord: ['Mon', 10],}, {name: '显示2',symbolRotate: 225,symbolSize: 60,coord: ['Fri', 12]}];function init() {if(!dom) {dom = document.getElementById('container');}if(!myChart) {myChart = echarts.init(dom, null, {renderer: 'canvas',useDirtyRect: false});}var markPoint = [];for(var item of items) {var symbolOffset = [-item.symbolSize / 2 * Math.sin(item.symbolRotate / 180 * Math.PI),-item.symbolSize / 2 * Math.cos(item.symbolRotate / 180 * Math.PI)];var position;if((item.symbolRotate >= 0 && item.symbolRotate <= 90) || (item.symbolRotate >= 270 && item.symbolRotate <= 360)) {position = 'top';} else {position = 'bottom';}markPoint.push({coord: item.coord,value: item.name,symbolSize: [1, item.symbolSize],symbolRotate: item.symbolRotate,symbolOffset: symbolOffset,label: {show: true,position: position,color: '#000000',offset: [symbolOffset[0], 0]}});}var option = {tooltip: {axisPointer: {type: 'cross'}},xAxis: {axisTick: {alignWithLabel: true},data: data[0]},yAxis: {scale: true},series: [{name: '温度',type: 'line',data: data[1],smooth: true,markPoint: {symbol: 'rect',itemStyle: {color: '#000000',},data: markPoint}}]};myChart.setOption(option);}function clear() {index = -1;document.getElementById('name').value = '';document.getElementById('rotate').value = '';document.getElementById('size').value = '';document.getElementById('x').value = '';}function add() {if(index !== -1) {return;}var name = document.getElementById('name').value;if(!name) {return;}var rotate = document.getElementById('rotate').value;if(!rotate) {document.getElementById('rotate').value = rotate = 0;}var size = document.getElementById('size').value;if(!size) {document.getElementById('size').value = size = 60;}var x = document.getElementById('x').value;if(!x) {return;}var item = {name: name,symbolRotate: rotate,symbolSize: size,coord: [x, 0]}for(var i in data[0]) {if(item.coord[0] === data[0][i]) {item.coord[1] = data[1][i];break;}}items.push(item);index = items.length - 1;init();}function del() {if(index === -1) {return;}items.splice(index, 1);clear();init();}function edit() {if(index === -1) {return;}items[index].name = document.getElementById('name').value;items[index].symbolRotate = document.getElementById('rotate').value;items[index].symbolSize = document.getElementById('size').value;items[index].coord[0] = document.getElementById('x').value;for(var i in data[0]) {if(items[index].coord[0] === data[0][i]) {items[index].coord[1] = data[1][i];break;}}init();}init();window.addEventListener('resize', myChart.resize);myChart.on('click', (params) => {clear();if(params.componentType === 'markPoint') {for(var i in items) {if(params.data.value === items[i].name) {index = i;document.getElementById('name').value = items[i].name;document.getElementById('rotate').value = items[i].symbolRotate;document.getElementById('size').value = items[i].symbolSize;document.getElementById('x').value = items[i].coord[0];break;}}} else if(params.componentType === 'series') {for(var i in items) {if(params.name === items[i].coord[0]) {index = i;document.getElementById('name').value = items[i].name;document.getElementById('rotate').value = items[i].symbolRotate;document.getElementById('size').value = items[i].symbolSize;break;}}document.getElementById('x').value = params.name;}});</script></body>
</html>

实现效果如下：

相关文章：

echarts折线图自定义打点标记小工具

由于没研究明白echarts怎么用label和lableLine实现自定义打点标记&#xff0c;索性用markPoint把长方形压扁成线模拟了一番自定义打点标记&#xff0c;记录下来备用。&#xff08;markLine同理也能实现&#xff09; 实现代码如下&#xff1a; <!DOCTYPE html> <html…...

编程日记 2024/4/12 20:45:05

【图论】Leetcode 200. 岛屿数量【中等】

岛屿数量 给你一个由 ‘1’&#xff08;陆地&#xff09;和 ‘0’&#xff08;水&#xff09;组成的的二维网格&#xff0c;请你计算网格中岛屿的数量。 岛屿总是被水包围&#xff0c;并且每座岛屿只能由水平方向和/或竖直方向上相邻的陆地连接形成。 此外&#xff0c;你可以…...

编程日记 2024/4/12 20:44:03

酒店大厅装水离子雾化壁炉前和装后对比

在酒店大厅装水离子雾化壁炉之前和之后&#xff0c;大厅的氛围和体验会有显著的对比&#xff1a; 装水离子雾化壁炉之前&#xff1a; 传统感&#xff1a;在壁炉安装之前&#xff0c;大厅可能会有传统的装饰或者简单的暖气设备&#xff0c;缺乏现代化的元素。这种传统感可能会…...

编程日记 2024/4/12 20:39:58

城市内涝与海绵城市规划设计中的水文水动力模拟

原文链接&#xff1a;城市内涝与海绵城市规划设计中的水文水动力模拟https://mp.weixin.qq.com/s?__bizMzUzNTczMDMxMg&mid2247601198&idx5&sn35b9e5e3961ea2f190f9742236a7217f&chksmfa820dc9cdf584df97633f64d19bdc3e5f7d1a5a85000c8f040e1953c51b9b39c87b5…...

编程日记 2024/4/12 20:38:56

C++项目实战与经验分享

在编程世界中，C++ 是一种功能强大且灵活的编程语言，广泛应用于系统级编程、游戏开发、嵌入式系统以及高性能计算等领域。本文将分享一个基于C++的图像处理系统项目实战经验，并深入探讨在开发过程中遇到的问题及解决方案。 一、项目概述 本次项目实战的目标是开发一个基于C…...

编程日记 2024/4/12 20:37:54

Day17_学点JavaEE_转发、重定向、Get、POST、乱码问题总结

1 转发 转发&#xff1a;一般查询了数据之后&#xff0c;转发到一个jsp页面进行展示 req.setAttribute("list", list); req.getRequestDispatcher("student_list.jsp").forward(req, resp);2 重定向 重定向&#xff1a;一般添加、删除、修改之后重定向到…...

编程日记 2024/4/12 20:35:52

Mouse IFN-α ELISA kit (Quick Test)

干扰素α&#xff08;IFN-α&#xff09;是一类由免疫细胞分泌的内源性调节因子&#xff0c;也被称为白细胞干扰素&#xff0c;主要参与响应病毒感染的先天性免疫。 基于结构特征、受体、细胞来源和生物活性的不同&#xff0c;干扰素可被分为Ⅰ、Ⅱ、Ⅲ三种类型&#xff0c;其中…...

编程日记 2024/4/12 20:33:50

AMD Tensile 简介与示例

按照知其然&#xff0c;再知其所以然的认知次序进行 1&#xff0c;下载代码 git clone --recursive https://github.com/ROCm/Tensile.git 2&#xff0c;安装 Tensile cd Tensile mkdir build cd build ../Tensile/bin/Tensile ../Tensile/Configs/rocblas_dgemm_nn_asm_full…...

编程日记 2024/4/12 20:30:47

Rust语言

文章目录 Rust语言一&#xff0c;Rust语言是什么二&#xff0c;Rust语言能做什么&#xff1f;Rust语言的设计使其适用于许多不同的领域&#xff0c;包括但不限于以下几个方面&#xff1a;1. 传统命令行程序&#xff1a;2. Web 应用&#xff1a;3. 网络服务器&#xff1a;4. 嵌入…...

编程日记 2024/4/12 20:28:44

排序算法之冒泡排序

目录 一、简介二、代码实现三、应用场景 一、简介 算法平均时间复杂度最好时间复杂度最坏时间复杂度空间复杂度排序方式稳定性冒泡排序O(n^2 )O(n)O(n^2)O(1)In-place稳定 稳定&#xff1a;如果A原本在B前面&#xff0c;而AB&#xff0c;排序之后A仍然在B的前面&#xff1b; 不…...

编程日记 2024/4/12 20:25:42

js打印页面源码 ，打印选取的容器里的内容，打印指定内容

js打印页面源码 &#xff0c;打印选取的容器里的内容&#xff0c;打印指定内容 效果 代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge&…...

编程日记 2024/4/12 20:23:40

算法练习第五十天|123.买卖股票的最佳时机III、188.买卖股票的最佳时机IV

123. 买卖股票的最佳时机 III 188. 买卖股票的最佳时机 IV 123.买卖股票的最佳时机III class Solution {public int maxProfit(int[] prices) {//dp[i][j] 第i天买卖股票获得的最大利润/**j0不操作j1第一次持有j2第一次不持有j3第二次持有j4第二次不持有dp[i][0] dp[i-1][0]d…...

编程日记 2024/4/12 20:22:39

细胞世界：4.细胞分化(划区域)与细胞衰老(设施磨损)

(1)细胞凋亡 1. 概念&#xff1a;细胞凋亡可以比作城市的规划者主动拆除某些建筑来更新城市或防止危险建筑对市民的潜在伤害。这是一个有序的过程&#xff0c;由城市&#xff08;细胞内部&#xff09;的特定规划&#xff08;基因&#xff09;所决定。 2. 特征&#xff1a;细…...

编程日记 2024/4/12 20:20:37

c语言：操作符

操作符 一.算术操作符： + - * % / 1.除了%操作符之外，其他的几个操作符可以作用与整数和浮点数，如：5%2.0//error. 2.对于操作符，如果两个操作数都为整数，执行整数除法而只要有浮点数执行的就是浮点数除法。 3.%操作符的两个操作数必须为整数。 二.移位操作符：<&…...

编程日记 2024/4/12 20:19:36

谷歌seo自然搜索排名怎么提升快？

要想在谷歌上排名快速上升&#xff0c;关键在于运用GPC爬虫池跟高低搭配的外链组合 首先你要做的&#xff0c;就是让谷歌的蜘蛛频繁来你的网站&#xff0c;网站需要被谷歌蜘蛛频繁抓取和索引&#xff0c;那这时候GPC爬虫池就能派上用场了&#xff0c;GPC爬虫池能够帮你大幅度提…...

编程日记 2024/4/12 20:17:34

Golang | Leetcode Golang题解之第13题罗马数字转整数

题目&#xff1a; 题解&#xff1a; var symbolValues map[byte]int{I: 1, V: 5, X: 10, L: 50, C: 100, D: 500, M: 1000}func romanToInt(s string) (ans int) {n : len(s)for i : range s {value : symbolValues[s[i]]if i < n-1 && value < symbolValues[s…...

编程日记 2024/4/12 20:16:33

说说我理解的数据库中的Schema吧

一、SQL标准对schema如何定义&#xff1f; ISO/IEC 9075-1 SQL标准中将schema定义为描述符的持久命名集合&#xff08;a persistent, named collection of descriptors&#xff09;。 大部分的网上资料定义Schema如下&#xff1a; schema是用来组织和管理数据的一种方式。它…...

编程日记 2024/4/12 20:14:31

nginx 如何对用户屏蔽网站首页但是对蜘蛛开放

使用 Nginx 的 if 指令结合 $http_user_agent 变量来实现条件判断。不过&#xff0c;请注意&#xff0c;Nginx 官方文档通常建议避免在配置中过度使用 if 指令&#xff0c;因为它可能会导致不可预测的行为&#xff0c;尤其是在复杂的配置中。然而&#xff0c;对于简单的用例&am…...

编程日记 2024/4/12 20:13:30

【vue】ref 和 reactive 对比

ref&#xff1a;存储单个数据&#xff0c;如数值&#xff0c;字符串reactive&#xff1a;存储复杂数据&#xff0c;如对象&#xff0c;数组 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"vie…...

编程日记 2024/4/12 20:11:26

爬虫现在还有那么吃香嘛？

Python 作为一种广泛应用的编程语言&#xff0c;在 Web 开发、大数据开发、人工智能开发和嵌入式开发等领域都有着重要的应用。 Python 的易学性、清晰性和可移植性等特点使它得到很多技术人士的喜爱。对于数据科学和机器学习领域的程序员来说&#xff0c;Python 提供了强大的…...

编程日记 2024/4/12 20:10:23

RMBG-1.4开源模型解析：AI净界如何实现SOTA级Alpha通道生成

RMBG-1.4开源模型解析&#xff1a;AI净界如何实现SOTA级Alpha通道生成 你有没有遇到过这样的烦恼&#xff1f;想给产品换个背景&#xff0c;结果抠出来的图边缘全是锯齿&#xff1b;想给自己做一张透明背景的证件照&#xff0c;头发丝却和背景糊在一起&#xff1b;或者想用AI生…...

编程新知 2026/3/31 17:31:21

Leaflet图层顺序实战：如何用setZIndex和bringToFront让你的地图层级不再混乱

Leaflet图层顺序实战&#xff1a;如何用setZIndex和bringToFront让你的地图层级不再混乱 当地图上同时存在多个图层时&#xff0c;你是否遇到过标注被底图遮盖、动态添加的标记消失在多边形下方&#xff0c;或是图层叠加顺序完全失控的情况&#xff1f;这些看似简单的层级问题&…...

编程新知 2026/3/31 16:58:36

终极指南：buger/jsonparser如何10倍加速处理第三方API不确定性数据

终极指南&#xff1a;buger/jsonparser如何10倍加速处理第三方API不确定性数据 【免费下载链接】jsonparser One of the fastest alternative JSON parser for Go that does not require schema 项目地址: https://gitcode.com/gh_mirrors/js/jsonparser 在处理第三方AP…...

编程新知 2026/3/31 11:03:07

西门子PLC存储区全解析：从M区到DB块的实战避坑指南

西门子PLC存储区全解析&#xff1a;从M区到DB块的实战避坑指南 第一次接触西门子PLC编程时&#xff0c;面对M区、L区和DB块这些存储区概念&#xff0c;我完全摸不着头脑。记得有次调试设备&#xff0c;明明在线监控看到M0.0已经置位&#xff0c;但程序就是不执行相应动作&#…...

编程新知 2026/3/31 10:59:05

RWKV7-1.5B-g1a轻量部署方案：中小企业AI落地首选，年省GPU成本超40%

RWKV7-1.5B-g1a轻量部署方案&#xff1a;中小企业AI落地首选&#xff0c;年省GPU成本超40% 1. 为什么选择RWKV7-1.5B-g1a 在当今AI技术快速发展的背景下&#xff0c;中小企业往往面临高昂的GPU计算成本和技术门槛。rwkv7-1.5B-g1a作为一款基于RWKV-7架构的多语言文本生成模型…...

编程新知 2026/3/31 10:18:26

元宇宙拆迁队：强拆违规建筑日入十万

从Bug猎人到空间执法官当传统的软件测试工程师还在为揪出一个隐蔽的NullPointerException而欢欣鼓舞时&#xff0c;一片更为广阔、也更为凶险的新战场已经悄然开启——元宇宙。在这里&#xff0c;代码的缺陷不再仅仅导致程序崩溃或数据丢失&#xff0c;它们会具象化为扭曲的空间…...

编程新知 2026/3/31 10:02:21

如何突破设备限制？打造你的全场景跨平台开发中枢

如何突破设备限制&#xff1f;打造你的全场景跨平台开发中枢 【免费下载链接】code-server VS Code in the browser 项目地址: https://gitcode.com/GitHub_Trending/co/code-server 在多设备开发的时代&#xff0c;远程开发环境已成为连接不同终端的核心枢纽&#xff0…...

编程新知 2026/3/31 9:32:07

Ubuntu系统磁盘管理

要在Ubuntu系统中开机自动挂载AWS EBS卷&#xff08;设备名为/dev/xvdd&#xff09;&#xff0c;需通过**/etc/fstab文件**配置自动挂载规则。以下是完整步骤&#xff08;含前提条件、命令和验证&#xff09;&#xff1a; 一、前提条件 确认磁盘状态&#xff1a;/dev/xvdd需已…...

编程新知 2026/3/31 8:27:40

别再只用Wireshark了！用Cain Abel在Windows上5分钟复现ARP欺骗攻击（附实战截图）

从Wireshark到Cain & Abel&#xff1a;用经典工具5分钟掌握ARP欺骗核心原理 如果你已经能用Wireshark分析网络流量&#xff0c;却对ARP欺骗的原理一知半解&#xff0c;那么这款诞生于2002年的老牌工具Cain & Abel会让你眼前一亮。不同于现代抓包工具的被动观察&#xf…...

编程新知 2026/3/31 7:35:23

告别混乱文件管理：用NERDTree打造VIM项目导航系统

告别混乱文件管理&#xff1a;用NERDTree打造VIM项目导航系统 每次打开一个包含数百个文件的复杂项目时&#xff0c;你是否会感到一阵眩晕&#xff1f;当你在多个目录间反复切换查找某个配置文件时&#xff0c;是否觉得时间在指尖悄然流逝&#xff1f;对于资深VIM用户而言&…...

编程新知 2026/3/31 7:29:17