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

先上代码:

					  tooltip: {// 这里是车辆iconshow: 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.rhkb.cn/news/431514.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

全新热门电商API接口,实现闲鱼商品详细搜索功能

近年来,电商行业蓬勃发展,API(Application Programming Interface)接口已经成为电商平台的重要组成部分。API接口不仅可以实现平台间的数据交互,还可以为开发者提供丰富的功能,满足用户多样化的需求。在这个…

嵌入式算吃青春饭么?

嵌入式系统开发并不是传统意义上的“吃青春饭”的行业。这个领域更侧重于技术深度、专业能力和持续学习的态度,而非仅仅依赖于年龄或体力。 嵌入式系统广泛应用于各种设备和系统中,从智能手机、智能家居到工业自动化、医疗设备、汽车电子等,…

Streamlit:使用 Python 快速开发 Web 应用

一、简单介绍 Streamlit 是一个开源 Python 库,官网地址: https://streamlit.io/http://StreamlitStreamlit 是一个开源的 Python 框架,旨在为数据科学家和 后端工程师们提供只需几行代码即可创建动态数据应用的功能。 让没有任何前端基础…

Linux CentsOS定时删除一个目录下(包含子目录)的改动时间大于12小时的文件

Shell脚本 文件目录如下图 ** 查找/ai/img/目录下的所有文件** find /ai/img/ -type f查找/ai/img/目录下的所有上次改动时间大于720分钟(12小时)的文件 12 小时,也就是 720 分钟。所以,我们可以使用 -mmin 720 来查找修改时间超过 720 分钟(…

前端报错401 【已解决】

前端报错401 【已解决】 在前端开发中,HTTP状态码401(Unauthorized)是一个常见的错误,它表明用户试图访问受保护的资源,但未能提供有效的身份验证信息。这个错误不仅关乎用户体验,也直接关系到应用的安全性…

成都睿明智科技有限公司可靠吗?

在这个短视频风靡的时代,抖音已不仅仅是一个娱乐平台,它更是无数商家眼中的蓝海市场,是电商领域的新宠儿。在这场流量与转化的盛宴中,成都睿明智科技有限公司以其敏锐的市场洞察力和专业的服务能力,正逐步成为抖音电商…

【Linux】组管理权限管理任务调度【更详细,带实操】

Linux全套讲解系列,参考视频-B站韩顺平,本文的讲解更为详细 一、组管理 1、linux组的介绍 linux对文件的管理机制 linux中的文件有三个概念: 1、文件所有者是谁,谁创建了文件,当然文件所有者也可以修改2、文件属于…

企业供应链中台系统设计开发 一站式电商供应链解决方案

国内商业环境的变化极为剧烈,企业的成本优势快速丧失和消费者需求迅速多元化。企业“转型大战”已经全面展开。曾有人表示,企业转型也是一场“优胜劣汰”的游戏,如何降低企业转型风险? 企业供应链中台就是答案!在一定…

echarts图表刷新

图表制作完成&#xff0c;点击刷新图标&#xff0c;可以刷新。 <div class"full"><div id"funnel" class"normal"></div><div class"refreshs"><div class"titles_pic"><img src"./…

针对考研的C语言学习(定制化快速掌握重点1)

1.printf函数的几个要点 printf函数中所有的输出都是右对齐的&#xff0c;除非在%后面添加负号&#xff0c;则表示左对齐 #include<stdio.h> int main() {int num 10;int nums 100;float f 1000.2333333333;printf("%3d\n", nums);//%3d表示输出的总宽度至…

研一上课计划2024/9/23有感

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、学位课1.应用数理统计&#xff08;学3 开卷考试&#xff09;2.最优化方法&#xff08;学3 开卷考试&#xff09;3.新中特&#xff08;学2 三千五百字的品读…

learn C++ NO.18——多态

什么是多态&#xff1f; 多态是C面向对象编程中的一个核心概念&#xff0c;它允许程序在执行过程中&#xff0c;根据对象的实际类型来调用适当的函数。多态性主要通过继承和虚函数来实现&#xff0c;这使得代码更加灵活和可扩展。多态的条件如下&#xff1a;1、调用函数是重写…

Golang | Leetcode Golang题解之第420题强密码检验器

题目&#xff1a; 题解&#xff1a; func strongPasswordChecker(password string) int {hasLower, hasUpper, hasDigit : 0, 0, 0for _, ch : range password {if unicode.IsLower(ch) {hasLower 1} else if unicode.IsUpper(ch) {hasUpper 1} else if unicode.IsDigit(ch)…

DataX实战:从MongoDB到MySQL的数据迁移--修改源码并测试打包

在现代数据驱动的业务环境中&#xff0c;数据迁移和集成是常见的需求。DataX&#xff0c;作为阿里云开源的数据集成工具&#xff0c;提供了强大的数据同步能力&#xff0c;支持多种数据源和目标端。本文将介绍如何使用DataX将数据从MongoDB迁移到MySQL。 环境准备 安装MongoDB…

【亿美软通-注册/登录安全分析报告】

前言 由于网站注册入口容易被黑客攻击&#xff0c;存在如下安全问题&#xff1a; 暴力破解密码&#xff0c;造成用户信息泄露短信盗刷的安全问题&#xff0c;影响业务及导致用户投诉带来经济损失&#xff0c;尤其是后付费客户&#xff0c;风险巨大&#xff0c;造成亏损无底洞…

ehcarts生成彩虹图,半圆饼图,蚊香图等

其实这三种图我都认为是一种图&#xff0c;都是饼图的变形&#xff0c;需求长这样子 我的效果图这样子 想要一模一样自己改改颜色就行了 我们先生成完整的蚊香图&#xff0c;众所周知&#xff0c;我们正常的饼图只是把seriesData配置一次&#xff0c;然后把数据全部塞进去&a…

9/24作业

1. 分文件编译 分什么要分文件编译&#xff1f; 防止主文件过大&#xff0c;不好修改&#xff0c;简化编译流程 1) 分那些文件 头文件&#xff1a;所有需要提前导入的库文件&#xff0c;函数声明 功能函数&#xff1a;所有功能函数的定义 主函数&#xff1a;main函数&…

【AI视频】Runway:Gen-2 图文生视频与运动模式详解

博客主页&#xff1a; [小ᶻZ࿆] 本文专栏: AI视频 | Runway 文章目录 &#x1f4af;前言&#x1f4af;仅图片生成视频方法一&#xff1a;通过Midjourney生成图片方法二&#xff1a;通过Runway预览生成图片注意点 &#x1f4af;图加文生成视频方式一&#xff1a;Midjourney…

中年被裁,记录下这段时间的心路历程,内含前端面试题和面经

前言 真正的转变都是痛苦且无声的。 大家好啊&#xff0c;好久不见&#xff0c;停更了一个月了&#xff0c;最近确实没时间更新我的公益服游戏&#xff0c;这段时间我经历了工作被裁员&#xff0c;学习复习&#xff0c;面试找工作&#xff0c;到最终找到工作。想把这段时间我的…

为什么 ECB 模式不安全

我们先来简单了解下 ECB 模式是如何工作的 ECB 模式不涉及链接模式&#xff0c;所以也就用不着初始化向量&#xff0c;那么相同的明文分组就会被加密成相同的密文分组&#xff0c;而且每个分组运算都是独立的&#xff0c;这也就意味着可以并行提高运算效率&#xff0c;但也正是…