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

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

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

代码部分

主要是在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.mfbz.cn/a/745349.html

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

相关文章

Matlab进阶绘图第61期—滑珠散点图

滑珠散点图也是一种在《Nature》中常见的数据图。 其功能类似于柱状图&#xff0c;但更加简洁易读。 由于Matlab中没有现成的函数绘制滑珠散点图&#xff0c;因此需要大家自行解决。 本文利用自己制作的BubbleScatter工具&#xff0c;进行滑珠散点图的绘制&#xff0c;先来看…

等保测评初级简答题试题

基本要求&#xff0c;在应用安全层面的访问控制要求中&#xff0c;三级系统较二级系统增加的措施有哪些&#xff1f; 答&#xff1a;三级比二级增加的要求项有&#xff1a; 应提供对重要信息资源设置敏感标记的功能&#xff1b; 应按照安全策略严格控制用户对有敏感标记重要…

贝壳找房基于Flink+Paimon进行全量数据实时分组排序的实践

摘要&#xff1a;本文投稿自贝壳家装数仓团队&#xff0c;在结合家装业务场景下所探索出的一种基于 FlinkPaimon 的排序方案。这种方案可以在实时环境对全量数据进行准确的分组排序&#xff0c;同时减少对内存资源的消耗。在这一方案中&#xff0c;引入了“事件时间分段”的概念…

上涨至13.6分!当之无愧的顶级期刊,影响因子“狂飙”,门槛较低,2个月可录!

本期解析 1、2024年6月20日&#xff0c;科睿唯安正式公布2024年度《期刊引证报告》。 2、本次主要解析Elsevier旗下一本TOP顶刊&#xff0c;期刊表现优秀&#xff0c;在最新的影响因子更新中由12.8上涨至13.6&#xff0c;是一本妥妥评职高分宝刊&#xff01;接下来看看它是否…

Stable Diffusion【真人模型】:人像光影摄影极限写实真实感大模型

大家好&#xff0c;我是极客菌 今天和大家分享一个基于SD1.5的真人大模型&#xff1a;人像光影摄影极限写实真实感大模型。 该模型具有以下特点&#xff1a; 真实肤感&#xff08;在面部肌理和皮肤肌理上均有加强学习&#xff0c;拒绝ai出图假的问题&#xff09; 永不脱妆&a…

经典老动画电影大全,老动画片大全集全部百度网盘,资源下载百度云

当今社会越来越重视学前教育了&#xff0c;今儿童启蒙的教育也越来越受人们的关注和重视。为了满足社会对未来人才的需要&#xff0c;学前教育成为当今教育领域重要角色的一环。当今动画篇是主流&#xff0c;内容精彩纷呈&#xff0c;越来越受到儿童的喜爱。 儿童的语言敏感期&…

ee trade:黄金投资是选择短线交易还是长线投资

黄金投资既可以通过短线交易获取快速收益&#xff0c;也可以采取长线投资策略获得稳健回报。本文将详细比较这两种策略的特点和适用性&#xff0c;为新手投资者提供参考。 短线交易 短线交易指在较短的时间内多次买卖以获取利润&#xff0c;通常交易周期为数日到数周。以下是…

PointCloudLib-KDtree-如何使用 KdTree 进行搜索

在本教程中,我们将介绍如何使用 KdTree 查找特定点或位置的 K 个最近邻,然后我们还将介绍如何查找用户指定的某个半径内的所有邻居(在本例中为随机)。 理论入门 k-d 树或 k 维树是计算机科学中使用的一种数据结构,用于在具有 k 维的空间中组织一定数量的点。它是一个二叉…

用热传感器提高散热片的效率

每天一篇行业发展资讯&#xff0c;让大家更及时了解外面的世界。 更多资讯&#xff0c;请关注B站/公众号【莱歌数字】&#xff0c;有视频教程~~ 散热器的尺寸通常是根据功率、气流、设备热约束和物理几何形状的要求进行冷却应用的。 更大的功耗需要更高性能的散热器或更大、…

记录一个Xshell使用中Xmanager...X11转发的提示问题

希望文章能给到你启发和灵感&#xff5e; 如果觉得有帮助的话&#xff0c;点赞关注收藏支持一下博主哦&#xff5e; 阅读指南 一、环境说明1.1 硬件环境1.2 软件环境 二、问题和错误三、解决四、理解和延伸一下 一、环境说明 考虑环境因素&#xff0c;大家适当的对比自己的软硬…

DBdoctor功能介绍

绍DBdoctor的主要功能&#xff0c;按照事件先后涵盖了事前、事中、事后三个阶段。事前的主动问题发现、SQL性能评估、自动巡检与报表、空间预测与诊断&#xff1b;事中的性能洞察、根因诊断、锁分析、优化建议&#xff1b;事后的审计分析、根因推导、问题快照。按照使用者包含了…

手持小风扇品牌有哪些?分享口碑最好的五款手持小风扇

手持小风扇在炎热的夏季成为了许多人解暑的好帮手。它们不仅轻便便携&#xff0c;随时随地都能为我们带来清凉和舒适。然而&#xff0c;市场上手持小风扇的品牌繁多&#xff0c;让人眼花缭乱。为了帮助大家做出更明智的选择&#xff0c;接下来我们将分享口碑最好的五款手持小风…

RAG | (ACL24规划-检索增强)PlanRAG:一种用于生成大型语言模型作为决策者的规划检索增强生成方法

原文&#xff1a;PlanRAG: A Plan-then-Retrieval Augmented Generation for Generative Large Language Models as Decision Makers 地址&#xff1a;https://arxiv.org/abs/2406.12430 代码&#xff1a;https://github.com/myeon9h/PlanRAG 出版&#xff1a;ACL 24 机构: 韩国…

MQTT自动回复消息工具

点击下载《MQTT自动回复消息工具V1.0.0》 1. 前言 在进行IoT系统开发时&#xff0c;各个小组成员通常是同步进行项目开发&#xff0c;经常会遇到设备端和前后端开发人员开发进度不协调的情况&#xff0c;此时接口还没开发完&#xff0c;也没有可以调试的环境&#xff0c;只能…

Vue - HTML基础学习

一、元素及属性 1.元素 <p>我是一级标题</p>2.嵌套元素 把元素放到其他元素之中——这被称作嵌套。 <p>我是<strong>一级</strong>标题</p>3.块级元素 块级元素在页面中以块的形式展现&#xff0c;会换行&#xff0c;可嵌套内联元素。 …

RAID详解及配置实战

目录 一、RAID磁盘阵列及详解 1.1 了解RAID 1.1.1 简单理解 1.1.2 对比了解 1.2 RAID磁盘阵列介绍 1.3 RAID功能实现 1.4 RAID实现的方式 1.5 RAID级别详解 1.5.1 RAID -0 1.5.2 RAID -1 1.5.3 RAID -5 1.5.4 RAID -10&#xff08;RAID 10&#xff09; 1.6 阵列卡…

基于Java微信小程序校园自助打印系统设计和实现(源码+LW+调试文档+讲解等)

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

《Windows API每日一练》6.2 客户区鼠标消息

第五章已经讲到&#xff0c;Windows只会把键盘消息发送到当前具有输入焦点的窗口。鼠标消息则不同&#xff1a;当鼠标经过窗口或在窗口内被单击&#xff0c;则即使该窗口是非活动窗口或不带输入焦点&#xff0c; 窗口过程还是会收到鼠标消息。Windows定义了 21种鼠标消息。不过…

股掌柜:解读全球行情,实时资讯满足全方位投资需求

近年来&#xff0c;随着信息技术的飞速发展&#xff0c;金融交易也逐渐向极速化的方向发展。极速交易成为了投资者们追求高效、稳定、及时的首选。在全球行情实时变动的背景下&#xff0c;了解市场动态和全球资讯成为了投资者们最为看重的需求。只有及时把握市场脉搏&#xff0…

Snipaste--一款截屏神奇分享,桌面置顶显示截图

桌面置顶显示截图! 桌面置顶显示截图! 桌面置顶显示截图! 官网&#xff1a; https://zh.snipaste.com/ 介绍&#xff1a;Snipaste 是一个简单但强大的截图工具&#xff0c;也可以让你将截图贴回到屏幕上&#xff01;下载并打开 Snipaste&#xff0c;按下 F1 来开始截图&#xf…