当前位置: 首页 > 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选项。 …...

Cursor实现用excel数据填充word模版的方法

cursor主页&#xff1a;https://www.cursor.com/ 任务目标&#xff1a;把excel格式的数据里的单元格&#xff0c;按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例&#xff0c;…...

使用VSCode开发Django指南

使用VSCode开发Django指南 一、概述 Django 是一个高级 Python 框架&#xff0c;专为快速、安全和可扩展的 Web 开发而设计。Django 包含对 URL 路由、页面模板和数据处理的丰富支持。 本文将创建一个简单的 Django 应用&#xff0c;其中包含三个使用通用基本模板的页面。在此…...

ubuntu搭建nfs服务centos挂载访问

在Ubuntu上设置NFS服务器 在Ubuntu上&#xff0c;你可以使用apt包管理器来安装NFS服务器。打开终端并运行&#xff1a; sudo apt update sudo apt install nfs-kernel-server创建共享目录 创建一个目录用于共享&#xff0c;例如/shared&#xff1a; sudo mkdir /shared sud…...

基于距离变化能量开销动态调整的WSN低功耗拓扑控制开销算法matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.算法仿真参数 5.算法理论概述 6.参考文献 7.完整程序 1.程序功能描述 通过动态调整节点通信的能量开销&#xff0c;平衡网络负载&#xff0c;延长WSN生命周期。具体通过建立基于距离的能量消耗模型&am…...

新能源汽车智慧充电桩管理方案:新能源充电桩散热问题及消防安全监管方案

随着新能源汽车的快速普及&#xff0c;充电桩作为核心配套设施&#xff0c;其安全性与可靠性备受关注。然而&#xff0c;在高温、高负荷运行环境下&#xff0c;充电桩的散热问题与消防安全隐患日益凸显&#xff0c;成为制约行业发展的关键瓶颈。 如何通过智慧化管理手段优化散…...

大学生职业发展与就业创业指导教学评价

这里是引用 作为软工2203/2204班的学生&#xff0c;我们非常感谢您在《大学生职业发展与就业创业指导》课程中的悉心教导。这门课程对我们即将面临实习和就业的工科学生来说至关重要&#xff0c;而您认真负责的教学态度&#xff0c;让课程的每一部分都充满了实用价值。 尤其让我…...

HarmonyOS运动开发:如何用mpchart绘制运动配速图表

##鸿蒙核心技术##运动开发##Sensor Service Kit&#xff08;传感器服务&#xff09;# 前言 在运动类应用中&#xff0c;运动数据的可视化是提升用户体验的重要环节。通过直观的图表展示运动过程中的关键数据&#xff0c;如配速、距离、卡路里消耗等&#xff0c;用户可以更清晰…...

springboot整合VUE之在线教育管理系统简介

可以学习到的技能 学会常用技术栈的使用 独立开发项目 学会前端的开发流程 学会后端的开发流程 学会数据库的设计 学会前后端接口调用方式 学会多模块之间的关联 学会数据的处理 适用人群 在校学生&#xff0c;小白用户&#xff0c;想学习知识的 有点基础&#xff0c;想要通过项…...

GitFlow 工作模式(详解)

今天再学项目的过程中遇到使用gitflow模式管理代码&#xff0c;因此进行学习并且发布关于gitflow的一些思考 Git与GitFlow模式 我们在写代码的时候通常会进行网上保存&#xff0c;无论是github还是gittee&#xff0c;都是一种基于git去保存代码的形式&#xff0c;这样保存代码…...

怎么让Comfyui导出的图像不包含工作流信息,

为了数据安全&#xff0c;让Comfyui导出的图像不包含工作流信息&#xff0c;导出的图像就不会拖到comfyui中加载出来工作流。 ComfyUI的目录下node.py 直接移除 pnginfo&#xff08;推荐&#xff09;​​ 在 save_images 方法中&#xff0c;​​删除或注释掉所有与 metadata …...