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

echarts-事件

echarts部分事件
在这里插入图片描述

添加点击事件

添加点击事件:

let options = {tooltip: {},xAxis: {type: "category",data: ["d1", "d2", "d3", "d4"],},yAxis: {},series: [{type: "line",data: d1,},{type: "bar",data: d2,},],};myEcharts.on("click", (value) => {console.log(value);});

bar:
在这里插入图片描述
line:
在这里插入图片描述

过滤项

事件主要有两种写法:
myecharts.on(事件,监听执行的方法,this指向?) 或
myecharts.on(事件,过滤条件,监听执行的方法,this指向?)
第二种写法可以添加过滤条件,让特定的图表触发。
由于echarts的事件是绑定整个echarts的,所以如果想给不同的图表绑定不同的点击事件,就需要使用过滤项。
在这里插入图片描述

  1. 按照图标类型
    series.类型
 myEcharts.on("click", "series.line", (value) => {console.log("line");});myEcharts.on("click", "series.bar", (value) => {console.log("bar");});
  1. 图标顺序 seriesIndex
 myEcharts.on("click",{seriesIndex: 0,},(value) => {console.log("line");});myEcharts.on("click",{seriesIndex: 1,},(value) => {console.log("bar");});
  1. name 是data中数据的name,可以针对某一条数据触发
series: [{type: "line",data: [{name: "lineD1",value: 10,},20,30,40,],},{type: "bar",data: d2,},],myEcharts.on("click",{name: "lineD1",},(value) => {console.log("line");});
  1. dataIndex data数组中的第几个数据
 myEcharts.on("click",{seriesIndex: 0,dataIndex: 1,},(value) => {console.log("line");});
  1. dataType 在关系图中有用,如果设为node就是节点触发,edge就是边触发。
 series: [{type: "line",data: [{name: "lineD1",value: 10,},20,30,40,],},{type: "bar",data: d2,},{type: "graph",data: [{name: "1",x: 10,y: 10,value: 10,},{name: "2",x: 100,y: 100,value: 20,},],links: [{source: "1",target: "2",},],},],myEcharts.on("click",{dataType: "node",},(value) => {console.log("line");});
  1. element 自定义图表, 规定自定义图表返回的那个节点绑定事件。
 {type: "custom",renderItem() {return {type: "circle",//  coordinateSystem: "none",name: "c1",shape: {cx: 20,cy: 10,r: 50,},style: {fill: "blue",},};},},myEcharts.on("click",{element:"c1"}, (value) => {console.log("c1");});

使用echarts之外的按钮去触发

事件触发 dispatchAction(obj),只能触发图表行为。

 let options = {tooltip: {},legend: {show: true,},xAxis: {type: "category",data: ["d1", "d2", "d3", "d4"],},yAxis: {},series: [{type: "line",name: "line",data: [{name: "lineD1",value: 10,},20,30,40,],},{type: "bar",name: "bar",data: d2,},],};
const cli = () => {myEcharts.dispatchAction({ type: "legendUnSelect", name: "line" });
};
<button @click="cli">点击图例</button>

在这里插入图片描述

例子 点击柱状图展开详细的折线图

let myEcharts;
let options;
const data = [{data: "2024-05-05",value: 20,detail: [{time: "07:00-09:00",value: 5,},{time: "12:00-13:00",value: 5,},{time: "14:00-18:00",value: 10,},],},{data: "2024-06-06",value: 10,detail: [{time: "08:00-09:00",value: 5,},{time: "12:50-13:00",value: 4,},{time: "16:00-18:00",value: 1,},],},{data: "2024-07-07",value: 15,detail: [{time: "08:00-10:00",value: 5,},{time: "11:00-132:00",value: 5,},{time: "15:00-15:50",value: 10,},],},{data: "2024-08-08",value: 5,detail: [{time: "07:00-09:00",value: 2,},{time: "12:00-13:00",value: 2,},{time: "14:00-18:00",value: 1,},],},
];
onMounted(() => {let canvas = document.getElementById("canvas");echarts.registerMap("china", china);myEcharts = echarts.init(canvas, null, {width: 800,height: 500,devicePixelRatio: window.devicePixelRatio,locale: "ZH",});options = {tooltip: {},legend: {show: true,},xAxis: {type: "category",data: data.map((item) => item.data),},yAxis: {},series: [{type: "bar",name: "bar",data: data.map((item) => item.value),},],};myEcharts.on("click", "series.bar", (value) => {//匹配出当前点击的对象const date = value.name;const item = data.find((item) => {console.log(item.data);if (item.data == date) {return item;}});const detail = item.detail;//将detail渲染成折线myEcharts.setOption({xAxis: {type: "category",data: detail.map((item) => item.time),},yAxis: {},series: [{type: "line",data: detail.map((item) => item.value),},],});});rednderEcharts(options);
});function rednderEcharts(options) {myEcharts.setOption(options);
}
const cli = () => {rednderEcharts(options);
};
</script><template><button @click="cli">返回</button><div id="canvas" width="400" height="400"></div>
</template>

在这里插入图片描述

例子 随着鼠标移动,legend显示具体的数值

 options = {tooltip: {},legend: {show: true,formatter: (value) => {console.log(value);if (value == "line") {return (value +":" +d1.reduce((pre, now) => {return pre + now;}));} else {return (value +":" +d2.reduce((pre, now) => {return pre + now;}));}},},xAxis: {type: "category",data: data.map((item) => item.data),},yAxis: {},series: [{type: "bar",name: "bar",data: d2,},{type: "line",name: "line",data: d1,},],};myEcharts.on("mouseout", "series.bar", (value) => {myEcharts.setOption({legend: {show: true,formatter: (value) => {console.log(value);if (value == "line") {return (value +":" +d1.reduce((pre, now) => {return pre + now;}));} else {return (value +":" +d2.reduce((pre, now) => {return pre + now;}));}},},});});myEcharts.on("mouseover", "series.bar", (value) => {console.log(value);let _data = value.data;let _index = value.dataIndex;let _linedata = d1[_index];myEcharts.setOption({legend: {formatter(value) {if (value == "line") {return value + ":" + _linedata;} else {return value + ":" + _data;}},},});});

在这里插入图片描述

动画

在这里插入图片描述

series: [{type: "bar",name: "bar",data: d2,animation: false,animationThreshold: 5,},{type: "line",name: "line",data: d1,},],

相关文章:

echarts-事件

echarts部分事件 添加点击事件 添加点击事件&#xff1a; let options {tooltip: {},xAxis: {type: "category",data: ["d1", "d2", "d3", "d4"],},yAxis: {},series: [{type: "line",data: d1,},{type: &qu…...

备受推崇的公司文件加密文件推荐榜单

迄今为止&#xff0c;加密依然是最有效的用于保护数据、通讯安全的手段之一 在数字化时代&#xff0c;文件加密软件成为了保护个人和企业数据安全的重要工具。随着技术的不断进步&#xff0c;市场上涌现出了众多优秀的文件加密软件。 以下十款文件加密软件因其出色的性能、易…...

QT——QSlider实现,QT滑动控件的使用

目录 简介滑动块调节两种方法滑动条触发信号量理想滑动块运用&#xff08;参考&#xff09; 简介 QT中滑动条的控件叫QSlider&#xff0c;继承自QAbstractSlider类。 主要用途是通过滑块的滑动的方式在一定范围内调节某个值。根据调节的后得到的结果去执行一些处理&#xff0c…...

【网络协议Http】Http中get,post,put,delete区别

Http协议 超文本传输协议&#xff08;Hypertext Transfer Protocol&#xff0c;HTTP&#xff09;是一个简单的请求-响应协议&#xff0c;它通常运行在TCP之上。 【参考】 GET && POST 对比 关于tcp数据包&#xff1a;对于GET方式的请求&#xff0c;浏览器会把http hea…...

软硬中断区别,磁盘块、扇区、页区别与之间的关系

软硬中断&#xff1a; 软中断是执行中断指令产生的&#xff0c;而硬中断是由外设引发的。 硬中断的中断号是由中断控制器提供的&#xff0c;软中断的中断号由指令直接指出&#xff0c;无需使用中断控制器。 硬中断是可屏蔽的&#xff0c;软中断不可屏蔽。 硬中断处理程序要…...

在线思维导图编辑!3个AI思维导图生成软件推荐!

思维导图&#xff0c;一种以创新为驱动的视觉化思考工具&#xff0c;已经渗透到我们日常生活和工作的各个角落。当我们需要整理思绪、规划项目或者梳理信息时&#xff0c;思维导图总能提供极大的帮助。 近些年随着云服务等基础设施的完善&#xff0c;我们可以看到越来越多提供…...

使用 Ubuntu + Docker + Vaultwarden + Tailscale 自建密码管理器

使用 Ubuntu Docker Vaultwarden Tailscale 自建密码管理器 先决条件 一台运行 Ubuntu 系统的服务器。可以是云提供商的 VPS、家庭网络中的树莓派、或者 Windows 电脑上的虚拟机等等 一个 Tailscale 账户。如果还没有 Tailscale 账户&#xff0c;可以通过此链接迅速创建一个…...

YOLOv7添加注意力机制和各种改进模块

YOLOv7添加注意力机制和各种改进模块代码免费下载&#xff1a;完整代码 添加的部分模块代码&#xff1a; ########CBAM class ChannelAttentionModule(nn.Module):def __init__(self, c1, reduction16):super(ChannelAttentionModule, self).__init__()mid_channel c1 // red…...

【OpenGL第一个程序】

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、OpenGL第一个程序 前言 本文介绍了OpenGL入门的第一个程序&#xff0c;有详细的注释&#xff0c;便于大家理解其中的逻辑。 一、OpenGL第一个程序 #inclu…...

GPT-4O神器来袭!自动生成Figma设计稿,移动端开发瞬间加速!

2024年5月29日- 近日&#xff0c;一款基于GPT-4O技术的创新工具成功实现根据产品需求文档&#xff08;PRD&#xff09;自动生成Figma设计稿的功能&#xff0c;为移动端应用开发者带来革命性的便捷。据悉&#xff0c;该功能主要针对移动端应用进行优化&#xff0c;并支持使用高质…...

清华大学提出IFT对齐算法,打破SFT与RLHF局限性

监督微调&#xff08;Supervised Fine-Tuning, SFT&#xff09;和基于人类反馈的强化学习&#xff08;Reinforcement Learning from Human Feedback, RLHF&#xff09;是预训练后提升语言模型能力的两大基础流程&#xff0c;其目标是使模型更贴近人类的偏好和需求。 考虑到监督…...

TS(TypeScript)中Array数组无法调出使用includes方法,显示红色警告

解决方法 打开tsconfig.json文件&#xff0c;添加"lib": ["es7", "dom"]即可。 如下图所示。...

基于Kafka的日志采集

目录 前言 架构图 资源列表 基础环境 关闭防护墙 关闭内核安全机制 修改主机名 添加hosts映射 一、部署elasticsearch 修改limit限制 部署elasticsearch 修改配置文件 启动 二、部署filebeat 部署filebeat 添加配置文件 启动 三、部署kibana 部署kibana 修…...

某烟草企业数字化转型物流信息化咨询项目规划方案(117页PPT)

方案介绍&#xff1a; 烟草企业数字化转型物流信息化咨询项目规划方案将为企业带来多方面的价值&#xff0c;包括提升物流运营效率、降低物流成本、优化供应链管理、增强企业竞争力和促进可持续发展等。这些价值的实现将有助于企业在激烈的市场竞争中保持领先地位并实现可持续…...

失落的方舟 命运方舟台服封号严重 游戏封IP怎么办

步入《失落的方舟》&#xff08;Lost Ark&#xff09;&#xff0c;这款由Smilegate精心打造的宏大规模在线角色扮演游戏&#xff08;MMORPG&#xff09;&#xff0c;您将启程前往阿克拉西亚这片饱经沧桑的奇幻大陆&#xff0c;展开一场穿越时空的壮阔探索。在这里&#xff0c;一…...

2.10 mysql设置远程访问权限

2.10 mysql设置远程访问权限 目录1. 管理员运行mysql命令窗口2. 使用 root 用户重新登录 MySQL3. 修改用户权限4. 修改mysql安装目录下的my.ini 目录 说明&#xff1a; Mysql8.0 设置远程访问权限 一、Mysql8.0 设置远程访问权限 1. 管理员运行mysql命令窗口 2. 使用 root 用…...

C# 证件照替换底色与设置背景图---PaddleSegSharp

PaddleSegSharp 是一个基于百度飞桨PaddleSeg项目的人像分割模块而开发的.NET的工具类库。 PaddleSegSharp 中PaddleSeg.dll文件是基于开源项目最新发布版本PaddleSeg PaddleSeg的版本修改而成的C动态库&#xff0c;基于opencv的x64编译而成的。 PaddleSeg是基于飞桨PaddlePa…...

HCIA-HarmonyOS Device Developer 课程大纲

一&#xff1a;OpenHarmony 介绍 - &#xff08; 3 课时&#xff09; - OpenHarmony 简介&#xff1b;OpenHarmony 设计理念&#xff1b;OpenHarmony 设计理念概述&#xff1b; - OpenHarmony 试图解决的问题&#xff1b;应用生态割裂问题&#xff1b;用户数据割裂问题&#…...

洗地机哪个牌子最好用?十大名牌洗地机排行榜

作为一种新兴的智能家居产品&#xff0c;洗地机的市场规模已经突破了百亿大关。如此庞大的市场自然吸引了大量资本的涌入&#xff0c;许多品牌纷纷推出自己的洗地机产品&#xff0c;试图在这个竞争激烈的市场中占据一席之地。然而&#xff0c;面对如此多的品牌和型号&#xff0…...

Unity开发——XLua热更新之Hotfix配置(包含xlua获取与导入)

一、Git上获取xlua 最新的xlua包&#xff0c;下载地址链接&#xff1a;https://github.com/Tencent/xLua 二、Unity添加xlua 解压xlua压缩包后&#xff0c;将xlua里的Assets里的文件直接复制进Unity的Assets文件夹下。 成功导入后&#xff0c;unity工具栏会出现xlua选项。 …...

SkyWalking 10.2.0 SWCK 配置过程

SkyWalking 10.2.0 & SWCK 配置过程 skywalking oap-server & ui 使用Docker安装在K8S集群以外&#xff0c;K8S集群中的微服务使用initContainer按命名空间将skywalking-java-agent注入到业务容器中。 SWCK有整套的解决方案&#xff0c;全安装在K8S群集中。 具体可参…...

论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(二)

HoST框架核心实现方法详解 - 论文深度解读(第二部分) 《Learning Humanoid Standing-up Control across Diverse Postures》 系列文章: 论文深度解读 + 算法与代码分析(二) 作者机构: 上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学 论文主题: 人形机器人…...

Spring Boot 实现流式响应(兼容 2.7.x)

在实际开发中&#xff0c;我们可能会遇到一些流式数据处理的场景&#xff0c;比如接收来自上游接口的 Server-Sent Events&#xff08;SSE&#xff09; 或 流式 JSON 内容&#xff0c;并将其原样中转给前端页面或客户端。这种情况下&#xff0c;传统的 RestTemplate 缓存机制会…...

深入理解JavaScript设计模式之单例模式

目录 什么是单例模式为什么需要单例模式常见应用场景包括 单例模式实现透明单例模式实现不透明单例模式用代理实现单例模式javaScript中的单例模式使用命名空间使用闭包封装私有变量 惰性单例通用的惰性单例 结语 什么是单例模式 单例模式&#xff08;Singleton Pattern&#…...

蓝牙 BLE 扫描面试题大全(2):进阶面试题与实战演练

前文覆盖了 BLE 扫描的基础概念与经典问题蓝牙 BLE 扫描面试题大全(1)&#xff1a;从基础到实战的深度解析-CSDN博客&#xff0c;但实际面试中&#xff0c;企业更关注候选人对复杂场景的应对能力&#xff08;如多设备并发扫描、低功耗与高发现率的平衡&#xff09;和前沿技术的…...

SpringCloudGateway 自定义局部过滤器

场景&#xff1a; 将所有请求转化为同一路径请求&#xff08;方便穿网配置&#xff09;在请求头内标识原来路径&#xff0c;然后在将请求分发给不同服务 AllToOneGatewayFilterFactory import lombok.Getter; import lombok.Setter; import lombok.extern.slf4j.Slf4j; impor…...

Linux --进程控制

本文从以下五个方面来初步认识进程控制&#xff1a; 目录 进程创建 进程终止 进程等待 进程替换 模拟实现一个微型shell 进程创建 在Linux系统中我们可以在一个进程使用系统调用fork()来创建子进程&#xff0c;创建出来的进程就是子进程&#xff0c;原来的进程为父进程。…...

npm install 相关命令

npm install 相关命令 基本安装命令 # 安装 package.json 中列出的所有依赖 npm install npm i # 简写形式# 安装特定包 npm install <package-name># 安装特定版本 npm install <package-name><version>依赖类型选项 # 安装为生产依赖&#xff08;默认&…...

claude3.7高阶玩法,生成系统架构图,国内直接使用

文章目录 零、前言一、操作指南操作指导 二、提示词模板三、实战图书管理系统通过4o模型生成系统描述通过claude3.7生成系统架构图svg代码转换成图片 在线考试系统通过4o模型生成系统描述通过claude3.7生成系统架构图svg代码转换成图片 四、感受 零、前言 现在很多AI大模型可以…...

MAZANOKE结合内网穿透技术实现跨地域图像优化服务的远程访问过程

文章目录 前言1. 关于MAZANOKE2. Docker部署3. 简单使用MAZANOKE4. 安装cpolar内网穿透5. 配置公网地址6. 配置固定公网地址总结 前言 在数字世界高速发展的今天&#xff0c;您是否察觉到那些静默增长的视觉数据正在悄然蚕食存储空间&#xff1f;随着影像记录成为日常习惯&…...