echarts 实现tooltip提示框样式自定义

        实现echarts图提示框自定义样式,最重要的是给tooltip加一个自定义class,下面是我写的例子:

tooltip: {
  trigger: "axis",
  axisPointer: {
    type: "line",
  },
  className: "custom-tooltip-box",
  formatter: function (params) {
    return `<div class='custom-tooltip-style'>
      <span>${params[0].name}年</span></br>
      <div class="span">
        <span>缺材飞机数量:</span>
        <span>${params[0].value}</span>
      </div>
    </div>`;
  },
}
::v-deep .custom-tooltip-box {
  padding: 0 !important;
  border: none !important;
  background-color: transparent !important;
  // 给子盒子自定义样式
  .custom-tooltip-style {
    width: 25rem;
    min-height: 12rem;
    background: url("../../../../assets/images/tooltipBg.webp") no-repeat center
      center;
    background-size: 100% 100%;
    color: #fff;
    display: flex;
    flex-direction: column;
    padding: 1rem 2rem;
    font-size: 1.6rem;
    .span {
      display: flex;
      justify-content: space-between;
      margin-top: 0.5rem;
      :last-child {
        font-weight: 600;
        font-size: 1.8rem;
      }
    }
  }
}

        该实例提示框背景是切的图片,内容通过formatter进行配置,样式上通过赋予className并在style标签中编写,实现如下效果:

(该tooltip自定义样式适用于所有的echarts图,如折线图、柱状图、饼图)

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

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

相关文章

无人智能货柜:引领便捷购物新体验

无人智能货柜&#xff1a;引领便捷购物新体验 无人智能货柜利用人工智能技术&#xff0c;将传统货架与电子商务相结合&#xff0c;形成智能销售终端。其采用先拿货后付款的购物模式&#xff0c;用户只需扫码、拿货、关门三个简洁流畅的步骤&#xff0c;极大地提升了消费者的购物…

如何使用Matplotlib模块的text()函数给柱形图添加美丽的标签数据?

如何使用Matplotlib模块的text函数给柱形图添加美丽的标签数据&#xff1f; 1 简单引入2 关于text()函数2.1 Matplotlib安装2.2 text()引入2.3 text()源码2.4 text()参数说明2.5 text()两个简单示例 3 柱形图绘制并添加标签3.1 目标数据3.2 读取excel数据3.3 设置窗口大小和xy轴…

一文读懂:testcafe框架和页面元素交互

一、互动要求 使用 TestCafe 与元素进行交互操作&#xff0c;元素需满足以下条件&#xff1a;☟ 元素在 body 页面窗口或 iframe 窗口的元素内。如果某个元素在视口之外&#xff0c;则 TestCafe 通过滚动可以滚动到元素可见。 元素是可见的&#xff0c;具有以下属性&#…

自动发微博脚本工具,可批量定时发送,按键精灵完全开源版

就跟标题上面讲的&#xff0c;软件是我之前开发好的&#xff0c;所有功能都能用&#xff0c;是按键精灵的脚本&#xff0c;只是单设备操作&#xff0c;也可以在模拟器下面操作&#xff0c;UI代码方面都设计的很完整&#xff0c;我这边就干脆分享出来给大家用&#xff0c;不用繁…

工程建设智慧施工云平台源码 智慧工地平台源码

智慧工地平台源码 工程建设智慧施工云平台源码 技术框架&#xff1a;微服务架构JavaSpring Cloud UniApp MySql 智慧工地平台是一种智慧型、系统性的工地信息化解决方案&#xff0c;它把现代信息技术融入到建设工程管理中&#xff0c;协调各方资源&#xff0c;优化施工过程&…

掌握苏宁API,一键获取商品详情,解锁无尽商业可能

苏宁的API接口可以用于获取商品详情。以下是一个示例的API接口&#xff0c;通过商品ID获取商品详情&#xff1a; https://open.suning.com/api/content/product/getById?productId商品ID&appKey你的应用密钥&sign你的签名&formatjson 在上面的接口中&#xff0c…

骨传导耳机的优缺点是什么?有什么值得入手的骨传导耳机吗?

骨传导耳机的优点还是挺多的&#xff0c;比如说&#xff1a;佩戴舒适、避免听力损伤、使用更安全灯&#xff0c;在详细了解骨传导耳机有什么优点和缺点之前&#xff0c;先来认识一下什么是骨传导耳机。 骨传导耳机是一种通过人体骨骼来传递声音的耳机&#xff0c;与传统的耳机相…

SAP BW 查看DTP执行结果

SAP BW 查看DTP执行结果 1.选中DTP&#xff0c;双击打开 2.点击“数据传输流程监控器” 3.指定查询期间&#xff0c;执行 4.点击“数据管理存储对象” 5.选中执行记录行的“加载监控器” 6.点击“数据管理源” 7.预览&#xff0c;读取预览数据 8.显示数据结果

python连接elasticsearch

问题一&#xff1a;urllib3.exceptions.ProtocolError: (‘Connection aborted.’, RemoteDisconnected(‘Remote end closed connection without response’)) 协议写错了&#xff0c;是https 问题一&#xff1a;SSLError([SSL: CERTIFICATE_VERIFY_FAILED] certificate ver…

Linux安装OpenCV并配置VSCode环境

Linux安装OpenCV并配置VSCode环境 安装OpenCV环境安装必需工具下载并解压OpenCV库&#xff08;Opencv Core Modules和opencv_contrib&#xff09;创建构建目录&#xff0c;进行构建验证构建结果安装验证安装结果 配置VSCode环境创建项目文件修改配置信息执行程序 安装环境 Ubun…

​​​​​​​实验二 运算符和内置函数使用(Python程序设计实验报告)

实验二 运算符和内置函数使用 实验环境 Python集成开发环境IDLE/Anaconda 实验目的 1&#xff0e;熟练掌握常用运算符的使用。 2. 熟练掌握常用内置函数的使用。 三、实验内容 1. 输入三角形的3个边长a、b、c&#xff0c;求三角形的面积area。利用如下海伦公式求三角形的…

docker中怎么启动容器

1、首先在linux中使用以下命令来启动 Docker 服务&#xff1a; sudo systemctl start docker2、然后下面的命令显示所有的容器列表&#xff0c;包括正在运行和已停止的容器。 docker ps -a然后找到容器ID 3、使用 docker start 启动一个已停止的容器&#xff1a; docker s…

视频修复软件 Aiseesoft Video Repair mac中文版功能

AIseesoft Video RepAIr mac是一款专业的视频修复软件&#xff0c;主要用于修复损坏或无法播放的视频文件。AIseesoft Video RepAIr是一个功能强大的程序,可以帮助恢复丢失或损坏的数据的视频。只要您以相同的格式提供示例视频,并在功能强大的技术的支持下,只需单击几下即可收获…

开放式耳机和骨传导耳机有什么区别?哪款值得入手?

开放式耳机和骨传导耳机最大的区别就是佩戴方式不同和传声方式不同&#xff0c;相比之下骨传导耳机更值得入手一些。但其实骨传导耳机也是开放式耳机&#xff0c;下面先了解下开放式耳机都有哪几种。 一、开放式耳机分哪几种&#xff1f; 开放式耳机分为气传导和骨传导。这两种…

如何定位判断是前端的bug还是后端bug?

前言 随着开发软件趋向于大型化复杂化&#xff0c;软件测试逐渐成为一个专业&#xff0c;需要运用专门的方法和手段&#xff0c;需要专门人才来管理。但是外面的小道消息总是在传&#xff1a;软件测试就只是找bug的&#xff01;这个我可就不同意了~ 软件测试员是找bug&#x…

短信登录获取图形验证码调用过程

文章目录 短信登录获取图形验证码调用过程1、输入某个要获取短信验证的电话 短信登录获取图形验证码调用过程 1、输入某个要获取短信验证的电话 调用到skin皮肤里面的sms_login里面的xml的按钮控件: 这个按钮属于点击信息在Notify里面收到: void CSMSLoginDlg::Notify(TNotif…

自动化测试,5个技巧轻松搞定

想要在质量保证团队中赢得核心&#xff1f;当你组建你的网络应用时要记住这些技巧&#xff0c;可以变得更容易分析并快速创建更多准确可重复的自动化测试。 1.歧义是敌人 尽可能使你的代码具体化。当然&#xff0c;你已经遵循了W3C标准&#xff0c;对吗&#xff1f;以下有三件…

EtherCAT超高速实时运动控制卡XPCIE1032H上位机C#开发(二):EtherCAT总线初始化

XPCIE1032H功能简介 XPCIE1032H是一款基于PCI Express的EtherCAT总线运动控制卡&#xff0c;可选6-64轴运动控制&#xff0c;支持多路高速数字输入输出&#xff0c;可轻松实现多轴同步控制和高速数据传输。 XPCIE1032H集成了强大的运动控制功能&#xff0c;结合MotionRT7运动…

Isight 2023 新功能介绍

​​Isight是一个仿真分析流程自动化和多学科多目标优化工具&#xff0c;它提供了一个可视化的灵活的仿真流程搭建平台&#xff0c;同时提供与多种主流CAE分析工具的专用接口&#xff0c;利用此工具&#xff0c;用户可以方便的以拖拽的方式可视化的快速建立复杂的仿真分析流程&…