Echarts tooltip配置项的属性 图表悬浮框

这个小图标就是tooltip的配置项 tooltip:{} //默认样式
在这里插入图片描述


自定义显示数据

如果没有自定义的属性可以 只是写data [1254,1551,574,10]…

 series: {//图表配置项 如大小,图表类型

            name: '图表名字',
            type: 'bar',//图表类型
            data: [{
              value: '454',
              time: '2012-11-12'
            },
            {
              value: '898',
              time: '2020-5-17'
            },
            {
              value: '514',
              time: '2022-1-22'
            },
            {
              value: '548',
              time: '2013-1-30'
            }, {
              value: '518',
              time: '2012-11-12'
            }]
            //自定义属性 

          },
            tooltip: {

			 formatter(params) {
              
              console.log(params)

              return params.data.time
              
              // return '<h1>123</h1>' //自定义元素
            }


          }

在这里插入图片描述

params里的值
在这里插入图片描述


设置触发类型 悬浮框显示的方式

鼠标到柱子上触发

 trigger: 'item'//默认 

在这里插入图片描述

坐标轴触发 鼠标居然到列显示

 trigger: 'axis'//坐标轴触发 

在这里插入图片描述


坐标轴指示器

			axisPointer:
            {
              type: 'line'//默认效果
            }

十字准星效果

   type: 'cross'//默认效果

在这里插入图片描述
阴影效果

type: 'shadow'//阴影效果

设置悬浮层样式 背景颜色 字体

backgroundColor: 'red',//背景颜色
textStyle: {
  color: 'white',//字体颜色  
},
//......

在这里插入图片描述


关闭显示悬浮框

关后将不会显示上面的那个悬浮框

  showContent: false

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

easyrecovery 16数据恢复软件2024最新免费下载地址

EasyRecovery 16是一款操作简单、功能强大数据恢复软件,通过easyrecovery可以从硬盘、光盘、U盘、数码相机、手机等各种设备中恢复被删除或丢失的文件、图片、音频、视频等数据文件。 EasyRecovery Pro 16安装步骤 一、首先需要在该页找到下载地址处选任意地址将EasyRecovery软…

小间距LED屏幕需要解决的五大芯片问题

随着微距LED电子显示屏的像素间距逐渐缩小&#xff0c;对封装技术提出了更高的要求&#xff0c;LED灯珠和芯片尺寸也需要进一步减小。由此引发的显示性能、产品品质、一次性通过率、亮度和灰度等问题都需要通过先进芯片技术来解决。那么&#xff0c;什么是微距LED显示屏&#x…

JavaScript基础知识总结

1.前提 Html是一种标记语言&#xff0c;用来结构化我们的网页内容并赋予内容含义&#xff0c;例如定义段落、标题和数据表&#xff0c;或在页面中嵌入图片和视频 Css是一种样式规则语言&#xff0c;可将样式应用于 HTML 内容&#xff0c;例如设置背景颜色和字体&#xff0c;在多…

BUUCTF-pwn-ciscn_2019_ne_51

简单查看保护&#xff1a; 32为程序没有canary没有PIE&#xff0c;应该是简单的栈溢出。我们照着这个思路去找溢出点在哪&#xff0c;运行下程序看看什么情况&#xff1a; 程序上来是输入一个密码验证。随便输入下错误直接退出。因此我们需要到IDA中看看怎么回事&#xff1a; 主…

tcp/ip协议 error=10022 Winsock.reg Winsock2.reg

tcp/ip协议 error10022 这2个注册表选项千万不能删除&#xff0c;否则上不了网。 按下windows键R键&#xff0c;输入regedit&#xff0c;打开注册表&#xff0c;在文件目录里找到如下两个文件夹&#xff0c;删除这两个文件夹。 路径&#xff1a;HKEY_LOCAL_MACHINE\System\C…

微信小程序获取手机号上限,怎么处理比较省钱

微信新规 微信2023年改了规则&#xff0c;原本免费的小程序获取手机号&#xff0c;现在如果要获取要1分钱一条。 有些小程序的用户非常恐怖&#xff0c; 比如一些工具类的&#xff0c; 群发类的。如果进入小程序就必须要获取小程序&#xff0c;就像是无底洞&#xff0c;让运营…

enote笔记法之附录1——“语法词”(即“关联词”)(ver0.24)

enote笔记法之附录1——“语法词”&#xff08;即“关联词”&#xff09;&#xff08;ver0.24&#xff09; 最上面的是截屏的完整版&#xff0c;分割线下面的是纯文字版本&#xff1a; 作者姓名&#xff08;本人的真实姓名&#xff09;&#xff1a;胡佳吉 居住地&#xff1…

HCIE 01:基于前缀列表的BGP ORF功能

当运行BGP协议的某台设备上&#xff0c;针对入方向配置了基于ip-prefix的路由过滤&#xff0c;过滤了邻居发送的路由&#xff1b; 目前想&#xff0c;通过在peer关系的两端设备上都配置ORF功能&#xff0c;实现路由发送端只能送路由接收端过滤后的路由&#xff1b; ORF功能的说…

Java实现通过经纬度求两个任意地点在球面上的距离

我们在实际开发中会获取对应的经纬度&#xff0c;可以使用ES大数据搜索引擎进行计算对应区域的数据&#xff0c;那我们在如何根据两个经纬度获取对应的球面距离&#xff0c;就是在地球上从一个地点到另一个地点的直线距离 工具类如下: public class GeoUtils {// 地球半径&am…

centos7中通过kubeadmin安装k8s集群

k8s部署官方提供了kind、minikube、kubeadmin等多种安装方式。 其中minikube安装在之前的文章中已经介绍过&#xff0c;部署比较简单。下面介绍通过kubeadmin部署k8s集群。 生产中提供了多种高可用方案&#xff1a; k8s官方文档 本文安装的是1.28.0版本。 建议去认真阅读一下…

Linux常用命令----cp 命令

文章目录 1. 基本用法2. 保留文件属性3. 递归复制4. 仅复制更新的文件5. 交互式复制6. 创建符号链接而非复制7. 复制并备份目标文件8. 指定备份后缀9. 详细输出总结 Linux操作系统中&#xff0c;cp 命令是一个非常基础且强大的工具&#xff0c;用于复制文件或目录。本文将详细介…

[Java]JUC并发编程

JUC并发编程 一、什么是JUC 使用到 java.util 工具包、包、分类 二、线程和进程 进程&#xff1a;一个正在运行的程序&#xff0c;QQ.exe Music.exe 程序的集合&#xff1b; 一个进程往往可以包含多个线程&#xff0c;至少包含一个&#xff01; Java默认有两个线程&#x…

动态规划学习——斐波那契数列

目录 最长的斐波那契数列子序列的长度 1.题目 2.题目接口 3.解题思路及其代码 最长的斐波那契数列子序列的长度 1.题目 如果序列x_1&#xff0c;X_2&#xff0c;...&#xff0c;x_n 满足下列条件&#xff0c;就说它是斐波那契式的: 1.n > 3 2.对于所有i2 <n&a…

Java面向对象(高级)-- 接口(interface)

文章目录 一、概念&#xff08;1&#xff09;引入&#xff08;2&#xff09;类比&#xff08;3&#xff09;举例1. 举例12. 举例23. 举例34. 举例4 &#xff08;4&#xff09; 定义格式及重点举例1. 接口的声明格式2. 接口的成员说明3. 接口内部结构的说明4. 举例4.1 举例1--接…

【算法挨揍日记】day33——1027. 最长等差数列、446. 等差数列划分 II - 子序列

1027. 最长等差数列 1027. 最长等差数列 题目描述&#xff1a; 给你一个整数数组 nums&#xff0c;返回 nums 中最长等差子序列的长度。 回想一下&#xff0c;nums 的子序列是一个列表 nums[i1], nums[i2], ..., nums[ik] &#xff0c;且 0 < i1 < i2 < ... < …

Go GORM简介

GORM&#xff08;Go Object-Relational Mapping&#xff09;是一个用于Go语言的ORM库&#xff0c;它提供了一种简单、优雅的方式来操作数据库。GORM支持多种数据库&#xff0c;包括MySQL、PostgreSQL、SQLite和SQL Server。以下是GORM的一些主要特性 全功能ORM&#xff1a;GORM…

MyBatis-plus-Generate 自动生成代码结构实践

一、新建一个springboot项目&#xff0c;并引入依赖 关注mybatis-plus-boot-starter <properties><java.version>1.8</java.version><project.build.sourceEncoding>UTF-8</project.build.sourceEncoding><project.reporting.outputEncoding…

PyQt基础_007_ 按钮类控件QCombox

import sys from PyQt5.QtCore import * from PyQt5.QtGui import * from PyQt5.QtWidgets import *class ComboxDemo(QWidget):def __init__(self, parentNone):super(ComboxDemo, self).__init__(parent)self.setWindowTitle("combox 例子") self.resize(300, 90) …

【测试开发】web自动化测试框架需求设计 !

1、实现目的 基于BS架构&#xff0c;模拟用户&#xff08;鼠标、键盘&#xff09;操作&#xff0c;达到快速、重复执行测试用例&#xff1b; 便于回归测试&#xff0c;快速覆盖主线用例或功能&#xff1b; 线上或线下巡检测试&#xff0c;结合持续集成&#xff0c;及时发现运…

一起学docker系列之十二什么是dockerfile

目录 1 基本概念2 语法规则3 Dockerfile构建步骤4 Dockerfile、Docker镜像和Docker容器的关系5 保留字介绍5.1 FROM5.2 MAINTAINER5.3 RUN5.4 EXPOSE5.5 WORKDIR5.6 USER5.7 ENV5.8 ADD5.9 COPY5.10 VOLUME5.11 CMD5.12 ENTRYPOINT 6 总结7 参考地址 1 基本概念 Dockerfile是一…