echarts自定义tooltip,给tooltip增加百分号%

news2024/12/23 17:51:41

1.formatter为回调函数:

支持返回 HTML 字符串或者创建的 DOM 实例。

(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string | HTMLElement | HTMLElement[]

在 trigger 为 ‘axis’ 的时候,或者 tooltip 被 axisPointer 触发的时候,params 是多个系列的数据数组。其中每项内容格式同上,并且,

{
componentType: ‘series’,
// 系列类型
seriesType: string,
// 系列在传入的 option.series 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名,类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// 传入的数据值。在多数系列下它和 data 相同。在一些系列下是 data 中的分量(如 map、radar 中)
value: number|Array|Object,
// 坐标轴 encode 映射信息,
// key 为坐标轴(如 ‘x’ ‘y’ ‘radius’ ‘angle’ 等)
// value 必然为数组,不会为 null/undefied,表示 dimension index 。
// 其内容如:
// {
// x: [2] // dimension index 为 2 的数据映射到 x 轴
// y: [0] // dimension index 为 0 的数据映射到 y 轴
// }
encode: Object,
// 维度名列表
dimensionNames: Array,
// 数据的维度 index,如 0 或 1 或 2 …
// 仅在雷达图中使用。
dimensionIndex: number,
// 数据图形的颜色
color: string
}

2.数值增加百分号%

效果图如下:

在这里插入图片描述

js代码如下:

tooltip: {
  trigger: "axis",
  formatter: function(val) {
    let string = val[0].name + "<br>";
    val.forEach(v => {
      string += `<div style='display: flex;align-items: center;justify-content: space-between;'><span>${v.marker}${v.seriesName}</span>&nbsp; &nbsp; <span style='font-weight: 700;'>${v.value}%</span></div>`
    });
    return string
  }
},

总结

凑活用吧,各位

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

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

相关文章

LiveGBS流媒体平台GB/T28181常见问题-token有效期是多久如何设置token有效期有效时间接口调用token的有效时长

LiveGBS常见问题如何设置TOKEN有效时间接口调用token的有效时长 1、TOKEN有效期2、默认token有效期3、配置token_key4、如何配置一直有效的token5、动态有效期6、搭建GB28181视频直播平台 1、TOKEN有效期 调用登陆接口后&#xff0c;会获得一个token&#xff0c;默认的有效期是…

PCB封装设计指导(十四)保存并产生device文件

PCB封装设计指导(十四)保存并产生PSM和device文件 封装命名完成之后,基本上封装的建立也接近结束,如果调网表使用的是第三方网表,还需要device文件才能调入。 但是PSM文件是不管第一方和第三方网表都是需要的,下面介绍如何产生这两个文件。 打开封装文件,如下图点击Fil…

深入理解 Linux 文件系统:从根目录到用户主目录

&#x1f337;&#x1f341; 博主 libin9iOak带您 Go to New World.✨&#x1f341; &#x1f984; 个人主页——libin9iOak的博客&#x1f390; &#x1f433; 《面试题大全》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33…

存储过程——用户自定义变量、局部变量

1.用户自定义变量 在会话一定义的变量在会话二中是用不了的。 使用set指令定义变量,并为变量赋值&#xff0c;mysql中赋值推荐使用 :&#xff0c;因为在mysql中没有这个比较运算&#xff0c;也带有比较运算的功能&#xff0c;因此赋值运算推荐使用 : set myname itcast; se…

一条sql搞崩了整个业务 ai问答

事件起因&#xff0c;我的小伙伴群里有个人发了这么一个消息 我去分析了一下原因&#xff08;&#xff09;&#xff0c;有不同观点评论区评论 使用连接且连接条件都唯一 不使用连接且where条件都唯一

【java】【面对对象高级1】static

目录 1、static修饰成员变量 1.1 修饰成员变量 1.2 成员变量的执行原理 2、static修饰成员变量的应用场景 3、static修饰成员方法 3.1 修饰成员方法 3.2 成员方法的执行原理 4、static修饰成员方法的应用场景 4.1 MyUtil工具类 4.2 main 5、static的注意事项 5.1 类方法…

Vue中TodoList案例_编辑

nextTick: MyItem.vue 加一个编辑按钮&#xff0c;input框&#xff1a;blur失去焦点时触发事件handleBlur&#xff0c;ref获取真实dom&#xff1a; <inputtype"text"v-show"todo.isEdit":value"todo.title"blur"handleBlur(todo,$even…

Access violation at address. Read of address FFFFFFC

常规的数据操作&#xff1a; 见上图&#xff0c;数据保存在.ClientDataSet1数据集中&#xff0c;为了将参数逐条保存在Txt文件中&#xff0c;做了对ClientDataSet&#xff08;DBGridEh&#xff09;的循环写盘和读盘操作&#xff1a; 但是&#xff0c;原代码通过数据集循环 &…

IP 服务级别协议监控

工作场所分布在全球多个地点的企业通过 WAN 链接共享和接收数据&#xff0c;这需要跨广泛的网络位置和路径持续监控网络质量&#xff0c;以实现优化的性能水平和不间断的服务交付。 IP 服务水平协议 IP 服务级别协议 &#xff08;IP SLA&#xff09; 是一种网络测量技术&…

php开发实战分析(10):城市区县联动筛选

php开发实战分析系列目录 php开发实战分析(1)&#xff1a;mysql操作字段&#xff08;添加、删除、修改&#xff0c;多数据表中新增多个字段&#xff09;php开发实战分析(2)&#xff1a;cookie的动态使用&#xff08;设置、获取、删除、猜你喜欢原理、购物车调用&#xff09;ph…

热烈祝贺埃文科技荣获CCF第38届中国计算机应用大会计算机应用科学技术二等奖

2023年7月16-19日&#xff0c;第38届中国计算机应用大会&#xff08;CCF NCCA 2023&#xff09;暨2023年人工智能&#xff0b;应用学术会议在江苏苏州举办。埃文科技董事长兼总经理王永博士受邀出席智慧网安论坛&#xff08;一&#xff09;数据要素市场化&#xff0c;并发表《智…

本地私有仓库部署、docker--harbor私有仓库部署和管理

部署本地私有仓库 拉取镜像 修改daemon.json配置文件 重启docker服务 创建容器 为镜像打标签 上传镜像 查看私有仓库 其他主机拉取私有仓库镜像 Docker--harbor私有仓库 &#xff08;1&#xff09;什么是Harbor Harbor 是 VMware 公司开源的企业级 Docker Registry 项目…

React Dva项目中.roadhogrc.mock.js直接自动导入mock目录下所有文件方式

上文 React Dva项目中模仿网络请求数据方法 中&#xff0c;我们书写了Dva项目模拟后端数据的方式 但是 我们.roadhogrc.mock.js中的这个处理其实并不好用 我们还需要一个一个的引入 我们可以直接靠一段代码 import fs from fs; import path from path; const mock {} fs.re…

VarHandle:Java9中保证变量读写可见性、有序性、原子性利器

文章目录 一、什么是VarHandle0、JMM1、jdk9之前无锁技术的实现 二、VarHandle使用1、VarHandle 快速上手2、VarHandle常用方法3、实战案例1&#xff1a;解决可见性&#xff08;比volatile轻量&#xff09;4、实战案例2&#xff1a;解决指令重排序&#xff08;比volatile轻量&a…

3dsmax制作一个小人

文章目录 步骤起阶五官手臂短袖添加头发、头饰BodyPaint软件贴图导入到3dsmax 渲染 步骤 起阶 五官 手臂 短袖 添加头发、头饰 BodyPaint软件贴图 寻找网络贴图&#xff0c;用PS切割&#xff0c;用BodyPaint恢复纹理 导入到3dsmax 渲染

【干货防踩坑/全图文分步/Gitlab镜像仓库自动同步】Gitlab CE/EE镜像仓库的配置技巧(含ssh/密码两验证方法)

【干货踩坑】Gitlab CE/EE镜像仓库的配置技巧&#xff08;含ssh/密码两验证方法&#xff09; 众所周知&#xff0c;Gitlab是个好东西。为什么呢&#xff1f;GitHub没有的功能&#xff0c;他全有了。更何况还可以私有部署。这两天自己部署了Gitlab&#xff0c;然后想把自己的项…

springboot + redis + 注解 + 拦截器 实现接口幂等性校验

一、概念 幂等是一个数学与计算机学概念&#xff0c;在数学中某一元运算为幂等时&#xff0c;其作用在任一元素两次后会和其作用一次的结果相同。在计算机中编程中&#xff0c;一个幂等操作的特点是其任意多次执行所产生的影响均与一次执行的影响相同。 幂等函数或幂等方法是…

【C++杂货铺】内存管理

文章目录 一、C/C内存分布二、C内存管理方式2.1 new和delete操作内置类型2.2 new和delete操作自定义类型 三、operator new与operator delete函数四、new和delete的实现原理4.1 内置类型4.2 自定义类型 五、定位new表达式&#xff08;placement-new&#xff09;六、malloc/free…

二十三种设计模式第十八篇--责任链模式

责任链模式是一种行为型设计模式&#xff0c;它允许你将请求沿着处理者链传递&#xff0c;直到有一个处理者能够处理该请求为止。责任链模式将请求发送者和请求处理者解耦&#xff0c;从而使得多个处理者都有机会处理同一个请求。 该模式包含以下几个关键角色&#xff1a; 抽象…

CUDA之指针篇

CUDA教程 第一章 指针篇 第二章 cuda原理篇 第三章 随着人工智能的发展与人才的内卷&#xff0c;很多企业已将深度学习算法的C部署能力作为基本技能之一。面对诸多arm相关且资源有限的设备&#xff0c;往往想更好的提速&#xff0c;满足更高时效性&#xff0c;必将更多类似矩…