echarts修改tooltip默认的圆点图标为其他样式

news2024/11/29 0:48:33

业务需求,默认是圆点,需要把线的由圆点改为线

红色线是理论,点是历史理论,绿色线是实际, 点是历史实际,在series里的顺序也是这样排的。

打印出来的params里的marker就是圆点,改这段代码就可以了

 tooltip: {
    trigger: 'axis',
    axisPointer: {
      crossStyle: {
        color: '#999'
      }
    },
    backgroundColor: appStore.getThemeObj['--xxx-content-bg'],
    borderColor: appStore.getThemeObj['--xxx-content-bg'],
    textStyle: {
      color: appStore.getThemeObj['--xxx-second-content-color']
    },
    confine: true,
    formatter(params) {
      let tip = ''
      let text
      let title
      const therolineMarker = `<span style="display:inline-block;margin-right:4px;width:10px;height:3px;line-height:3px;vertical-align:middle;background-color:#F63F3F;"></span>`
      const AclineMarker = `<span style="display:inline-block;margin-right:4px;width:10px;height:3px;line-height:3px;vertical-align:middle;background-color:#15D11E;"></span>`

      for(let i = 0; i < params.length; i++) {
        title = params[0].axisValueLabel + '<br />'
        if (params[i].componentSubType === 'line') {
          const name = params[i].seriesIndex === 0 ? '理论xxx:' : '实际xxx:'
          const lineStyle = params[i].seriesIndex === 0 ? therolineMarker : AclineMarker
          text = `${lineStyle}${name}${params[i].value[1]} ℃ <br />`
        }
        if (params[i].componentSubType === 'scatter') {
          const name = params[i].seriesIndex === 1 ? '历史理论xxx:' : '历史实际xxx:'
          text = `${params[i].marker}${name}${params[i].value[1]} ℃ <br />`
        }
        tip += text
      }
      // console.log(tip,'--tip--');
      return `${title}${tip}`
    },
  },

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

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

相关文章

【用unity实现100个游戏之17】从零开始制作一个类幸存者肉鸽(Roguelike)游戏3(附项目源码)

文章目录 本节最终效果前言近战武器控制近战武器生成升级增加武器伤害和数量查找离主角最近的敌人子弹预制体生成子弹发射子弹参考源码完结 本节最终效果 前言 本节紧跟着上一篇&#xff0c;主要实现武器功能。 近战武器 新增Bullet&#xff0c;子弹脚本 public class Bull…

医疗器械企业升级路:直连客户盘活存量,布局出海寻求增量

随着随着医疗各领域VBP&#xff08;带量采购&#xff09;的稳步推进以及医疗机构DRG/DIP&#xff08;按疾病诊断相关分组/病种分值支付&#xff09;的深化应用&#xff0c;降本增效和精细化管理已经成为医院管理者的头等大事。 这也在倒逼医疗器械厂商提升管理水平和营销效率。…

Springboot的excel导出

这里导出excel用到的是 阿里巴巴的easyexcel 1、首先导入依赖 <!--alibaba easyexcel--><dependency><groupId>com.alibaba</groupId><artifactId>easyexcel</artifactId><version>2.1.6</version> </dependency> 2、…

IWDG和WWDG HAL库+cubeMX

一.IWDG 1.原理 启用IWDG后&#xff0c;LSI时钟会自动开启 2.IWDG溢出时间计算 3.IWDG配置步骤 4.HAL库相关函数介绍 HAL_IWDG_Init //使能IWDG&#xff0c;设置预分频系数和重装载值等 HAL_IWDG_Refresh //把重装载寄存器的值重载到计数器中&#xff0c;喂狗typedef str…

解决苹果手机iphone手机强制重启

强制关机&#xff1a; 方法1.同时按住左侧的&#xff0c;- 键中的一个和右侧的电源键 方法2.点击桌面的悬浮键–设备–更多–重新启动

华住三季报:韧性增长超预期,夯实可持续发展底座

美股研究社获悉&#xff0c;2023年11月27日&#xff0c;华住集团2023年第三季度业绩发布会在线上举行。受华住三季度财报向好表现&#xff0c;多家证券公司给予买入评级。中信证券认为&#xff0c;本季度华住集团国内外RevPAR修复优于前期指引上限、净开店数优于预期。且华住集…

JAVA面向对象三大特征

1.面向对象的三大特征包括封装、继承和多态。 封装&#xff1a;封装是指将数据和操作数据的方法绑定起来&#xff0c;外界对数据的访问只能通过已定义的接口。这种特性有两层含义&#xff0c;一层是将属性和行为看成一个密不可分的整体&#xff0c;将这两者封装在一个对象中&a…

【虚拟机】Docker基础 【一】

1.1.部署MySQL 首先&#xff0c;我们利用Docker来安装一个MySQL软件&#xff0c;大家可以对比一下之前传统的安装方式&#xff0c;看看哪个效率更高一些。 如果是利用传统方式部署MySQL&#xff0c;大概的步骤有&#xff1a; 搜索并下载MySQL安装包上传至Linux环境编译和配置…

c++|类与对象(中)

目录 一、类的6个默认成员函数 二、构造函数 2.1概念 2.2七大特性 三、析构函数 3.1概念 3.2特性 四、拷贝构造函数 4.1概念 4.2特性 五、赋值运算符重载 5.1运算符重载 5.2赋值运算符重载 5.3前置和后置重载 六、const成员函数 七、取地址及const取地址操作符重…

AI 学习笔记(持续更新)

What is AI PS &#xff1a;代码块里的统一是 gpt4 回复 在大模型中 1 b 10 亿参数的含义 AI 目前是什么&#xff1f; 目前的人工智能&#xff08;AI&#xff09;是指使计算机和机器能够模仿人类智能的技术&#xff0c;包括学习、推理、解决问题、知觉、语言理解等能力。A…

每日一练2023.11.28——A-B【PTA】

题目链接&#xff1a;L1-011 A-B 题目要求&#xff1a; 本题要求你计算A−B。不过麻烦的是&#xff0c;A和B都是字符串 —— 即从字符串A中把字符串B所包含的字符全删掉&#xff0c;剩下的字符组成的就是字符串A−B。 输入格式&#xff1a; 输入在2行中先后给出字符串A和B…

基于Spring Boot的疫苗接种系统-计算机毕设 附源码 32315

基于Spring Boot的疫苗接种系统 摘 要 预防预接种工作实行网络信息化管理&#xff0c;是我国免疫规划工作发展的需要。接种信息实行网络信息化不仅是预防接种工作步入了一个新的台阶&#xff0c;更重要的是解决了多年疫苗接种过程种&#xff0c;免疫接种剂次不清&#xff0c;难…

接手了一个外包开发的项目,我感觉我的头快要裂开了~

嗨&#xff0c;大家好&#xff0c;我是飘渺。 最近&#xff0c;我和小伙伴一起接手了一个由外包团队开发的微服务项目&#xff0c;这个项目采用了当前流行的Spring Cloud Alibaba微服务架构&#xff0c;并且是基于一个“大名鼎鼎”的微服务开源脚手架&#xff08;附带着模块代…

JAVA基础进阶(一)

一、什么是继承 把相同的属性和行为抽离出来放到父类&#xff0c;再让子类使用extends关键字继承父类后&#xff0c;就可以直接使用父类公共的属性和方法了&#xff0c;提高了代码的复用性可以降低重复代码的书写。 子类既有自己类的属性和行为&#xff0c;也有父类的属性和行…

两个mongo表,A和B,以A中的_id记录的为准, 删掉B表中A表中没有的记录

可以使用 MongoDB 的聚合管道和 $lookup 操作符来实现这个需求。以下是一个示例的查询语句,假设集合 A 和集合 B 分别对应表 A 和表 B: db.B.aggregate([{$lookup: {from: "A",localField: "_id",foreignField:

双十二有什么好物是值得推荐?智能家居好物推荐

都知十一月份跟十二月份都有两个大促的时间&#xff0c;那就是双十一跟双十二&#xff0c;距离双十一过去已经半个月了&#xff0c;是不是还有很多朋友在双十一的时候也没有买尽兴&#xff0c;别慌&#xff01;错过了双十一咱还有双十二&#xff0c;双十二的优惠力度也不会低于…

Day44力扣打卡

打卡记录 给小朋友们分糖果 II&#xff08;容斥原理 隔板法&#xff09; 链接 def c2(n):return n * (n - 1) // 2 if n > 1 else 0class Solution:def distributeCandies(self, n: int, limit: int) -> int:return c2(n 2) - 3 * c2(n - limit 1) 3 * c2(n - 2 * …

Git 是一种分布式版本控制系统常用指令

Git 是一种分布式版本控制系统&#xff0c;用于跟踪文件的变化并协同多人在同一个项目中进行开发。以下是一些常用的 Git 指令和它们的使用介绍&#xff1a; 1. 初始化一个新仓库 git init 用途&#xff1a;在当前目录初始化一个新的 Git 仓库。使用&#xff1a;在项目根目录执…

Istio新架构揭秘:环境化Mesh

自问世以来&#xff0c;Istio因其使用Sidecar&#xff08;可编程代理与应用容器一同部署&#xff09;而备受认可。这种架构选择使Istio用户能够享受其好处&#xff0c;而无需对其应用进行 drast 改变。这些可编程代理&#xff0c;与应用容器紧密部署在一起&#xff0c;因其能够…

进入最后倒计时!就在深圳福田明天上午9点正式开幕!不容错过!

会展中心介绍 深圳会展中心交通快捷便利&#xff0c;南邻滨河快速干道&#xff0c;与口岸、港口及高速公路相连&#xff0c;驾车驱往深圳火车站仅需15分钟、深圳机场仅需30分钟。地铁1号、4号线在会展中心站接驳&#xff0c;通过市政地下通道可从馆内直达地铁站&#xff0c;仅需…