Echarts图表如何利用formatter自定义tooltip的内容和样式

news2025/2/25 11:25:40

在展示多数据图表的时候 有的时候需要图例也展示出一些内容来,例如官方这样子:鼠标悬停的时候展示该点数据

但是,官方提供的样式有时不适用所有的开发场景

我的项目需要实现鼠标悬停在某一点的时候,只展示该条线的数据,以及一些图表中未表现的数据。参照原型图,除了横轴和纵轴表示的时间和成功率之外,希望额外展示另两种数据,并且小圆点要和线的颜色相同

tooltipformatter:用来格式化图例文本,支持字符串模板和回调函数两种形式。
此处主要利用回调函数的形式去实现。具体写法请参照ECharts官网。

myChart.setOption({
  tooltip: {
    trigger: 'item', // axis显示该列下所有坐标轴对应数据,item只显示该点数据
    axisPointer: { // 坐标轴指示器,坐标轴触发有效
      type: 'line' // 默认为直线,可选为:'line' | 'shadow'
    },
    formatter: function(params) {
      var res = `
        <div>
          <div
            style='display: inline-block;
            width:  10px;
            height: 20px;
            color: ${params.color}'
            >●</div>
          <span>${'时间:2023-03-01 16:57:07'}</span>
        </div>
        <div>
          <div
            style='display: inline-block;
            width: 10px;
            height: 20px;
            color: ${params.color}'
          >●</div>
          <span>${'成功率:10.00%'}</span>
        </div>
        <div>
          <div
            style='display: inline-block;
            width: 10px;
            height: 20px;
            color: ${params.color}'
          >●</div>
          <span>${'订单总数量:0'}</span>
        </div>
        <div>
          <div
            style='display: inline-block;
            width: 10px;
            height: 20px;
            color: ${params.color}'
          >●</div>
          <span>${'订单成功数量:0'}</span>
        </div>
      `
      return params.name + res
    }
  },
  legend: {
    data: ['aaa', 'bbb', 'ccc', 'ddd', 'eee', 'fff'] // 顶部图例的名字
  },
  grid: { // 图例的位置
    top: 80,
    left: '4.2%',
    right: '5%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [{
    type: 'category',
    splitLine: { show: false },
    boundaryGap: false,
    data: [67,43,78,12,34,32], // X轴
    axisTick: {
      alignWithLabel: true
    },
    axisLabel: {
      interval: 1
    }
  }],
  yAxis: [{
    type: 'value',
    axisLabel: {
      formatter: '{value} %'
    },
    name: '成功率',
    // 此处是固定Y轴的刻度以及刻度间距,没有的话则会根据数据自行展示
    max: 100, // 设置最大值
    min: 0, // 设置最小值
    interval: 10 // 设置刻度间距
  }],
  series: [10,20,30,40,50,60] // Y轴
})

 效果图如下

 

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

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

相关文章

【python】进阶--->MySQL数据库(三)

一、修改列的类型长度及约束 alter table 表名 modify 列名 类型(长度) [约束];修改列名 : alter table 表名 change 旧列名 新列名 类型(长度) [约束];二、数据查询语言 查询表中所有的数据 : select * from 表名; 查询表中部分列数据 : select 列名1, 列名2 from 表名;1. …

长亭科技-雷池WAF的安装与使用

目录 1、安装雷池 2、登录雷池 3、简单配置 4、防护测试 5、其他补充 1、安装雷池 在Linux系统上执行如下命令 &#xff08;需要docker环境&#xff0c;提前把docker、docker-compose 装好&#xff09; bash -c "$(curl -fsSLk https://waf-ce.chaitin.cn/release…

MySQL8.0安装(Linux - centos)

我是南城余&#xff01;阿里云开发者平台专家博士证书获得者&#xff01; 欢迎关注我的博客&#xff01;一同成长&#xff01; 一名从事运维开发的worker&#xff0c;记录分享学习。 专注于AI&#xff0c;运维开发&#xff0c;windows Linux 系统领域的分享&#xff01; 其他…

企业异地访问办公系统:对比运营商MPLS专线,内网穿透有何优势?

为了实现连锁门店、企业内部各地分支机构ERP、OA、远程监控、自建邮件服务器、智能网络设备等数据传输、互访&#xff0c;使用运营商专线或是采用内网穿透方案&#xff0c;彼此之间究竟有何区别呢&#xff1f; 简单来说&#xff0c;MPLS专线和普通宽带类似是运营商提供的网络租…

【GitHub项目推荐--国外大神复刻暗黑2】【转载】

《暗黑破坏神2》&#xff0c;由顶尖游戏公司暴雪研发&#xff0c;2000 年上市&#xff0c;其资料片 2001 年上市&#xff0c;2D 画面。相信这款游戏已经成为很多人的回忆了&#xff0c;不知道当时是不是也和我一样沉迷于收集套装呢&#xff1f; 这款游戏的剧情设计、画面感都令…

js关闭当前窗口报错Scripts may close only the windows that were opened by them

文章目录 一、问题二、原因三、解决四、最后 一、问题 在Chrome浏览器中调用window.close()关闭当前页面时浏览器控制台报出 Scripts may close only the windows that were opened by them. 且无法关闭当前页面。 先上结论&#xff1a;不是通过JS打开的浏览器标签&#xff0c…

HTML--CSS--边框、列表、表格样式

边框样式 属性&#xff1a; border-width 边框宽度 border-style 边框外观 border-color 边框颜色 需要同时设定三个属性 border-width 边框宽度 取值为像素值 border-style 边框样式 none 无样式 dashed 虚线 solid 实线 border-color 边框颜色 如示例&#xff1a; 为div设…

知识点整理[(GraphGeo)RELATED WORK]

2 RELATED WORK 2.1 IP Geolocation 问题一:IP定位预测方法之一:Data mining-based methods 回答: 依赖于在公开的资源中挖掘位置线索来对目标IP(target IP)进行地理定位。其中一些数据分析了来自与IP相关的数据库,如WHOIS数据库和DNS的数据。 (1)例如,Moore等…

如何简单的使用文心一言(高级版)(中国版ChatGPT)

文心一言API高级版使用 一、百度文心一言API(高级版)二、使用步骤1、接口2、请求参数3、请求参数示例4、接口 返回示例5、智能生成API代码 三、 如何获取appKey和uid1、申请appKey:2、获取appKey和uid 四、重要说明 一、百度文心一言API(高级版) 基于百度文心一言语言大模型的…

NLP论文阅读记录 - WOS | 2022 使用语言特征空间的抽象文本摘要的神经注意模型

文章目录 前言0、论文摘要一、Introduction1.1目标问题1.2相关的尝试1.3本文贡献 二.相关工作三.本文方法3.1 总结为两阶段学习3.1.1 基础系统 3.2 重构文本摘要 四 实验效果4.1数据集4.2 对比模型4.3实施细节4.4评估指标4.5 实验结果4.6 细粒度分析 五 总结思考 前言 Neural A…

SMART PLC绝对值定位往复运动控制(脉冲绝对定位+状态机编程)

三菱FX3GA系列绝对定位指令DDRVA实现往复运动控制详细内容介绍请参考下面文章链接&#xff1a; https://rxxw-control.blog.csdn.net/article/details/135570157https://rxxw-control.blog.csdn.net/article/details/135570157这篇博客我们介绍SMART PLC里如何开启绝对值定位指…

前缀和模板题 P8218 【深进1.例1】求区间和

一道前缀和的模板题 #include<bits/stdc.h> using namespace std; using ll long long; const int N 1e5 10; ll a[N],prefix[N]; int main(){ios::sync_with_stdio(0),cin.tie(0),cout.tie(0);int n,m;cin >> n;for(int i 1; i < n; i) cin >> a[i]…

这可能是最全面的Java集合面试八股文了

内容摘自我的学习网站&#xff1a;topjavaer.cn 常见的集合有哪些&#xff1f; Java集合类主要由两个接口Collection和Map派生出来的&#xff0c;Collection有三个子接口&#xff1a;List、Set、Queue。 Java集合框架图如下&#xff1a; List代表了有序可重复集合&#xff0c…

yum来安装php727

yum 安装php727,一键安装&#xff0c;都是安装在系统的默认位置&#xff0c;方便快捷 先确定linux平台中centos的版本信息&#xff0c;一下内容针对el7 查看linux版本 &#xff1a; cat /etc/redhat-release 查看内核版本命令&#xff1a; cat /proc/version (0)如果有安装好…

RocketMQ源码阅读-Broker消息接收

RocketMQ源码阅读-Broker消息接收 1. 从单元测试入手2. Broker启动流程3. Broker接收消息4. Broker接收消息时序图5. 小结 Broker接收 Producer发送的消息。 Broker在RocketMQ中也是一个独立的Model&#xff0c;rocketmq-broker。 Broker的核心类为SendMessageProcessor。 …

vue项目之.env文件.env.dev、test、pro

.env文件是vue运行项目时的环境配置文件。 .env: 全局默认配置文件&#xff0c;所有环境(开发、测试、生产等&#xff09;均会加载并合并该文件 .env.development(开发环境默认命名) 开发环境的配置&#xff0c;文件名默认为.env.development,如果需要改名也是可以的&#xf…

[小程序]定位功能实现

第一步:首先要认识三个小程序的 api wx.chooseLocation 和 wx.getLocation 和 wx.openLocation (1).wx.chooseLocation 用于在小程序中选择地理位置。当用户点击选择位置按钮时&#xff0c;小程序会调起地图选择界面&#xff0c;用户可以在地图上选择一个位置&#xff0c;并可以…

openfeign服务启动成功但是注册不上nacos? 我看看怎么个事儿!

spring-cloud-starter-alibaba-nacos-discovery和spring-boot-starter-web不得不说的秘密 ! 直接上答案: 给你的服务加上springbootweb依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifa…

C语言程序设计——程序流程控制方法(二)

循环结构 while语句 while(表达式){代码块; }do{代码块; }while(表达式)while语句分为do-while和while两种&#xff0c;区别在于循环之前是不是先执行一次循环的内容&#xff0c;可以类似于i和i的关系&#xff0c;本质上来讲是相同的。当表达式为真时&#xff0c;则会执行一次…

Python二级:二叉树问题求解

一、题源 在Python二级考试中前10道基础题是必考题&#xff0c;虽然没有什么卵用&#xff0c;但是你得分不达标&#xff0c;还不让你过&#xff0c;没有办法只好硬着头皮去刷题了。这10道题中有一个二叉树题比较难&#xff0c;现摘录如下&#xff0c;同时给出gpt-4的解答&…