前端-echarts tooltip展示多项自定义数据

效果如图,鼠标滑动到某一个柱子的时候,出现这一项数据的多个自定义数据,外加自己的模板样式渲染。

希望能展示每一列中的多个自定义数据

代码部分

主要是在data中,value就是实际展示的主数据,其他字段名为自定义的数据。

option = {tooltip: {trigger: 'axis',axisPointer: {type: 'cross',crossStyle: {color: '#999'}},formatter: function(params) {// params 是一个数组,包含了每个数据项的信息var result = `<div style="width: 402px;font-family: PingFang SC, PingFang SC-Regular;backdrop-filter: blur(20px);"><div class="top" style="margin-top:14px;margin-left:20px"><div class="tl" style="width: 50px;font-size: 18px;margin-bottom: 4px;margin-right: 200px;">里程:${params[0].data.b}(km)</div><div class="tr" style="width: 50px;font-size: 18px;margin-bottom: 4px;">速度:${params[0].data.a}(km/h)</div><div class="tr" style="width: 50px;font-size: 18px;margin-bottom: 4px;">速度:${params[0].data.value}(km/h)</div></div></div>`;return result;},},toolbox: {feature: {dataView: { show: true, readOnly: false },magicType: { show: true, type: ['line', 'bar'] },restore: { show: true },saveAsImage: { show: true }}},legend: {data: ['Precipitation', 'Temperature']},xAxis: [{type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],axisPointer: {type: 'shadow'}}],yAxis: [{type: 'value',name: 'Precipitation',min: 0,max: 250,interval: 50,axisLabel: {formatter: '{value} ml'}},],series: [{name: 'Precipitation',type: 'bar',tooltip: {valueFormatter: function (value) {return value + ' ml';}},data: [{value:44, a:2, b:3},{value:33, a:2, b:3},{value:22, a:2, b:3},{value:66, a:2, b:3},{value:23, a:2, b:3},{value:23, a:2, b:3},{value:23, a:2, b:3}],},]
};

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

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

相关文章

Linux常见操作问题

1、登录刚创建的用户&#xff0c;无法操作。 注&#xff1a;etc/passwd文件是Linux操作系统中存储用户账户信息的文本文件&#xff0c;包含了系统中所有用户的基本信息&#xff0c;比如用户名、用户ID、用户组ID、用户家目录路径。 注&#xff1a;etc: 这个目录存放所有的系统…

Java工具包——Lombok

目录 1. maven仓库手动导入依赖注解 1.1 maven仓库引入依赖 1.2 在类上使用Data注解 1.3 在属性上使用Getter与Setter注解 2. EditStarters插件注解 2.1 安装EditStarters插件 2.2 在pom.xml中进行操作 2.3 在java对象类中使用注解 3. lombok工具使用结果查看 3.1…

腾讯云CVM,CentOS8系统下部署Java-Web项目步骤详解

在CVM中部署项目首先要配置好JDK,Tomcat,Mysql(这里以Tomcat和Mysql为例)。部署JDK和Tomcat的步骤可以参考 CentOS7系统下部署tomcat,浏览器访问localhost:8080/_不积跬步&#xff0c;无以至千里&#xff1b;不积小流&#xff0c;无以成江河。-CSDN博客 我这里从Mysql的安装和设…

HDOJ5616 Jam‘s balance

目录 HDOJ5616 Jams balance题目描述背景输入输出 题解解法一解法二优化 打赏 HDOJ5616 Jam’s balance 题目描述 背景 有 N N N个已知质量的砝码&#xff0c;分别询问给出的 M M M个质量能否被称出 输入 第一行输入一个变量 T T T&#xff0c;表示有 T T T组数据&#xf…

数据预处理功能教程,上传文件生成知识库 | Chatopera

如何快速的生成高质量的知识库&#xff1f; 数据预处理功能教程 | Chatopera 云服务低代码定制聊天机器人 关于 Chatopera Chatopera 云服务重新定义聊天机器人&#xff0c;https://bot.chatopera.com 定制智能客服、知识库、AI 助手、智慧家居等智能应用&#xff0c;释放创新…

【java算法专场】双指针(上)

目录 前言 基本原理 对撞指针 快慢指针 移动零 算法思路 算法步骤 代码实现 算法分析 复写零 算法思路 算法步骤 代码实现 快乐数 算法思路 算法步骤 代码实现 盛最多水的容器 ​编辑算法思路 代码实现 前言 双指针是一种在数组或链表等线性数据结构中高效…

Axure 教程 | 雅虎新闻焦点

主要内容 在雅虎首页&#xff0c;新闻焦点大图和焦点小图同步切换轮播&#xff0c;本课程我们来学习如何实现这个效果。 交互说明 1.页面载入后&#xff0c;切换当前屏幕显示的5张焦点图&#xff0c;小图标处以横线提示当前焦点图。 2.鼠标移入焦点大图&#xff0c;新闻标题显示…

马斯克的SpaceX星舰有多牛?我们离殖民火星还有多远?

本文首发于公众号“AntDream”&#xff0c;欢迎微信搜索“AntDream”或扫描文章底部二维码关注&#xff0c;和我一起每天进步一点点 埃隆马斯克是一位知名的企业家和工程师&#xff0c;他掌握着多家公司&#xff0c;涉及多个领域&#xff0c;包括电动汽车、太空探索、太阳能、脑…

Charles 证书迁移/复制,实现手机安装一次证书可以连接多个设备的 charles 效果

如果你希望在一个手机上安装一次证书&#xff0c;但是使用这个手机可能在不同的时候去连接你自己安装了Charles的不同设备。比如你在公司有有一个电脑&#xff0c;你在家里也有一个电脑&#xff0c;甚至还有一个笔记本等。 如果想实现只给手机安装一次证书&#xff0c;就可以都…

告别数据线!轻松实现iOS和安卓设备间的文件共享

用 AirDroid 的附近传输功能&#xff0c;完全免费&#xff0c;几十个G的文件也可以相互传输。不限制iPhone和iPad数量&#xff0c;多个设备同时登录也不会强迫下线。 当你要在苹果手机和安卓手机之间传输文件&#xff0c;请将AirDroid安装到两台手机上&#xff0c;然后登录同一…

[AI开发配环境]VSCode远程连接ssh服务器

文章目录 总览&#xff1a;ssh连接远程服务器连接免密登录&#xff1a;Docker&#xff1a;ssh连接远程宿主机后&#xff0c;进一步连接并使用其中的docker容器reload window 配置解释器&#xff1a;CtrlP&#xff0c;在上面输入“>python”, 然后选selecet interpreter运行命…

Ubuntu磁盘分区和挂载 虚拟机扩容 逻辑卷的创建和扩容保姆及教程

目录 1、VMware虚拟机Ubuntu20.04系统磁盘扩容 2、Linux的磁盘分区和挂载 3、创建逻辑卷和逻辑卷的扩容 1、VMware虚拟机Ubuntu20.04系统磁盘扩容 通过下图可以看出我们的根磁盘一共有20G的大小&#xff0c;现在我们把它扩容为30G 注&#xff1a;如果你的虚拟机有快照是无…

CV每日论文--2024.6.26

1、StableNormal: Reducing Diffusion Variance for Stable and Sharp Normal 中文标题&#xff1a;StableNormal&#xff1a;减少扩散方差以实现稳定且锐利的法线 简介&#xff1a;本文介绍了一种创新解决方案&#xff0c;旨在优化单目彩色输入&#xff08;包括静态图片与动态…

最新自助下单彩虹云商城系统源码,含小储云商城模板免授权

最新彩虹商城源码,含小储云商城模板免授权&#xff0c;试用了一下还行&#xff0c;具体的大家可以看看 源码下载&#xff1a;https://download.csdn.net/download/m0_66047725/89405387 更多资源下载&#xff1a;关注我。

通过混合栅极技术改善p-GaN功率HEMTs的ESD性能

来源&#xff1a;Improved Gate ESD Behaviors of p-GaN PowerHEMTs by Hybrid Gate Technology&#xff08;ISPSD 24年&#xff09; 摘要 本工作中&#xff0c;首次证明了混合栅极技术在不增加额外面积和寄生效应的前提下&#xff0c;能有效提升p-GaN HEMTs的栅极静电放电(E…

2024广东省职业技能大赛云计算赛项实战——构建CICD

构建CI/CD 前言 题目如下&#xff1a; 构建CI/CD 编写流水线脚本.gitlab-ci.yml触发自动构建&#xff0c;具体要求如下&#xff1a; &#xff08;1&#xff09;基于镜像maven:3.6-jdk-8构建项目的drone分支&#xff1b; &#xff08;2&#xff09;构建镜像的名称&#xff1a…

浅浅谈谈如何利用Javase+多线程+计算机网络的知识做一个爬CSDN阅读量总访问量的程序

目录 我们发现csdn的文章 首先为了印证我们的想法 我们用postman往csdn我们任意一篇文章发起post请求 发送请求 ​编辑获得响应结果 我们发现我们的阅读量上涨 PostRequestSender类 但是我们经过测试发现 定义一个字符串数组 把URL放进去 然后延迟启动 在线程池里面…

SaaS架构Client/Server应用的实验室LIS系统源码,服务可拆分,功能易扩展

LIS系统&#xff0c;即实验室&#xff08;检验科&#xff09;信息系统&#xff0c;它是医院信息管理的重要组成部分之一&#xff0c;LIS系统采用了智能辅助功能来处理大信息量的检验工作&#xff0c;即LIS系统不仅是自动接收检验数据&#xff0c;打印检验报告&#xff0c;系统保…

Jboss通过未授权/弱口令进入后台上传webshell

目录 Jboss介绍 CVE-2007-1036 漏洞产生的原因 利用原理 访问页面 写入webshell 未授权访问后上传webshell 这一篇学习通过参考大佬的好文章学习Jboss的弱口令/未授权漏洞进入后台Getshell Jboss介绍 JBoss是一个基于J2EE的开放源代码应用服务器&#xff0c;代码遵循L…

《梦醒蝶飞:释放Excel函数与公式的力量》6.2 TIME函数

6.2 TIME函数 1&#xff09; TIME函数概述 TIME函数是Excel中用于根据指定的小时、分钟和秒返回时间值的内置函数。这个时间值是一个从0&#xff08;12:00 AM&#xff09;开始的序列数&#xff0c;其中一天的每个小时等于1/24&#xff0c;每分钟等于1/(24*60)&#xff0c;每秒…