echarts的折线图,在点击图例后,提示出现变化,不报错。tooltip的formatter怎么写

news2024/10/6 12:33:46

在点击图例的年后,提示框会相应的变化,多选和单选都会响应变化。tooptip的重度在formatter

        tooltip:{
                show:true,
                trigger:"axis",
                alwaysShowContent:true,
                triggerOn:"mousemove",
                textStyle:{
                    color:"#fff"
                },
                backgroundColor:'rgba(6,17,71,0.8)',
                borderColor:"#0E8BFF",
                borderWidth:2,
                // formatter:"{b}销售额<br/>{a0}:{c0}<br/>{a1}:{c1}<br/>{a2}:{c2}"
                formatter:function(params){
                    console.log(params,"params")
                    if(params.length==0){return}
                    let base=params[0].name+"销售额"+"<br/>"
                    for(let i=0;i<params.length;i++){
                        base=base+`<span style="display: inline-block;padding: 5px 5px 5px 0px;"><i style="display: inline-block;width: 10px;height: 10px;background:${params[i].color};border-radius: 50%;"></i>
                            </span>`+params[i].seriesName+": "+params[i].value+"<br/>"
                    }
                    return base                
                }

            },

当点击了图例,会拿到数组,将标题在循环数组的时候,每次遍历都在原来的基本标题上增加新的内容,最后将基本标题内容返回。所以,点击图例后,提示会响应的变化

echarts中自定义提示框 (tooltip.formatter)_echarts tooltip formatter自定义_依旧平凡的博客-CSDN博客

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

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

相关文章

结构体-时间的计算

任务描述 本关任务需要你编写函数计算一个时间之前“xx小时xx分xx秒”的时间是多少。 以24小时制的格式记录当前时间&#xff0c;譬如“09:19:52”&#xff0c;表示上午9点19分52秒&#xff0c;则“1小时20分30秒”前的时间应该是“同一天”的“07:59:22”。 提示&#xff1a;…

Scapy 解析 pcap 文件从HTTP流量中提取图片

Scapy 解析 pcap 文件从HTTP流量中提取图片 前言一、网络环境示例二、嗅探流量示例三、pcap 文件处理最后参考 ​ 作者&#xff1a;高玉涵 ​ 时间&#xff1a;2023.9.17 10:25 ​ 环境&#xff1a;Linux kali 5.15.0-kali3-amd64&#xff0c;Python 3.11.4&#xff0c;scapy…

解决Springboot使用Junit测试时对数据库的修改无效

现象 在使用Junit做单元测试的过程中&#xff0c;比如对mybatis的dao进行单元测试&#xff0c;发现对数据库的select操作正常&#xff0c;可以获取数据&#xff0c;但insert、update、delete操作即使运行不报错&#xff0c;仍然不能不能对数据产生修改和插入。 原因和解决 原…

d3dx9_42.dll丢失修复指南,如何修复丢失的d3dx9_42.dll文件

d3dx9_42.dll是DirectX 9的一个动态链接库文件&#xff0c;它是许多游戏和软件的必需组件。如果缺少这个文件&#xff0c;可能会导致程序无法正常运行。本文将详细讲解d3dx9_42.dll的作用以及丢失的原因&#xff0c;并提供5种修复方法。 一、d3dx9_42.dll的作用 1. d3dx9_42.d…

IDEA创建完Maven工程后,右下角一直显示正在下载Maven插件

原因&#xff1a; 这是由于新建的Maven工程&#xff0c;IDEA会用它内置的默认的Maven版本&#xff0c;使用国外的网站下载Maven所需的插件&#xff0c;速度很慢 。 解决方式&#xff1a; 每次创建 Project 后都需要设置 Maven 家目录位置&#xff08;就是我们自己下载的Mav…

操作系统学习笔记-精简复习版

文章目录 操作系统概述1、操作系统2、主要功能3、用户态和内核态4、系统调用 进程管理1、进程和线程2、引入线程的好处3、线程间同步4、进程控制块 PCB5、进程的状态6、进程的通信方式7、进程的调度算法8、僵尸进程&孤儿进程9、死锁 内存管理1、内存碎片2、内存管理3、虚拟…

2023面试知识点一

1、新生代和老年代的比例 默认的&#xff0c;新生代 ( Young ) 与老年代 ( Old ) 的比例的值为 1:2 ( 该值可以通过参数 –XX:NewRatio 来指定 )&#xff0c;即&#xff1a;新生代 ( Young ) 1/3 的堆空间大小。老年代 ( Old ) 2/3 的堆空间大小。其中&#xff0c;新生代 ( …

WebGoat搭建和Yakit学习

环境搭建 jdk版本&#xff1a;openjdk version "17.0.5“ WebGoat版本&#xff1a;webgoat-server-8.1.0.jar 环境不同有很大可能不能搭建成功 运行命令&#xff1a;java -jar webgoat-server-8.1.0.jar --server.port8888 --server.address192.168.142.131 搭建完成后…

SOLIDWORKS Composer位置关键帧的使用

SOLIDWORKS Composer是专业的SOLIDWORKS及3D文件处理的动画制作软件&#xff0c;作为SOLIDWORKS 产品线下的一个明星存在。 SOLIDWORKS Composer几乎可以处理任何SOLIDWORKS的模型文件并将之转化成可以动作的机械动画&#xff0c;可以引用在企业的网站、产品说明书以及工作指导…

卡尔曼滤波(Kalman Filter)原理浅析-数学理论推导-1

目录 前言数学理论推导1. 递归算法2. 数学基础结语参考 前言 最近项目需求涉及到目标跟踪部分&#xff0c;准备从 DeepSORT 多目标跟踪算法入手。DeepSORT 中涉及的内容有点多&#xff0c;以前也就对其进行了简单的了解&#xff0c;但是真正去做发现总是存在这样或者那样的困惑…

springboot和vue:一、cs/bs区别+maven介绍与其仓库配置

cs/bs的区别&#xff1a; ​​ C/S&#xff1a; 1.交互性强&#xff0c;具有安全访问模式&#xff0c;网络流量低&#xff0c;响应速度快&#xff0c; 2.因为客户端负责大多数业务逻辑和UI演示&#xff0c;所以也被称为胖客户端。 3.C/S结构的软件需要针对不同的操作系统开发…

QT之QML开发 锚点布局

QML中经常会用到锚点布局&#xff0c;本篇简单演示一下锚点布局的使用。 目录 1.锚点布局的说明 2.锚点布局三等分窗口 3.锚点布局拆分窗口 4.窗口拖动 5.完整代码 1.锚点布局的说明 2.锚点布局三等分窗口 main.qml import QtQuick 2.15 import QtQuick.Window 2.15 imp…

二叉树的具体原理及实现

文章目录 一.树的专业术语二.二叉树的原理三.常见的二叉树分类1.完全二叉树2.平衡二叉树3.二叉搜索树 四.二叉搜索树算法具体实现五.二叉搜索树具体实现代码 一.树的专业术语 首先先介绍树的专业术语 二.二叉树的原理 二叉搜索树&#xff08;Binary Search Tree&#xff0c…

Java判断时间间隔来决定任务执行

数据库中的任务记录表的某条记录&#xff0c;状态一直无法变更&#xff0c;导致整个任务进程卡住&#xff0c;看了代码如下&#xff0c; 正常情况是要走到这个else里面&#xff0c;执行dockingGroup.setStatus(JobStatus.FAILED.getCode());将任务状态改为失败的 &#xff0c;查…

Windows/Linux(命令、安装包和源码安装)平台各个版本QT详细安装教程

前言 本文章主要介绍了Windows/Linux平台下&#xff0c;QT4&#xff0c;QT5&#xff0c;QT6的安装步骤。为什么要把QT版本分开介绍呢&#xff0c;因为这三个版本&#xff0c;安装步骤都不一样。Windows平台&#xff0c;QT4的Qt Creator&#xff0c;QT库和编译器是分开的&#…

【奇思妙想】【节省磁盘空间】我有一些文件,我不想移动它们,但又想节省磁盘空间,该怎么做呢?

2023年9月17日&#xff0c;周日晚上 今天晚上整理电脑的磁盘空间时&#xff0c;无意间想到了这个事情 我有一个文件夹 这个文件夹里面有很多不常用的文件 但我不想把它们移走或删除&#xff0c;那我怎么才能从中节省磁盘空间呢&#xff1f; 很简单&#xff0c;把这些不常用的…

Maven常见面试题总结

Maven简介 Maven 是一个项目管理和整合工具。Maven 包含了一个项目对象模型 (Project Object Model)&#xff0c;一组标准集合&#xff0c;一个项目生命周期管理系统(Project Lifecycle Management System)&#xff0c;一个依赖管理系统(Dependency Management System)&#x…

JavaScript中的单线程(single-threaded)和异步编程的关系

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 单线程&#xff08;Single-Threaded&#xff09;与异步编程的关系⭐ 单线程的含义⭐ 阻塞与非阻塞⭐ 异步编程⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启…

RK3588 点亮imx586摄像头

一.硬件原理图 mipi摄像头硬件确认点&#xff1a; 1.供电&#xff1a;5V&#xff0c;2.8V&#xff0c;1.2V&#xff0c;1.8V&#xff0c;reset脚&#xff08;硬拉3.3&#xff0c;上电的时候从低到高&#xff09;&#xff0c;pwron脚外接 3.3V。 2,时钟&#xff1a;MCLKOUT是2…

leetcode数组必刷题——二分查找、移除元素、有序数组的平方、长度最小的子数组、螺旋矩阵、螺旋矩阵 II

文章目录 二分查找移除元素有序数组的平方长度最小的子数组螺旋矩阵螺旋矩阵II 二分查找 给定一个 n 个元素有序的&#xff08;升序&#xff09;整型数组 nums 和一个目标值 target &#xff0c;写一个函数搜索 nums 中的 target&#xff0c;如果目标值存在返回下标&#xff0…