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

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

news 2025/7/6 17:18:41

由于没研究明白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

基于算法竞赛的c++编程（28）结构体的进阶应用

结构体的嵌套与复杂数据组织 在C中&#xff0c;结构体可以嵌套使用&#xff0c;形成更复杂的数据结构。例如&#xff0c;可以通过嵌套结构体描述多层级数据关系&#xff1a; struct Address {string city;string street;int zipCode; };struct Employee {string name;int id;…...

编程新知 2025/6/17 5:30:27

Python爬虫实战：研究MechanicalSoup库相关技术

一、MechanicalSoup 库概述 1.1 库简介 MechanicalSoup 是一个 Python 库，专为自动化交互网站而设计。它结合了 requests 的 HTTP 请求能力和 BeautifulSoup 的 HTML 解析能力，提供了直观的 API，让我们可以像人类用户一样浏览网页、填写表单和提交请求。 1.2 主要功能特点…...

编程新知 2025/6/21 11:59:52

mongodb源码分析session执行handleRequest命令find过程

mongo/transport/service_state_machine.cpp已经分析startSession创建ASIOSession过程&#xff0c;并且验证connection是否超过限制ASIOSession和connection是循环接受客户端命令&#xff0c;把数据流转换成Message&#xff0c;状态转变流程是&#xff1a;State::Created 》 St…...

编程新知 2025/6/17 17:52:51

智能在线客服平台：数字化时代企业连接用户的 AI 中枢

随着互联网技术的飞速发展&#xff0c;消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁&#xff0c;不仅优化了客户体验&#xff0c;还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用&#xff0c;并…...

编程新知 2025/7/4 14:06:52

ESP32 I2S音频总线学习笔记（四）： INMP441采集音频并实时播放

简介 前面两期文章我们介绍了I2S的读取和写入&#xff0c;一个是通过INMP441麦克风模块采集音频&#xff0c;一个是通过PCM5102A模块播放音频&#xff0c;那如果我们将两者结合起来&#xff0c;将麦克风采集到的音频通过PCM5102A播放&#xff0c;是不是就可以做一个扩音器了呢…...

编程新知 2025/7/5 10:18:07

使用van-uploader 的UI组件，结合vue2如何实现图片上传组件的封装

以下是基于 vant-ui&#xff08;适配 Vue2 版本 &#xff09;实现截图中照片上传预览、删除功能&#xff0c;并封装成可复用组件的完整代码&#xff0c;包含样式和逻辑实现&#xff0c;可直接在 Vue2 项目中使用&#xff1a; 1. 封装的图片上传组件 ImageUploader.vue <te…...

编程新知 2025/6/17 5:20:48

Nginx server_name 配置说明

Nginx 是一个高性能的反向代理和负载均衡服务器&#xff0c;其核心配置之一是 server 块中的 server_name 指令。server_name 决定了 Nginx 如何根据客户端请求的 Host 头匹配对应的虚拟主机&#xff08;Virtual Host&#xff09;。 1. 简介 Nginx 使用 server_name 指令来确定…...

编程新知 2025/6/17 10:29:06

微服务商城-商品微服务

数据表 CREATE TABLE product (id bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 商品id,cateid smallint(6) UNSIGNED NOT NULL DEFAULT 0 COMMENT 类别Id,name varchar(100) NOT NULL DEFAULT COMMENT 商品名称,subtitle varchar(200) NOT NULL DEFAULT COMMENT 商…...

编程新知 2025/7/6 2:00:54

Java入门学习详细版（一）

大家好&#xff0c;Java 学习是一个系统学习的过程&#xff0c;核心原则就是“理论 实践 坚持”&#xff0c;并且需循序渐进&#xff0c;不可过于着急&#xff0c;本篇文章推出的这份详细入门学习资料将带大家从零基础开始&#xff0c;逐步掌握 Java 的核心概念和编程技能。 …...

编程新知 2025/6/21 6:15:03

重启Eureka集群中的节点，对已经注册的服务有什么影响

先看答案&#xff0c;如果正确地操作&#xff0c;重启Eureka集群中的节点&#xff0c;对已经注册的服务影响非常小&#xff0c;甚至可以做到无感知。 但如果操作不当&#xff0c;可能会引发短暂的服务发现问题。 下面我们从Eureka的核心工作原理来详细分析这个问题。 Eureka的…...

编程新知 2025/6/25 4:08:42