前端-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.rhkb.cn/news/362500.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于springboot时装购物系统

设计技术&#xff1a; 开发语言&#xff1a;Java数据库&#xff1a;MySQL技术&#xff1a;SpringbootMybatisvue 工具&#xff1a;IDEA、Maven、Navicat 主要功能&#xff1a; 管理员&#xff1a;首页、个人中心、用户管理、商品分类管理、颜色管理、商品信息管理、商品评价…

Swift开发——简单App设计

App的界面设计需要具有大量的图像并花费大量的时间,这样的应用不方便学习和交流,这里重点介绍SwiftUI界面元素的用法,通过简单App设计过程的讲解,展示图形用户界面应用程序的设计方法。 01、简单App设计 按照9.1节工程MyCh0901的创建方法,创建一个新的工程MyCh0902,此时工…

【Unity | Editor强化工具】项目备忘录工具

经常会被美术和策划同事反复询问某几个问题&#xff0c;每次都要翻Wiki链接给他们&#xff0c;非常折磨人&#xff0c;所以做了个可以在Unity内部显示备忘录的小工具&#xff0c;能够减少一些查找成本&#xff08;另外我觉得&#xff0c;让他们养成查看Unity内触手可及的信息的…

用MySQL和navicatpremium做一个项目—(财务管理系统)。

1 ER图缩小的话怕你们看不清&#xff0c;所以截了两张图 2 vsdx绘图结果 3DDL和DML,都有点长分了好多次上传&#xff0c;慢慢看 DDL -- 用户表 CREATE TABLE users (user_id INT AUTO_INCREMENT PRIMARY KEY COMMENT 用户ID,username VARCHAR(50) NOT NULL UNIQUE COMMENT 用…

【stm32-新建工程-HAL库版本】

stm32-新建工程-HAL库版本 ■ 1. 下载STM32Cube官方固件包&#xff08;F1/F4/F7/H7&#xff09;■ 2. 新建HAL库版本MDK工程所需的文件夹■ 2.1 新建工程文件- XXX项目并在下面新建如下文件夹■ 2.2 向Drivers文件添加如下文件■ 2.3 向Mrddlewares文件添加文件■ 2.4 设置Outp…

YouCompleteMe插件安装方法简述

一、前言 YouCompleteMe是VIM中进行C/C 开发的重要工具&#xff0c;可以极大提升linux下C/C开发效率。 YCM需要高版本的gcc (8.0以上版本&#xff0c;支持C17) 和 vim&#xff08;8.0以上&#xff0c;支持python3.6以上&#xff09; 二、编译gcc_8.3 1. 获取源码 wget https:…

重磅消息:ONLYOFFICE8.1版本桌面编辑器发布:功能完善的 PDF 编辑器、幻灯片版式、改进从右至左显示、新的本地化选项等

目录 ONLYOFFICE介绍 PDF 编辑器 功能全面的 PDF 编辑器 文本编辑 页面处理 &#xff08;添加、旋转、删除&#xff09; 插入和调整各种对象&#xff0c;例如表格、形状、文本框、图像、TextArt、超链接、方程等。 此外 PDF 表单 文本文档编辑器更新内容 页面颜色 页面…

浅析Resource Quota中limits计算机制

前言 在生产环境中&#xff0c;通常需要通过配置资源配额&#xff08;Resource Quota&#xff09;来限制一个命名空间&#xff08;namespace&#xff09;能使用的资源量。在资源紧张的情况下&#xff0c;常常需要调整工作负载&#xff08;workload&#xff09;的请求值&#xf…

pytorch十大核心操作

PyTorch的十大核心操作涵盖了张量创建、数据转换、操作变换等多个方面。以下是结合参考文章信息整理出的PyTorch十大核心操作的概述&#xff1a; 张量创建&#xff1a; 从Python列表或NumPy数组创建张量。使用特定值创建张量&#xff0c;如全零、全一、指定范围、均匀分布、正…

Python (Ansbile)脚本高效批量管理服务器和安全

1、简介 在现代 IT 基础设施中&#xff0c;管理大量服务器是一项复杂而繁琐的任务。特别是在检查服务器的存活状态以及 SSH 登录等任务上&#xff0c;手动操作非常耗时且容易出错。本文将介绍如何使用 Python 脚本实现对多台服务器的批量检查和管理&#xff0c;包括检查服务器…

【应届应知应会】Linux常用指令

SueWakeup 个人主页&#xff1a;SueWakeup 系列专栏&#xff1a;学习技术栈 个性签名&#xff1a;保留赤子之心也许是种幸运吧 本文封面由 凯楠&#x1f4f8;友情提供 目录 文件与目录管理 目录操作命令&#xff1a; ls [选项] [目录或文件] mkdir 文件操作命令&#xf…

幻兽帕鲁Palworld樱花版本服务器一键开服联机

1、登录服务器&#xff08;百度莱卡云&#xff09; 1.1、第一次购买服务器会安装游戏端&#xff0c;大约5分钟左右&#xff0c;如果长时间处于安装状态请联系客服 2、在启动中调整游戏参数 2.1、重启服务器&#xff0c;等待running出现&#xff0c;或者运行时间变为灰色&#x…

vue 组件下 img 标签动态传入不展示

效果 解决办法&#xff1a; require() <titleComponent:title"业务工作概览":src"require(/assets/imgs/evaluation/overviewStatistics.png)"></titleComponent> 效果&#xff1a;

Python输入与输出基础

Python输入与输出基础 引言 Python是一种非常直观且功能强大的编程语言&#xff0c;它允许用户轻松地处理输入和输出操作。无论是从用户那里获取数据&#xff0c;还是将结果展示给用户&#xff0c;Python都提供了简单易用的函数和方法。 一、输入数据 在Python中&#xff0c…

为什么javaer认为后台系统一定要用java开发?

在开始前刚好我有一些资料&#xff0c;是我根据网友给的问题精心整理了一份「java的资料从专业入门到高级教程」&#xff0c; 点个关注在评论区回复“666”之后私信回复“666”&#xff0c;全部无偿共享给大家&#xff01;&#xff01;&#xff01;公司有两个开发团队&#xf…

【智能算法应用】麻雀搜索算法在物流配送中心选址的应用(无待选配送中心)

目录 1.算法原理2.数学模型3.结果展示4.参考文献5.代码获取 1.算法原理 【智能算法】麻雀搜索算法&#xff08;SSA&#xff09;原理及实现 2.数学模型 模型假设 待定物流配送中心的库存总能满足需求点的需求不考虑从工厂到待定物流配送中心的运输成本不考虑选定区域内待确定…

一次tcpdump抓包过程

#查询网卡 tcpdump -D # 监听 21100 端口 网卡ens192 &#xff08;不知道网卡&#xff0c;可以直接不输入 -i 网卡&#xff09;TCP数据&#xff0c;等待一段时间&#xff0c;执行CtrlC&#xff0c;终止程序 tcpdump -x -s 0 -w /tmp/123.dump -i ens192 -p tcp port 21100 #…

【大数据】—量化交易实战案例双均线策略(移动平均线)

声明&#xff1a;股市有风险&#xff0c;投资需谨慎&#xff01;本人没有系统学过金融知识&#xff0c;对股票有敬畏之心没有踏入其大门&#xff0c;今天用另外一种方法模拟炒股&#xff0c;后面的模拟的实战全部用同样的数据&#xff0c;最后比较哪种方法赚的钱多。 量化交易…

Android 添加自己的时钟小部件

小部件&#xff0c;也叫微件&#xff0c; 它的介绍参考官网 应用 widget 概览 https://developer.android.google.cn/develop/ui/views/appwidgets/overview?hlzh-cn 直接上图&#xff0c;原生系统上&#xff0c;时钟应用的小部件效果。 我也整一个。 1.创建小部件布局文…

基于Python+Flask+MySQL+HTML的B站数据可视化分析系统

FlaskMySQLVue 基于PythonFlaskMySQLHTML的B站数据可视化分析系统 项目采用前后端分离技术&#xff0c;项目包含完整的前端HTML&#xff0c;以及Flask构成完整的前后端分离系统 爬虫文件基于selenium&#xff0c;需要配合登录账号 简介 主页 登录页面&#xff0c;用户打开浏…