echarts中tooltip自定义使用值params参数详解

2023-10-26

tooltip-formatter(params)
首先是tooltip格式
其次就是分析params参数
最后formatter怎么return显示

在做项目的过程中,需要增加点悬浮内容来解释当前点的数据。但是查了echarts和一些资料,说是需要用formatter函数。但是由于搜索能力也不行,困扰许久。
1.不理解fomatter这个函数中的params的数据到底是从哪儿来的
2.尝试从外界注入一些数据到formatter函数,不用params,失败!
3.不了解params到底是什么,尝试暴力增加params的内容,失败!
4.搞清楚params后,到底要怎么处理这个params来呈现我们需要的内容?
经历了种种痛苦之后,渐渐对params这个参数熟悉了,也查到了formatter函数中应该如何正确表述
首先是tooltip格式

tooltip: {
    trigger: 'axis',
    formatter: function(params) {
        // console.log(params)
        return ()
    }
}

其次就是分析params参数
在formatter函数中打印出params是这样的:

在这里插入图片描述

 其中最主要的就是data。这个data是从series里面当前点的data的值。
所以如果你想要添加悬浮显示的内容,首先你需要增加series中data的内容。比如
原始的data:

// 这个data就很普通简单,在formatter函数返回悬浮显示的时候只能显示value这一单一值
data:[{value: '1'},{value: '2'},...,{value: '100'}]


要想悬浮显示的内容更加丰富,首先需要增加data中每一个的内容,

// 如每一项中增加一个name
data: [
    {value: '1',name: 'lisi'},
    {value: '2',name: 'jack'},...,
    {value: '100',name: 'john'}]


那这样的增加具体怎么实现呢?
借用之前看到一篇博客的图

在这里插入图片描述

 基本上按照图上面的步骤没问题的。同时注意一点就是如果在图表的setOption里面用toolTipData没用的话,注意把所有的toolTipData改为this.toolTipData.
因为我在图表的setOption外面用toolTipData,而图表的setOption内中的series中的data赋值时用的是this.toolTipData,然后一直显示不出来,搞了半天才看到。。。

最后formatter怎么return显示

// ${params[0]['data'].这一段基本是固定的,后面的type和value是你在series里面键如前面举例的name,value
return (
   `<span></span>类型:${params[0]['data'].type}</br>
   <span></span>xxx值:${params[0]['data'].value}`
)
// 或者更简单一点的,直接
return '类型:'+params[0]['data'].type + '</br>'+'xxx值:'+params[0]['data'].value


 

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

echarts中tooltip自定义使用值params参数详解 的相关文章

  • 如何检查 JSON 对象数组是否包含数组中定义的值?

    我有以下 JSON 数据 categories catValue 1 catName Arts crafts and collectibles catValue 2 catName Baby catValue 3 catName Beaut
  • 如何使用数据对象中的值指定 d3.js 选择器?

    我在 Web 应用程序中使用 d3 js 描述我想要做的事情的最简单方法是查看下面链接的 Fiddle 但基本设置是我有一个包含数据对象的数组 my data id B text I want this text in B id C tex
  • 在图像加载之前显示替代文本来代替图像

    在图像加载之前 如何显示文本代替图像 因为在 HTML 网站上我有一个图像作为页面的标题 所以页面完全加载 标题图像稍后出现 h1 img src heading png alt Some nice heading here width 6
  • Twitter Bootstrap 的 Tab 插件中的“data-api”是什么意思

    有一段代码如 TAB DATA API function body on click tab data api data toggle tab data toggle pill function e e preventDefault thi
  • require未定义nodejs

    尝试使用此 smartsheet api http smartsheet platform github io api docs javascript node js sample code http smartsheet platform
  • ios safari - getUserMedia 无法正常工作

    我真的有this https stackoverflow com q 45692526 6048715问题 但 OP 的解决方案对我不起作用 重申一下 我正在使用navigator mediaDevices getUserMedia 在浏览
  • 如何防止脚本注入攻击

    Intro 这个话题一直是 StackOverflow 以及许多其他技术论坛上许多问题和答案的祸根 然而 其中大多数都是特定于具体条件的 甚至更糟 通过脚本注入预防中的 整体 安全性dev tools console or dev tool
  • Javascript:无法停止setTimeout

    我正在开发一个代理服务器检查器 并使用以下代码使用 setTimeout 函数以大约 5 秒的间隔启动请求 function check var url document getElementById url value var proxy
  • 从 JavaScript 字符串保存文件而不访问服务器

    如果我在 JavaScript 中有一个内存字符串 例如 Excel 或 PDF 格式 并且我想弹出一个保存对话框以便用户可以将这些字节保存到文件中 我将如何执行此操作 我试图避免回到服务器 如果我要返回服务器 我可以在响应中发送正确的 H
  • 循环遍历字符串中的 html 标签并将内部文本添加到数组中

    我有一些 HTML 内容保存为字符串 我想循环遍历该字符串中的每个标题标签并获取其内部文本 let str h1 topic 1 h1 p desc of topic 1 p h1 topic 2 h1 p desc of topic 2
  • 字符串编码器固定大小输出

    我接到一个任务 需要编写一个具有以下要求的编码器 输入 1 到 8 位的整数 即 12345678 2352 76543 输出 固定大小的 6 位代码 可以包含任何字母数字和符号 a z A Z 0 9 该操作必须是可逆的 因此给定一个代码
  • D3js 多折线图 mouseOver

    我正在努力适应this http bl ocks org mbostock 3902569D3js 折线图示例 将鼠标悬停在我的多线图表上的使用情况 看起来d3 mouse this 0 on the mousemove函数生成以下错误 无
  • window.onclose 函数

    我使用这个函数来调用我的窗口关闭 这是确认框弹出窗口 if confirm Sure you want to close the window yes return to submit function else no return to
  • 从网站保存嵌入的 pdf

    我正在编写一个小型 C 应用程序来管理供应商提供的 化学品 安全数据表 目前 我手动搜索该化学品并保存 pdf 并在我的程序中添加指向 pdf 的链接 问题是我还有很多化学品需要处理 所以最好将过程自动化 例如 化学品的部件号如下 2710
  • 在单选按钮选择上提交 Rails 表单

    我有以下 Rails 表单 有效 但我想删除 Submit tag 并在选择单选按钮后立即提交表单 我怎么做 p nbsp nbsp p p p 所以我找到了精确的解决方案 感谢输入人员 它帮助我重新定义了我的谷歌搜索
  • 使用 Angular JS 使图像出现在弹出窗口上

    这是我在 StackOverflow 上的第一篇文章 我正在自学 Angular 所以我是一个初学者 目前很困惑 我正在使用 Angular 创建一个网页 其中一个页面涉及一个按钮和一个弹出窗口 我想将图像放入弹出窗口中 但在实现此操作时遇
  • 是否可以使用 JavaScript 检查加载的图像大小

    这是一个完全愚蠢的问题 但我只是想澄清我的疑问 当图像加载时 我们可以使用以下命令检查加载状态onload or oncomplete事件 但我只是想知道有多少部分图像是使用 JavaScript 加载的 真的可能吗 我的问题是 我们可以从
  • 从 BLOB 打印 PDF

    我从外部 API 获取 PDF 文件 使用此代码我可以正确下载该文件 var req new XMLHttpRequest req open POST url true req responseType blob req setReques
  • 使用 JavaScript 在空闲时隐藏鼠标光标

    是否可以使用JavaScript来设置cursor属性的属性none如果鼠标在一定时间内处于非活动状态 例如五秒 请将其设置回auto当它再次活跃时 EDIT 我意识到none不是有效值cursor财产 尽管如此 许多网络浏览器似乎都支持它
  • jQuery fullCalendar + Fancybox 弹出窗口编辑事件

    我正在使用此代码在 fullCalendar 上生成事件

随机推荐

  • 苹果手机显示没有连接服务器怎么办啊,苹果手机更新连接到服务器出现问题怎么办...

    1 我的苹果手机验证失败 下面显示连接到服务器出现问题 怎么办 验证失败 连接到服务器时出现问题 一般是由于网络连接出现异常或者手机系统出错导致的 更换手机当前连接网络信号 比如 将无线网络切换至手机数据 或者是断开网络输入密码进行重新连接
  • XSS-labs 1-13关通关攻略

    目录 通杀 认真 第一关 无过滤 第二关 尖号内xss 第三关 过滤 lt gt 第四关 与第三关一致 只是单引号变成双引号 第五关 a标签 第六关 大小写绕过 第七关 双写绕过 第八关 unicode编码绕过 第九关 白名单绕过 第十关
  • python接口自动化之自动发送测试报告邮件

    目录 目录 前言 smtp授权 发送邮件 封装及应用 总结 前言 SMTP Simple Mail Transfer Protocol 也就是简单邮件传输协议 是一种提供可靠且有效电子邮件传输的协议 python的smtplib模块就提供了
  • Integer值比较

    包装类与基本数据类型 包装类是将基本数据类型封装成一个类 包含属性和名称 使用 在使用过程中 会涉及到自动装箱和自动拆箱 装箱 将基本数据类型转换成包装类 Integer i Integer valueOf a 装箱 拆箱 将包装类转换成基
  • 内部本地、内部全局与外部本地、外部全局

    关于内部本地地址 内部全局地址 外部本地地址 外部全局地址 有些童鞋可能一下子理解起来有些困难 分不清这四者的区别与联系 下面结合自己的经验解释一下 如有理解不对的地方 希望大家指正 先来看看这个术语的概念 1 内部局部地址 在内部网上分配
  • Elasticsearch2.x 全文检索之——文档匹配度

    什么是文档匹配度 在ES中执行一个搜索请求在默认情况下搜索的结果集是按照匹配度倒序排列 但是什么是文档匹配度 它是如何被计算的呢 每个文档的匹配度评分在es中被表示为一个浮点型的正数 score 文档的 score评分越高 文档与搜索词的匹
  • Unity中的简单数据存储办法

    这段代码演示了Unity中的简单数据存储办法 当涉及到不同类型的存储时 下面是一些示例代码来演示在Unity中如何使用不同的存储方法 1 临时存储示例代码 内存变量 csharp 定义一个静态变量来存储临时计分 public static
  • 使用浏览器插件修改request请求header头

    文章目录 前言 一 插件结构 二 代码 1 插件配置项 2 功能代码 项目地址 总结 前言 最近遇到了一个疑似header头引发的bug 需要修改header头来验证 于是写了个插件来实现 一 插件结构 浏览器插件相关的东西我这里就不说了
  • Linux网络配置

    文章目录 一 网络地址配置 1 1网络地址查看 ifconfig 1 2网络配置修改 1 3网络虚拟接口设置 二 路由表配置 2 1路由表查看 route 2 2路由表设置 2 2 1添加指定网段到路由表 2 2 2删除指定的网段 2 2
  • mysql: [Warning] Using a password on the command line interface can be insecure.(using password:YES)

    前段时间不知道什么原因在Linux终端中出现无法启动Mysql的情况 在Linux终端中输入 mysql uroot p密码 的时候出现了下面这个错误 mysql Warning Using a password on the comman
  • 看完这篇 教你玩转渗透测试靶机vulnhub——FunBox10(Under Construction)

    Vulnhub靶机FunBox10 Under Construction 渗透测试详解 Vulnhub靶机介绍 Vulnhub靶机下载 Vulnhub靶机安装 Vulnhub靶机漏洞详解 信息收集 漏洞利用 pspy64提权 获取flag
  • vim常用的功能

    vim是vi 的升级版本 它兼容vi的所有指令 而且还有一些新的特性 比如说预付高亮 可视化操作不仅可以在终端进行 还可以在 x Window mac os windows vim 有多种模式 我们常用的有三种 命令模式 插入模式 末行模式
  • MySQL常用命令总结

    命令行 作用 show engines 查看存储引擎 select database 查看当前数据库 show databases 查看数据库列表 show create database test 查看数据库test的建表语句 show
  • 第三方库github地址汇总

    1 butterknife https github com JakeWharton butterknife android Butterknife requires Java 8 compileOptions sourceCompatib
  • gitlab的日常使用

    gitlab的日常使用 一 登录gitlab 二 修改当前用户的密码 三 项目管理 1 新建项目 2 查看该项目 四 导入ssh key 1 选择ssh方式 2 选择设置列表 3 选择ssh key选项 4 在linux端生成ssh key
  • SpringCloud面试题及答案 300道,springcloud面试题总结 (持续更新)

    SpringCloud面试题及答案 SpringCloud面试题大全带答案 2021年面试题及答案 最新版 高级SpringCloud面试题大全 发现网上很多SpringCloud面试题及答案整理都没有答案 所以花了很长时间搜集 本套Spr
  • 浙大版《Python 程序设计》题目集 第2章-4 特殊a串数列求和

    第2章 4 特殊a串数列求和 给定两个均不超过9的正整数a和n 要求编写程序求a aa aaa aa a n个a 之和 输入格式 输入在一行中给出不超过9的正整数a和n 输出格式 在一行中按照 s 对应的和 的格式输出 输入样例 2 3 输
  • eclipse文件上传错误:the request doesn‘t contain a multipart/form-data or multipart/mixed stream...

    错误信息 org apache commons fileupload FileUploadBase InvalidContentTypeException the request doesn t contain a multipart fo
  • 大数据预处理架构及方法详解

    大数据预处理架构及方法详解 大数据的快速发展和广泛应用 使得大数据预处理成为数据分析和挖掘的关键环节 在本文中 将详细介绍大数据预处理的架构和方法 并提供相应的源代码示例 一 大数据预处理架构 大数据预处理的目标是将原始的 杂乱无章的数据转
  • echarts中tooltip自定义使用值params参数详解

    tooltip formatter params 首先是tooltip格式 其次就是分析params参数 最后formatter怎么return显示 在做项目的过程中 需要增加点悬浮内容来解释当前点的数据 但是查了echarts和一些资料