在Echarts中的tooltip上添加点击按钮

news2024/11/17 13:29:00

需求:

在Echarts的tooltips中添加点击按钮并可以鼠标悬停点击该按钮

在这里插入图片描述

功能实现:

  1. 在option中的tooltip添加enterable: true的属性,表示鼠标可以移入tooltip中
  2. 再在formatter中添加 <button onclick="onTooltipsFun()" style='cursor: pointer' > 点击查看更多</button>, 此时的onTooltipsFun方法需要挂载到window上供按钮点击时使用
  3. 除了这两处,还需要添加position的属性,该属性默认不设置时位置会跟随鼠标的位置

代码片段:

const onTooltipsFun = () => {
  console.log('tooltips添加按钮点击事件!');
};

window.onTooltipsFun = onTooltipsFun;

// option属性:
  tooltip: {
    enterable: 'true',
    position: (point)=> ([point[0], point[1]]),
    trigger: 'axis',
    padding: [8, 12.5, 8, 12.5],
    backgroundColor: 'rgb(7, 40, 85, 0.7);',
    borderColor: '#53B4FF',
    textStyle: {
      color: "white" //设置文字颜色
    },
    axisPointer: {//设置悬停突出显示x轴值
      label: {
        show: true,
        backgroundColor: '#0b1f56',
        color: '#fff',
        fontSize: 12,
        formatter: (param) => { 
          return `${xAxisTickData[param.seriesData[0].dataIndex].name}`
        },
      },
    },
    formatter: (param) => {
      // console.log(param)
      let content = `${xAxisTickData[param[0].dataIndex].name}</br>`;
      param.forEach((item) => {
         content += `${item.marker + item.seriesName} : ${item.value[1]}%</br>`;
      });
      return `${content}</br><button οnclick="onTooltipsFun()" style='cursor: pointer'> 点击查看更多</button>`;
    },
  },

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

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

相关文章

protobuf 2定义string常量

背景 protobuf 2中定义的enum枚举值必须为数字类型&#xff0c;故不支持string类型&#xff0c;但有些业务场景又确实需要定义string常量。 目标 在protobuf 2中定义string常量。 方案 思路&#xff1a;通optional default实现string常量。 细节&#xff1a; 1、protobu…

直击HDC展区现场,华为天气开启天气+生活新方式

备受瞩目的HDC 2023 大会正式举办&#xff0c;华为天气携气象领域最新成果展现在大会现场&#xff0c;经过在线下展区实际体验过后&#xff0c;我被天气服务卡强势“种草”了。 天气与人们生活息息相关&#xff0c;面对日益复杂的天气场景&#xff0c;简单的“打开APP看天气”…

手搓单链表

文章目录 前言一、链表和顺序表的区别二、什么是单链表单链表分类单链表的结构 三、带头不循环单链表1.单链表的结构体2.带头不循环单链表的初始化和销毁3.带头不循环单链表的头插&#xff0c;尾插和打印4.带头不循环单链表的头删和尾删5.带头不循环单链表的查找&#xff0c;指…

冠达管理:创新药概念强势拉升,康希诺大涨超15%

立异药概念9日盘中强势拉升&#xff0c;到发稿&#xff0c;昊帆生物“20cm”涨停&#xff0c;康希诺大涨超15%&#xff0c;翰宇药业涨近13%&#xff0c;德展健康涨停&#xff0c;泰格医药、药石科技涨超7%。 康希诺昨日晚间公告&#xff0c;8月7日&#xff0c;公司与 AstraZene…

使用go获取链上数据之主动拉取-搭建环境(一)

使用go获取链上数据之主动拉取-搭建环境&#xff08;一&#xff09; 1、配置文件1.1、新建配置文件1.2、新建setting.go文件1.3、新建config.go文件 2、全局变量配置2.1、新建global.go2.2、初始化配置2.3、验证配置 在我们实际开发项目中&#xff0c;很多时候都需要从链上获取…

基于Selenium模块实现无界面模式 执行JS脚本

此篇文章主要介绍如何使用 Selenium 模块实现 无界面模式 & 执行JS脚本(把滚动条拉到底部)&#xff0c;并以具体的示例进行展示。 1、Selenium 设置无界面模式 创建浏览器对象之前&#xff0c;创建 options 功能对象 &#xff1a;options webdriver.ChromeOptions() 添加…

SciencePub学术 | 传感器类重点SCIE征稿中

SciencePub学术 刊源推荐: 传感器类重点SCIE征稿中&#xff01;信息如下&#xff0c;录满为止&#xff1a; 一、期刊概况&#xff1a; 传感器类重点SCIE 【期刊简介】IF&#xff1a;2.0-2.5&#xff0c;JCR3区&#xff0c;中科院4区&#xff1b; 【版面类型】正刊&#xff1…

【UE4 RTS】03-Camera Zoom

前言 本篇通过对CameraPawn的弹簧臂组件的长度进行增减&#xff0c;从而实现了视角的远近缩放控制。 效果 步骤 1. 在项目设置中添加如下操作映射 2. 打开玩家控制器“RTS_PlayerController_BP”&#xff0c;在上一篇中我们已经实现了CameraPawn的移动功能&#xff1a; 这里…

OpenLayers实战,OpenLayers实现气象台风飓风运动轨迹运动动画,可调台风旋转速度和运动速度,静态图片旋转动画

专栏目录: OpenLayers实战进阶专栏目录 前言 本章使用OpenLayers实现气象中常用的台风或者飓风运动轨迹动画,支持调整台风图标旋转速度和运动速度。 不同的台风可以设置不同的运动速度和旋转速度,也可以通过变量控制图片不旋转。 本章图片使用静态png图片,并非gif动态图。…

棒球电影产业建设·野球1号位

棒球电影产业建设 1. 引言 棒球电影产业在美国和全球的历史发展概述 自20世纪初&#xff0c;棒球电影产业在美国开始起步&#xff0c;以一种富有创意的方式将体育和娱乐结合起来&#xff0c;开创了一种全新的娱乐形式。这些电影为观众提供了一个了解棒球运动的独特视角&#…

FFmpeg 硬编码VideoToolBox流程

介绍 FFmpeg已经提供对 VideoToolBox 的编解码支持&#xff1b;主要涉及到的文件有videotoolbox.c、videotoolbox.h、videotoolboxenc.c、ffmepg_videotoolbox.c。在编译 FFmpeg 源码时&#xff0c;想要支持VideoToolBox&#xff0c;在 configure 时&#xff0c;需要–enable-…

SMART司马他法则(目标管理)

S代表具体(Specific)&#xff0c;指绩效考核要切中特定的工作指标&#xff0c;不能笼统&#xff1b; M代表可度量(Measurable)&#xff0c;指绩效指标是数量化或者行为化的&#xff0c;验证这些绩效指标的数据或者信息是可以获得的&#xff1b; A代表可实现(Attainable)&…

CSV文件编辑器——Modern CSV for mac

Modern CSV for Mac是一款功能强大、操作简单的CSV文件编辑器&#xff0c;适用于Mac用户快速、高效地处理和管理CSV文件。Modern CSV具有直观的用户界面&#xff0c;可以轻松导入、编辑和导出CSV文件。它支持各种功能&#xff0c;包括排序、过滤、查找和替换&#xff0c;使您能…

1.RuoYi-Vue前后端分离版本启动

1.代码下载 去若依官网&#xff0c;选择RuoYI前后端分离版: 下载地址&#xff1a;https://gitee.com/y_project/RuoYi-Vue 2.依赖环境的部署 1.Mysql 2.Redis安装部署 : https://blog.csdn.net/qq_27860623/article/details/132168382 3.Idea打开后端服务 用Idea打开后端的…

隐秘通信-使用PingTunnel搭建ICMP隧道实验

目录 引言 实验目的 实验内容 基础知识 ICMP协议简介 ICMP隧道简介 ICMP隧道搭建工具介绍 PingTunnel简介 实验过程 前置准备 PingTunnel搭建ICMP隧道步骤 CentOS 7更换阿里源 CentOS 7安装make及词法分析工具 CentOS 7安装libpcap依赖库 CentOS 7安装PingTunnel…

Scikit-learn聚类方法代码批注及相关练习

一、代码批注 代码来自&#xff1a;https://scikit-learn.org/stable/auto_examples/cluster/plot_dbscan.html#sphx-glr-auto-examples-cluster-plot-dbscan-py import numpy as np from sklearn.cluster import DBSCAN from sklearn import metrics from sklearn.datasets …

机器学习深度学习——RNN的从零开始实现与简洁实现

&#x1f468;‍&#x1f393;作者简介&#xff1a;一位即将上大四&#xff0c;正专攻机器学习的保研er &#x1f30c;上期文章&#xff1a;机器学习&&深度学习——循环神经网络RNN &#x1f4da;订阅专栏&#xff1a;机器学习&&深度学习 希望文章对你们有所帮…

php后端实现调用高德地图进行POI搜索

对于当前位置或者选定省市位置进行查询 接口实现 /*** 查询地址* ApiTitle (查询地址)* ApiSummary (查询地址)* ApiMethod (POST)* ApiRoute (/api/demo/address)* ApiParams (name"dart", type"integer", requiredtrue, description"省…

项目经理的性格与情绪控制︱小象智能COO、原腾讯项目集管理经理王炼

小象智能COO、原腾讯项目集管理经理王炼女士受邀为由PMO评论主办的2023第十二届中国PMO大会演讲嘉宾&#xff0c;演讲议题&#xff1a;项目经理的性格与情绪控制。大会将于8月12-13日在北京举办&#xff0c;敬请关注&#xff01; 议题简要&#xff1a; 众所周知&#xff0c;项…

光模块故障:能否继续发射光信号?

光模块是一种关键的光通信组件&#xff0c;负责将电信号转换为光信号进行传输。然而&#xff0c;光模块也可能出现故障&#xff0c;导致其无法正常工作。那么&#xff0c;如果光模块坏了&#xff0c;是否还能发射光信号呢&#xff1f;本文将探讨光模块故障对光信号发射的影响&a…