echarts tooltip提示组件框自定义浮窗内容

echarts tooltip提示组件框自定义浮窗内容

tooltip提示组件框 有三种浮窗展示方法

第一种:默认展示
第二种:字符串模板
第三种:回调函数

  • 第二种 formatter(字符串模板)
    在这里插入图片描述
    模板变量有 {a}, {b},{c},{d},{e},分别表示系列名,数据名,数据值…
    不同图表类型下的 {a},{b},{c},{d} 含义不一样,如下图:

折线(区域)图、柱状(条形)图、K线图 : {a}(系列名称),{b}(类目值),{c}(数值), {d}(无)
散点图(气泡)图 : {a}(系列名称),{b}(数据名称),{c}(数值数组), {d}(无)
地图 : {a}(系列名称),{b}(区域名称),{c}(合并数值), {d}(无)
饼图、仪表盘、漏斗图: {a}(系列名称),{b}(数据项名称),{c}(数值), {d}(百分比)

例子:

formatter: '{b0}: {c0} {b1}: {c1}

  • 第三种 formatter(回调函数)
    在这里插入图片描述
    重点说明一下 params 参数,params 为一个对象,里面包含 formatter 需要的数据集(也就是相关数据)
{componentType: 'series',// 系列类型seriesType: string,// 系列在传入的 option.series 中的 indexseriesIndex: number,// 系列名称seriesName: string,// 数据名,类目名name: string,// 数据在传入的 data 数组中的 indexdataIndex: number,// 传入的原始数据项data: Object,// 传入的数据值。在多数系列下它和 data 相同。在一些系列下是 data 中的分量(如 map、radar 中)value: number|Array|Object,// 坐标轴 encode 映射信息,// key 为坐标轴(如 'x' 'y' 'radius' 'angle' 等)// value 必然为数组,不会为 null/undefined,表示 dimension index 。// 其内容如:// {//     x: [2] // dimension index 为 2 的数据映射到 x 轴//     y: [0] // dimension index 为 0 的数据映射到 y 轴// }encode: Object,// 维度名列表dimensionNames: Array<String>,// 数据的维度 index,如 0 或 1 或 2 ...// 仅在雷达图中使用。dimensionIndex: number,// 数据图形的颜色color: string,// 饼图/漏斗图的百分比percent: number,// 旭日图中当前节点的祖先节点(包括自身)treePathInfo: Array,// 树图/矩形树图中当前节点的祖先节点(包括自身)treeAncestors: Array
}

例子:

 // 注意: trigger: 'axis' 或者 tooltip 被 axisPointer 触发的时候,params 是多个系列的数据数组 !!!。其中每项内容格式同上// 上述情况 params 为数组,要想拿到当前的所有数据就必须要遍历 params // 通过 js的模板字符串方法进行拼接 再return{trigger: 'axis',formatter:(params, ticket, callback) => {const { axisValue } = params[0]let content = `<div>自定义内容${axisValue}</div>`for(var i = 0; i < params.length; i++){const { seriesName, value, marker } = params[i]content += `<div> ${seriesName} ${value}</div>`}return content}
  • ticket 和 callback
    在这里插入图片描述
    echarts tooltip链接: https://echarts.apache.org/

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

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

相关文章

C++ 作业 24/3/14

1、成员函数版本实现算术运算符的重载&#xff1b;全局函数版本实现算术运算符的重载 #include <iostream>using namespace std;class Test {friend const Test operator-(const Test &L,const Test &R); private:int c;int n; public:Test(){}Test(int c,int n…

LeetCode 热题 100 | 回溯(二)

目录 1 39. 组合总和 2 22. 括号生成 3 79. 单词搜索 菜鸟做题&#xff0c;语言是 C&#xff0c;感冒快好版 关于对回溯算法的理解请参照我的上一篇博客&#xff1b; 在之后的博客中&#xff0c;我将只分析回溯算法中的 for 循环。 1 39. 组合总和 题眼&#xff1a;c…

VBA_MF系列技术资料1-400

MF系列VBA技术资料1-400 为了让广大学员在VBA编程中有切实可行的思路及有效的提高自己的编程技巧&#xff0c;我参考大量的资料&#xff0c;并结合自己的经验总结了这份MF系列VBA技术综合资料&#xff0c;而且开放源码&#xff08;MF04除外&#xff09;&#xff0c;其中MF01-0…

python爬虫(11)之BeautifulSoup模块

1、模块介绍 所谓BeautifulSoup模块是通过html源代码进行筛选类似于正则表达式那种类型 2、代码 import os import requests from bs4 import BeautifulSoup from PIL import Image from io import BytesIOheaders {Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit…

Java复习02 IO流

Java复习02 IO流 首先&#xff0c;“IO”在计算机里面代表的是“输入/输出”&#xff08;Input / Output&#xff09;&#xff0c;简单来说&#xff0c;就是计算机与外部世界进行数据交流的过程。比如&#xff0c;你在键盘上敲字&#xff0c;数据就输入到计算机里了&#xff0…

深入理解Spring的ApplicationContext:案例详解与应用

深入理解Spring的ApplicationContext&#xff1a;案例详解与应用 在Spring框架的丰富生态中&#xff0c;ApplicationContext扮演着至关重要的角色。作为BeanFactory的扩展&#xff0c;ApplicationContext不仅继承了其所有功能&#xff0c;还引入了更多高级特性&#xff0c;使得…

一文搞懂dataclass和field

目录 1. 背景2. dataclass函数签名详解2.1 repr示例2.2 eq与order示例2.3 frozen示例2.4 __post_init__2.5 继承 3. Field3.1 default与default_factory3.2 init与repr3.3 compare3.4 metadata Ref 1. 背景 考虑这样一个场景。假如我们要定义一个 Person 类&#xff0c;并希望…

FastAPI 是什么?深入解析

FastAPI 是一个现代、快速&#xff08;高性能&#xff09;的 Web 框架&#xff0c;用于构建基于 Python 的 API。它是一个开源项目&#xff0c;基于 Starlette 和 Pydantic 库构建而成&#xff0c;提供了强大的功能和高效的性能。 FastAPI 官网地址&#xff1a;fastapi.tiango…

《软件工程》复试问答题总结

软件系统的三个测试阶段&#xff1a; 第一阶段&#xff1a;发现和解决BUG 集中在发现bug&#xff0c;考研测试设计能力&#xff0c;发现bug之后如何清晰表述定级&#xff0c;以及验证&#xff0c;之后举一反三尽早发现更多类似bug 第二阶段&#xff1a;质量的管理 多做质量数据…

Vue3自定义指令!!!

通过自定义指令实现菜单显示和权限控制问题。 一、新建一个在src目录下创建包directives&#xff0c;在包中创建一个ts文件。 import { useStore } from "/store/pinia";function hasRoles(role: any) {const pinaRoles useStore().roles;if (typeof role "s…

【RPG Maker MV 仿新仙剑 战斗场景UI (四)】

RPG Maker MV 仿新仙剑 战斗场景UI 四 三级战斗指令菜单效果代码完成效果 下篇预告 三级战斗指令菜单 仙剑1中三级战斗的菜单内容如下&#xff1a;使用、投掷、装备这三项。 效果 在RMMV中原始菜单中是没有这三级菜单的&#xff0c;因此需要重新进行添加进去。 代码 这里贴…

分布式思想

1、单体架构设计存在的问题 传统项目采用单体架构设计,虽然可以在一定的程度上解决企业问题,但是如果功能模块众多,并且将来需要二次开发.由于模块都是部署到同一台tomcat服务器中,如果其中某个模块代码出现了问题,将直接影响整个tomcat服务器运行. 这样的设计耦合性太高.不便…

19.ADC模数转换器知识点+AD单通道AD多通道应用程序示例

0. 江协科技/江科大-STM32标准库开发-各章节详细笔记-查阅传送门_江协科技stm32笔记-CSDN博客文章浏览阅读2.9k次&#xff0c;点赞44次&#xff0c;收藏128次。江协科技/江科大-STM32标准库开发-各章节详细笔记-传送门至各个章节笔记。基本上课程讲的每句都详细记录&#xff0c…

Python转C++的童鞋看这里

一、前言 Python学完了&#xff0c;很多人都去学了C。在学习C之前&#xff0c;建议大家先打好基础&#xff0c;对C和Python的区别先了解了解&#xff0c;会对后续的C学习提供很大的帮助。 二、特点区分 1. Python Python是一种简单而高效的语言&#xff0c;它已经帮你封装好了…

Python-OpenCV-边缘检测

摘要&#xff1a; 本文详细介绍了Python-OpenCV的边缘检测技术&#xff0c;包括基础知识回顾、功能实现、技巧与实践、常见问题与解答等&#xff0c;为读者提供了全面深入的教程。 阅读时长&#xff1a;约60分钟 关键词&#xff1a;Python, OpenCV, 边缘检测, Canny, Sobel …

群晖 Synology Photos DSM7 自定义文件夹管理照片

背景 众所周知&#xff0c;目前群晖DSM7中使用Synology Photos做照片管理时&#xff0c;个人照片只能默认索引 /home/Photos 文件夹&#xff0c;但是如果个人照片很多或者用户很多时&#xff0c;共享文件夹/homes 所在的存储空间就会不够用 当然&#xff0c;如果你的存…

李彦宏“程序员将不再存在”言论被周鸿祎驳斥,网友怒怼:先把百度程序员都开除了

在 3 月 9 日央视的《对话》开年说节目上&#xff0c;百度创始人、董事长兼 CEO 李彦宏表示&#xff0c;基本上以后不会存在“程序员”这种职业了&#xff0c;因为只要会说话&#xff0c;人人都会具备程序员的能力。 “未来的编程语言只会剩下两种&#xff0c;一种叫做英文&am…

Python和RPA之间的区别和联系

Python是实现RPA的工具之一&#xff0c;且RPA要复杂的多&#xff0c;远不是会Python这么简单。 要理解RPA和Python的区别&#xff0c;先看它们各自做什么。 1、什么时候会用到RPA&#xff1f; 比如你的财务同事需要做财务对账&#xff0c;发票报销&#xff0c;税务申报等&…

【刷题训练】LeetCode125. 验证回文串

验证回文串 题目要求 示例 1&#xff1a; 输入: s “A man, a plan, a canal: Panama” 输出&#xff1a;true 解释&#xff1a;“amanaplanacanalpanama” 是回文串。 示例 2&#xff1a; 输入&#xff1a;s “race a car” 输出&#xff1a;false 解释&#xff1a;“rac…

C#常用数据操作方法详解

文章目录 C#常用数据操作方法详解字符大师&#xff1a;String类的使用艺术字符串截取&#xff1a;Substring示例寻找字符串&#xff1a;IndexOf示例字符串替换&#xff1a;Replace示例字符串分割&#xff1a;Split示例转小写&#xff1a;ToLower示例 数学机械师&#xff1a;Mat…