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

2023-11-19

需求:

在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>`;
    },
  },
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在Echarts中的tooltip上添加点击按钮 的相关文章

  • 在 JavaScript 中生成 RSA 密钥对

    我最近发现了这个 RSA JavaScript 库 http www ohdave com rsa http www ohdave com rsa 但是 它要求预先生成密钥 这是我的问题 问题 我想在 JavaScript 中生成 RSA
  • Jasmine-jQuery loadFixtures 未定义

    我对整个茉莉花的事情仍然很陌生 在过去的几个小时里我陷入了这个问题 我尝试使用 loadFixture 加载外部夹具文件 我使用 Jasmine 2 0 0 和 Jasmine jQuery 2 0 5 ReferenceError loa
  • 定义 js-xlsx 单元格范围

    我正在尝试使用 js xlsx 读取 Excel 值 我可以使用以下代码从工作簿工作表中获取单元格值 if typeof require undefined XLSX require xlsx var workbook XLSX readF
  • ajaxStop() 不触发

    这是不起作用的代码 document ajaxStop function this unbind ajaxStop prevent running again when other calls finish Display everythi
  • Javascript - 在加载所有图像后执行

    看了别人的问题我想 window onload 会回答我的问题 我已经尝试过这个 但它会在页面加载时立即执行代码 而不是在图像加载之后 如果有什么区别的话 图像来自 CDN 并且不是相对的 有人知道解决办法吗 我没有使用 jQuery 想要
  • 在 javascript、jQuery 或 css 中,如何让 div 或 iframe 展开以填充其余空间

    我有三个 iframe 我将顶部 iframe 设置为 50px 高度 将底部 iframe 设置为 50px 但我希望中间 iframe 扩展以填充其余空间 有没有一种技术可以用来对任何窗口屏幕尺寸执行此操作 谢谢 example
  • 创建一个简单的 10 秒倒计时

    我想要一行这样写的 Your download will begin in 10 9 8 etc Beginning on page load seconds 我已经设置了 10 秒下载文本 并且我还查看了其他 stackoverflow
  • html 表格单元格的条件格式

    是否有现成的解决方案可以对 HTML 表格进行条件格式设置 通过条件格式 我更感兴趣的是根据该列或其他列 在同一个表中 的值 数字 将不同的颜色作为单元格背景 类似于我们在 Excel 条件格式 gt 色阶 gt 红黄绿中的内容 我想在通过
  • 如何使用 Angular JS 单击时将 html 模板附加到 div/指令?

    我有这种情况
  • 有没有办法将变量从 javascript 导入到 sass 或反之亦然?

    我正在制作一个依赖于块概念的 CSS 网格系统 所以我有一个基本文件 例如 max columns 4 block width 220px block height 150px block margin 10px 它被 mixin 使用 m
  • 判断一个数字是否能被 3 或 5 整除 (FizzBu​​zz)

    如何根据输出是否能被 3 或 5 整除来更改输出 如果它能被 3 整除 我想显示 rock 如果它能被 5 整除 我想显示 star 类似于 FizzBu zz 如果两者都有 他们都会看到 这是我的代码 if var n Math floo
  • JavaScript 测验在提出所有问题之前结束

    我现在正在学习 JavaScript 并且正在创建一个测验 我的测验运行正常 控制台中没有任何错误 但它会跳过问题 有时会在回答所有问题之前结束测验 即使给出正确答案 也会减少时间 我不太确定为什么它会这样做 因为在我看来它的编码是正确的
  • 计算文本选择的 xy 位置

    我正在尝试使用 DOM 元素创建自己的文本选择 是的 我的意思是当您在此元素中选择文本时 您会在文本后面看到蓝色背景 这个想法是停止默认行为 蓝色 并使用我自己的元素来完成工作 方法是找到选择的 xy 位置 然后放置绝对定位的元素 我希望能
  • 禁用特定 div 上的 Tab 键

    我有以下结构 div div Some content div div Some content div div 我想 禁用 div2 上的 tab 键 我的意思是按下 tab 键时 div2 的元素不会获得焦点 有没有简单的方法可以使用
  • 如何处理requireJs超时错误?

    我正在使用 require js 作为加载框架编写一个移动混合应用程序 我遇到加载错误的问题 我想做的是在设备离线且无法下载在屏幕上显示地图所需的 google 地图 API 脚本时设置后备解决方案 我得到的只是 Uncaught Erro
  • Knockout.js 安全绑定

    我想使用带有淘汰赛的安全绑定 为此我使用敲除安全绑定 js https github com brianmhunt knockout secure binding 谁能解释一下为什么下面的代码不起作用 它会抛出一个错误 未捕获 淘汰 安全
  • RoR - Rails 中的大文件上传

    我有一个 Rails Web 应用程序 允许用户上传视频 视频存储在 NFS 安装的目录中 当前的设置适用于较小的文件 但我也需要支持大文件上传 最多 4GB 当我尝试上传 4GB 文件时 它最终会发生 但从用户体验的角度来看很糟糕 上传开
  • 如何使用 jQuery 或 JavaScript 聚焦 或 标签?

    for var i 0 i
  • 将 RequireJS 与遗留代码结合使用

    我正在处理一个非常大的项目 该项目使用 包含带有脚本标记的 javascript 文件的旧版 JSP 页面 使用其他 javascript 模块而不使用 RequireJS 的骨干模型和视图 现在 我们希望开始将 RequireJS 与 j
  • Flowtype 属性“msg”缺失为 null 或未定义

    我发现 Flow 很难用 我明白那个Array find可以返回或未定义 因此 通过阅读以下内容 github Array find on Array 引发 https github com facebook flow issues 351

随机推荐

  • python的文件操作

    一 文件的基本操作 1 读文件read f open filename r encoding utf 8 data f read 读文件 f close 关闭文件 1 绝对路径的易错点 文件路径中 前要加转义字符 或者 使用r使转义字符失效
  • Android declare-styleable:自定义控件的属性(attr.xml,TypedArray)的使用

    android 自定义属性类型的使用 转自 http www cnblogs com ufocdy archive 2011 05 27 2060221 html 做Android布局是件很享受的事 这得益于他良好的xml方式 使用xml可
  • 关于define与defined的区别

    1 define用来定义一个常量 常量也是全局范围的 不用管作用域就可以在脚本的任何地方访问 常量 一个常量一旦被定义 就不能再改变或者取消定义 如 define path root www web define 为常量的值root www
  • 什么是计算机域名和域名定义?

    domain is a very popular term used in computer and information technology Users generally do not know or misinterpret th
  • BAT面试题 - 找一个无序实数数组中的最大差值

    题目描述 一个无序的实数数组a i 要求求里面大小相邻的实数的差的最大值 比如 double a 1 5 4 0 2 100 这个无序的数组 相邻的数的最大差值为100 5 95 题目分析 这题有个简单的做法 首先就是对数组进行一个排序 然
  • 免费送书啦!细数Github大神们的开源书籍!

    作者 弗拉德 来源 弗拉德 公众号 fulade me Go 系列 Mastering GO 推荐语 本书适用于Golang程序员 您之前应该阅读有关Go的介绍性书籍 本书的内容包括但不限于并发 网络编程 垃圾回收 组合 GO UNIX系统
  • STM32F10X_系统定时器(systick)

    目录 1 参考文献 2 systick简介 3 systick寄存器 3 1 控制及状态寄存器 3 2 重装载数值寄存器 3 3 当前数值寄存器 3 4 校准数值寄存器 4 systick中断时间计算 5 systick配置库函数 1 参考
  • YOLOv5 提升模型训练结果小技巧

    一 数据集 1 每类图片数 建议 gt 1500张 2 每类实例数 推荐每类标签实例数 gt 10000 3 图片多样性 必须代表部署环境 对于现实世界我们推荐图片来自一天中不同时间 不同季节 不同天气 不同光照 不同角度和不同相机等 4
  • 线程封闭概念

    线程封闭概念 为什么要有线程封闭这个概念呢 多线程中访问共享可变数据时 涉及到线程间数据同步的问题 并不是所有时候都需要共享数据 所以线程封闭概念就出来了 在Java中线程封闭该怎么做呢 可以通过两个方法来做 ThreadLocal 1 T
  • 34 openEuler使用LVM管理硬盘-创建并挂载文件系统

    文章目录 34 openEuler使用LVM管理硬盘 创建并挂载文件系统 34 1 创建文件系统 34 2 手动挂载文件系统 34 3 自动挂载文件系统 34 openEuler使用LVM管理硬盘 创建并挂载文件系统 在创建完逻辑卷之后 需
  • android代码获取当前package的de目录

    获取de目录首先要获取DE CONTEXT Context deContext getApplicationContext createDeviceProtectedStorageContext 然后通过DE CONTEXT获取de目录 S
  • SpringBoot + MyBatis-plus + Druid 实现简单增删查改、动态条件查询和分页功能

    本文主要讲解 SpringBoot集成Mybatis plus 数据库连接池使用alibaba的druid 实现简单增删查改 动态条件查询和分页功能 项目整体结构 项目添加相关框架依赖 pom xml
  • 辐射强度、辐亮度、辐照度——一文搞定

    先写定义 上图是从网上看到的并重写的 其中我们最容易混淆的就是辐射强度 辐亮度 辐照度的关系 如果我们没有接触专业领域 那么我们可能接触最多的就是辐射强度 而这种现象是不对的 因为我们一般考虑的均为这光好强呀 照得屋里特别亮 这里的光亮 我
  • untiy的纹理格式介绍

    Desktop RGB Compressed DXT1 压缩的RGB纹理 这是最常见的漫反射纹理格式 4位 像素 32 KB 256x256 RGBA Compressed DXT5 压缩的RGBA纹理 这是漫反射和高光控制纹理的主要格式
  • 如何区分网线是几类的_怎么看网线是几类?

    我来回答下本行业的问题 我是做智能化弱电的 在弱电监控系统中网线是连接弱电局域网中必不可少的材料 也是综合布线系统中最常用的一种传输材质 网线是由4对线8芯组成 每芯都有颜色区分 用于数据传输 网线的分类 网线按照性能划分 可以分为五类线
  • 基于sklearn的简单分类器

    基于sklearn的简单分类器 输入 输出 3 1 0 2 5 1 1 8 1 6 4 0 5 2 0 3 5 1 4 7 1 4 1 0 7 5 已知部分输入和部分输出求当输入为7 5时输出为多少 我们观察上面的规律不难发现 当输入的第一
  • react 使用 scss

    react 使用 scss 日常记录开发中遇到的坑 1 使用 npm install sass loader node sass S 进行安装 2 在页面中直接使用 有时候可以 有时候不行 原因 我个人觉得安装的两个插件本版兼容问题 nod
  • vue,vue-cli和@vue/cli是什么关系?有什么区别?

    vue是构建用户界面的渐进式JavaScript 框架 vue cli是vue的一个官方脚手架工具 快速工程化命令工具 用来帮助程序员们快速搭建基于vue框架的开发环境 vue有很多脚手架工具 vue cli只是其中一种 侧重于单页面应用
  • pytorch 取对角线元素/矩阵对角线元素置0

    pytorch 取对角线元素 矩阵对角线元素置0 使用 torch diag 取对角线元素 使用 torch diag embed 恢复维度 import torch a torch randn 3 3 print a tensor 0 7
  • 在Echarts中的tooltip上添加点击按钮

    需求 在Echarts的tooltips中添加点击按钮并可以鼠标悬停点击该按钮 功能实现 在option中的tooltip添加enterable true的属性 表示鼠标可以移入tooltip中 再在formatter中添加