前端-echarts tooltip展示多项自定义数据

news2024/11/18 10:47:49

效果如图,鼠标滑动到某一个柱子的时候,出现这一项数据的多个自定义数据,外加自己的模板样式渲染。

希望能展示每一列中的多个自定义数据

代码部分

主要是在data中,value就是实际展示的主数据,其他字段名为自定义的数据。

option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      crossStyle: {
        color: '#999'
      }
    },
    formatter: function(params) {
              // params 是一个数组,包含了每个数据项的信息
              var result = `<div style="width: 402px;font-family: PingFang SC, PingFang SC-Regular;backdrop-filter: blur(20px);">
                <div class="top" style="margin-top:14px;margin-left:20px">
                  <div class="tl" style="width: 50px;font-size: 18px;margin-bottom: 4px;margin-right: 200px;">里程:${params[0].data.b}(km)</div>
                  <div class="tr" style="width: 50px;font-size: 18px;margin-bottom: 4px;">速度:${params[0].data.a}(km/h)</div>
                  <div class="tr" style="width: 50px;font-size: 18px;margin-bottom: 4px;">速度:${params[0].data.value}(km/h)</div>
                </div>
              </div>`;
              return result;
            },
  },
  toolbox: {
    feature: {
      dataView: { show: true, readOnly: false },
      magicType: { show: true, type: ['line', 'bar'] },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
  legend: {
    data: ['Precipitation', 'Temperature']
  },
  xAxis: [
    {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      axisPointer: {
        type: 'shadow'
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: 'Precipitation',
      min: 0,
      max: 250,
      interval: 50,
      axisLabel: {
        formatter: '{value} ml'
      }
    },
  ],
  series: [
    {
      name: 'Precipitation',
      type: 'bar',
      tooltip: {
        valueFormatter: function (value) {
          return value + ' ml';
        }
      },
      data: [
      {value:44, a:2, b:3},{value:33, a:2, b:3},{value:22, a:2, b:3},{value:66, a:2, b:3},{value:23, a:2, b:3},{value:23, a:2, b:3},{value:23, a:2, b:3}
      ],
    },
  ]
};

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

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

相关文章

【小白学Python】AI生成图片(四)

【小白学Python】自定义图片的生成&#xff08;一&#xff09; 【小白学Python】自定义图片的生成&#xff08;二&#xff09; 【小白学Python】爬取数据&#xff08;三&#xff09; 目录 ai文生图接口的获取python中调用ai接口图片拼接先将图片缩放拼接图片 文字背景图代码效…

怎么压缩pdf文件大小,如何压缩pdf文件大小

pdf文件怎么压缩&#xff1f;在当下这个信息爆炸的时代&#xff0c;无论是在工作场所还是校园中&#xff0c;我们经常会面临需要处理大文件的情况&#xff0c;而PDF格式作为一种保留文档结构和布局完整性的理想选择&#xff0c;有时候pdf文件太大&#xff0c;因此&#xff0c;对…

汽车汽配图纸管理、产品研发管理解决方案

汽车汽配图纸管理、产品研发管理解决方案 随着全球汽车市场的快速发展&#xff0c;中国汽车汽配行业迎来了前所未有的发展机遇。然而&#xff0c;在这一过程中&#xff0c;企业也面临着诸多挑战&#xff0c;如研发能力的提升、技术资料管理的复杂性、以及跨部门协作的困难等。为…

ubuntu22.04速装中文输入法

附送ubuntu安装chrome wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb sudo dpkg -i google-chrome-stable_current_amd64.deb

动画重定向——当给一个人物模型用别人物的动画时,会遇到人物与动画不匹配问题,怎么解决呢?

每日一句&#xff1a;实践出真知&#xff0c;试错方确信 目录 最开始我想的原因&#xff01; 分析一下动画相关参数 Animator组件参数详解&#xff1a; 人物模型的导入设置参数&#xff1a; Skinned Mesh Renderer组件详解: Skinned Mesh Renderer工作原理 设置Skinned …

【STM32CubeIDE】硬件IIC+AHT20使用

前言 本文主要介绍STM32CubeIDE配置硬件IIC驱动AHT20模块&#xff0c;实现温湿度读取并用串口打印显示在上位机&#xff1b; 软件平台&#xff1a;STM32CubeIDEHAL库 硬件环境&#xff1a;STM32F103ZET6(正点原子战舰V3)AHT20模块 目录 前言AHT20简介软件程序CubeIDE设置AHT2…

ChatGPT/AI助力学术写作-辅助翻译及润色

Nature期刊中的Career column专栏在4月份的时候发表了关于Chatgpt帮助学术写作的几点建议。 一、Three ways ChatGPR helps me in my academic writing 1、优化学术写作 不管使用哪一种AI工具&#xff0c;精确清晰的指令可以帮助使用者得到更好的反馈。例如&#xff1a;I’m w…

【LINUX】内核源码文件系统调用相关摸索

首先&#xff0c;先看看想测试那个系统调用&#xff0c;在应用层&#xff0c;如果使用C语言编程一般我们一来就是open函数&#xff0c;实际在测试的时候&#xff0c;直接用touch xxx.txt然后 echo "xxx" >> xxx.txt&#xff0c;这样就完成了文件创建和写文件的…

MemManage_Handler 问题的解决思路

1、问题 在做一个安全类项目时发现&#xff0c;软件在运行一段时间后会进入"MemManage_Handler",遂开始了一系列查找。 2、解决 &#xff08;1&#xff09;查看堆栈数据 查堆栈的数据&#xff0c;发现堆栈也被破坏了&#xff0c;看不出来是执行哪个任务执行导致的…

零基础想学编程,选择哪一门语言更好就业?(非常详细)零基础入门到精通,收藏这一篇就够了_c#就业方向

编程语言的用途广泛&#xff0c;它们各自在不同的领域和应用场景中发挥着重要作用。 零基础初学者在选择编程语言时&#xff0c;可以从就业方向入手选择。 【一一帮助安全学习&#xff0c;所有资源获取处一一】 ①网络安全学习路线 ②20份渗透测试电子书 ③安全攻防357页笔记 …

基于Java微信小程序同城家政服务系统设计和实现(源码+LW+调试文档+讲解等)

&#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN作者、博客专家、全栈领域优质创作者&#xff0c;博客之星、平台优质作者、专注于Java、小程序技术领域和毕业项目实战✌&#x1f497; &#x1f31f;文末获取源码数据库&#x1f31f;感兴趣的可以先收藏起来&#xff0c;还…

为什么每一名程序员都应该学习 C++?

掌握 C 可不容易&#xff0c;但一旦你掌握了&#xff0c;就会获得丰厚的回报。 通常&#xff0c;程序员在他们的编程生涯中会使用多种编程语言。然而&#xff0c;我们也看到&#xff0c;有些程序员一直在使用同一种编程语言。例如&#xff0c;我们经常遇到有几十年经验的 Java…

day50---数据结构与算法(五)

四. 高级数据结构与算法设计 4.1 图 1) 概念 图是由顶点&#xff08;vertex&#xff09;和边&#xff08;edge&#xff09;组成的数据结构&#xff0c;例如 #mermaid-svg-bv3SYpkStIeixcO2 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;…

从灵感到成品:使用AI生成博客文章的完整指南

在信息爆炸的时代&#xff0c;每个人都有讲述自己故事的权利和需求。博客作为一种表达方式&#xff0c;不仅能记录个人经历&#xff0c;还能分享知识和观点。然而&#xff0c;许多人在写博客文章时&#xff0c;常常会遇到灵感枯竭、时间不够用或者不知道如何开始等问题。幸运的…

还不到6个月,GPTs黄了

相比起来&#xff0c;人们还不如使用一个足够强大、灵活且通用的AI助手来满足各类复杂需求。更严重的是一些独立GPTs显露出的安全隐患。除此之外&#xff0c;最大的问题在于OpenAI模糊不清的货币化政策。 文章正文 上周&#xff0c;不少人发现微软官网忽然更新了一条“GPT Bu…

星戈瑞Cy5.5 NHS Ester近红外荧光染料2375105-86-3

【星戈瑞stargraydye】以下数据均来自文献资料,星戈瑞暂未进行独立验证, 仅供参考&#xff01; 在生物医学成像领域&#xff0c;荧光染料的应用逐渐增多。Cy5.5 NHS Ester作为其中的一种&#xff0c;凭借其光学性质和稳定的化学结构&#xff0c;在生物成像、药物追踪以及生物分…

浏览器扩展V3开发系列之 chrome.storage 的用法和案例

【作者主页】&#xff1a;小鱼神1024 【擅长领域】&#xff1a;JS逆向、小程序逆向、AST还原、验证码突防、Python开发、浏览器插件开发、React前端开发、NestJS后端开发等等 chrome.storage 是用于存储、获取用户数据的 API。当我们需要持久化存储数据时&#xff0c;比如&…

Ubuntu 20.04安装中文输入法出错:gnome-user-docs-zh-hans安装失败

问题&#xff1a;Ubuntu20.04安装中文输入法出错&#xff1a;gnome-user-docs-zh-hans安装失败 现象&#xff1a; 打开language Support页面的时候&#xff0c;提示install依赖的文件 这个过程中会弹窗提示: The following packages have unmet dependencies:gnome-user-doc…

全网最全的国外心理学资源导航站

想学心理学不知道去哪儿看权威的内容&#xff1f; 中文搜索心理学广告多&#xff1f; Kuakua | 发现心理学网站&#xff0c;应用程序和AI工具https://kuakua.app/explore 从心理学AI工具&#xff08;国内外&#xff09;到心理学专业院校、心理学期刊论文、心理学线上课程、心…

论文影响因子

谷歌搜索 谷歌一般只能看到期刊或者会议名字 搜索内容 官方评级网站 LetPub