vue echarts tooltip动态绑定模板,并且处理vue事件绑定

news2024/11/17 19:30:25

先上代码:

					  tooltip: {
						  // 这里是车辆icon
						  show: true,
						// trigger: "item",
						// backgroundColor: "transparent",
						appendToBody: true,
						textStyle: {
						color: "#ffffff" //设置文字颜色
						},
						formatter: (params) => {
							const TruckTooltip = Vue.extend(trucktooltipVue);
							
							const component = new TruckTooltip({
								propsData: { carData: params.data }
							});
							const vm = component.$mount();
							
							// 监听自定义事件--重要
							vm.$on('showDialog', (data) => {
								this.showDialog(data); // 调用外部的方法
							});

							return vm.$el.outerHTML; // 获取组件的 HTML
							// return formatHtml(params.data)
						},
					  },

这里自定义监听子组件,trucktooltipVue里面使用this.$emit('showDialog', this.carData.extraInfo.item.shareUrl) 来触发父组件的方法

这里的子组件,因为 tooltip 的内容是以字符串形式返回的,且 ECharts 不会自动处理 Vue 的事件绑定,所以要绑定到window对象上

vue 中动态添加的html元素,绑定点击事件onclick

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2162567.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Java-数据结构-排序(三) |ू・ω・` )

目录 ❄️一、归并排序: ☞ 基本思想: ☞ 代码: ☞ 归并排序的非递归方法: ❄️二、排序算法的分析: ❄️三、非基于比较的排序: ❄️总结: ❄️一、归并排序: ☞ 基本思想&#xf…

在一个.NET Core项目中使用RabbitMQ进行即时消息管理

为了在一个.NET Core项目中使用RabbitMQ进行即时消息管理,以下是详细的全程操作指南,包括安装、配置、编写代码和调试使用。 一、安装RabbitMQ 1. 安装Erlang RabbitMQ依赖Erlang,因此需要先安装Erlang。 Windows: 下载并运行Erlang安装…

人工智能-机器学习-深度学习-分类与算法梳理

目前人工智能的概念层出不穷,容易搞混,理清脉络,有益新知识入脑。 为便于梳理,本文只有提纲,且笔者准备仓促,敬请勘误,不甚感激。 请看右边目录索引 。 人工智能 三大派系 符号主义(Symbolists…

[附源码]宠物领养管理系统+SpringBoot

今天带来一款优秀的项目:宠物领养管理系统源码 。 系统采用的流行的前后端分离结构,内含功能包括"管理端",“用户领养端”,“宠物管理”,“权限登录”等功能。 如果您有任何问题,也请联系小编&a…

keepalived+lvs集群

目录 一、环境 二、配置 1、master 1.在master上安装配置Keepalived 2.在master上修改配置文件 2、backup 1.在backup(192.168.229.12)上安装keepalived 2.在backup上修改配置文件 3、master和backup上启动服务 4、web服务器配置 1.web1和web…

使用Java基于GeoTools读取Shapefile矢量数据属性信息-以某市POI数据为例

前言 在之前的博客中,我们讲过在GDAL中如何读取空间数据的属性和数据信息,也简单的讲过如何在GeoTools中读取Shapefile文件的属性信息和数据信息。对于空间矢量数据库,就像我们传统的二维数据库的表字段和表数据的关系,在研究表数…

BERT训练之数据集处理(代码实现)

目录 1读取文件数据 2.生成下一句预测任务的数据 3.预测下一个句子 4.生成遮蔽语言模型任务的数据 5.从词元中得到遮掩的数据 6.将文本转化为预训练数据集 7.封装函数类 8.调用 import os import random import torch import dltools 1读取文件数据 def _read_wiki(data_d…

Java框架学习(Spring)(ioc)(01)

简介:以本片记录在尚硅谷学习ssm-spring-ioc时遇到的小知识 详情移步:想参考的朋友建议全部打开相互配合学习! 视频: 014-spring-框架概念理解_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1AP411s7D7?p14&vd_sou…

SpringBoot框架在文档管理中的创新应用

第3章 系统分析 3.1 需求分析 在线文档管理系统主要是为了提高工作人员的工作效率和更方便快捷的满足员工,更好存储所有数据信息及快速方便的检索功能,对系统的各个模块是通过许多今天的发达系统做出合理的分析来确定考虑员工的可操作性,遵循…

峟思助力堤防工程安全:构建多功能防洪屏障

堤防工程,作为水利建设中至关重要的防护体系,不仅守护着江河、湖泊及滨海区域的安全,更是确保人民生命财产安全的坚固防线。在现代社会,随着技术的进步与安全意识的提升,堤防工程不仅限于传统的防洪功能,更…

SpringBoot和JPA初探

目录 SpringBoot和JPA初探0.准备条件1.创建JPA项目2.项目3.总结 SpringBoot和JPA初探 我们使用SpringBootJPA做一个简单的API接口演示,通过一个简单的例子让大家对Spring Data JPA有一个整体的认知。 0.准备条件 IntelliJ IDEAjdk 1.8mysql 8.0maven 3.8.x 1.创…

代码随想录算法训练营第三十九天 | 198.打家劫舍 ,213.打家劫舍II,337.打家劫舍III

第三十九天打卡,今天解决打家劫舍系列问题,树形dp比较难。 198.打家劫舍 题目链接 解题过程 dp[i]:考虑下标i(包括i)以内的房屋,最多可以偷窃的金额为dp[i]。 要么不偷这一间,那就是前面那间…

开源链动 2+1 模式、AI 智能名片与 S2B2C 商城小程序:以问题解决为导向的盈利新模式

摘要:本文探讨了问题解决盈利模式的重要性,并结合开源链动 21 模式、AI 智能名片以及 S2B2C 商城小程序等创新工具,阐述了如何以用户为中心,通过深刻洞察用户需求,解决用户问题,实现盈利增长。强调了在当今…

[利用python进行数据分析01] “来⾃Bitly的USA.gov数据” 分析出各个地区的 windows和非windows用户

2011 年, URL 缩短服务 Bitly 跟美国政府⽹站 USA.gov 合作,提供 了⼀份从⽣成 .gov 或 .mil 短链接的⽤户那⾥收集来的匿名数据。 在 2011 年,除实时数据之外,还可以下载⽂本⽂件形式的每⼩时 快照。 数据集下载:通…

LabVIEW项目编码器选择

在LabVIEW项目中,选择增量式(Incremental Encoder)和绝对式(Absolute Encoder)编码器取决于项目的具体需求。增量式编码器和绝对式编码器在工作原理、应用场景、精度和成本等方面存在显著差异。以下从多方面详细阐述两…

通过service访问Pod

假设Pod中的容器可能因为各种原因发生故障而死掉,Deployment等controller会通过动态创建和销毁Pod来保证应用整体的健壮性,换句话说,Pod是脆弱的,但应用是健壮的 每个Pod都有自己的Ip,当controller用新的Pod替代发生故…

SDK(2 note)

复习上一次内容&#xff1a; 把前一次笔记中的代码&#xff0c;简写一下 #include <windows.h> #include<tchar.h> #include <stdio.h> #include <strsafe.h> VOID showerrormassage() {LPVOID lpMsgBuf; FormatMessage(FORMAT_MESSAGE_ALLOCATE_BUFF…

TS-AI:一种用于多模态个体化脑区划分的深度学习管道,并结合任务对比合成|文献速递-Transformer架构在医学影像分析中的应用

Title 题目 TS-AI: A deep learning pipeline for multimodal subject-specific parcellation with task contrasts synthesis TS-AI&#xff1a;一种用于多模态个体化脑区划分的深度学习管道&#xff0c;并结合任务对比合成 01 文献速递介绍 人类大脑在结构和功能组织上表…

nfs版本问题导致挂载失败

一、系统环境 环境版本操作系统Linux Mint 22 Wilma内核版本6.8.0-44-genericgcc 版本arm-none-linux-gnueabihf-gcc (GNU Toolchain for the A-profile Architecture 9.2-2019.12 (arm-9.10)) 9.2.1 20191025uboot 版本2020.01开发板Linux版本5.4.31 二、问题描述 内核通过…

拒绝信息泄露!VMD滚动分解 + Informer-BiLSTM并行预测模型

前言 在时间序列预测任务中&#xff0c;像 EMD&#xff08;经验模态分解&#xff09;、CEEMDAN&#xff08;完全集合经验模态分解&#xff09;、VMD&#xff08;变分模态分解&#xff09; 等分解算法的使用有可能引入信息泄露&#xff0c;具体情况取决于这些方法的应用方式。信…