echarts 图表tooltip扩展(适配移动端)

news2025/1/18 20:28:48

2024.5.16今天我学习了如何对echarts 图表tooltip进行自定义设置,效果如:

如果是日维度,需要展示对应的星期,以及用移动端去查看这个图表提示要显示在整个图表内,如果没有设置position会溢出图表,通用写法代码如下(复制直接就能通用):

          tooltip: {
            "trigger": "axis",
            "axisPointer": {
              "type": "shadow"
            },
            formatter: params => {
              moment.locale('zh-cn');
              let time_type = params[0].name.length == 8 ? 'YYYYMMDD(周dd)' : 'YYYYMM'
              let newArray = []
              for (let i = 0; i < params.length; i++) {
                let obj = `<div>
                               ${i === 0 ? moment(params[i].name).format(time_type)+'<br/>' : ''}
                               ${params[i].marker}
                               ${params[i].seriesName}:
                               ${params[i].value}
                           </div>`
                newArray.push(obj);
              }
              return newArray.join('');
            },
            position: function (point, params, dom, rect, size) {
              let x = point[0] + 10; // x 轴偏移量为 10
              let y = point[1] + 20; // y 轴偏移量为 10
              if (x + dom.offsetWidth > size.viewSize[0]) {
                x = size.viewSize[0] - dom.offsetWidth;
              }
              if (y + dom.offsetHeight > size.viewSize[1]) {
                y = size.viewSize[1] - dom.offsetHeight;
              }
              return [x, y];
            }
          },

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

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

相关文章

数据结构与算法|算法总结|动态规划之编辑距离总结篇

啥也不说先上图&#xff01; 本节一共总结了六道题&#xff0c;个人认为作为二维dp的典型用法&#xff0c;所以归纳到了一起&#xff0c;方便对比、类比学习。 718.最长重复子序列 力扣题目链接 文章链接 两个整数数组A、B&#xff0c;返回两个数组中 公共的、长度最长的子数组…

跨域数据流动:数据提取过程中的治理与安全双轮驱动

跨域数据流动&#xff1a;数据提取过程中的治理与安全双轮驱动 随着信息技术的飞速发展&#xff0c;跨域数据流动已成为现代社会的常态。从医疗记录到金融交易&#xff0c;从社交媒体到企业运营&#xff0c;数据在各个领域之间频繁交换&#xff0c;为社会发展带来了极大的便利…

Cocktail for Mac 激活版:一站式系统优化与管理神器

Cocktail for Mac是一款专为Mac用户打造的系统优化与管理工具&#xff0c;凭借其强大的功能和简便的操作&#xff0c;赢得了广大用户的喜爱。这款软件集系统清理、修复和优化于一身&#xff0c;能够帮助用户轻松解决Mac系统中的各种问题&#xff0c;提高系统性能。 Cocktail fo…

MySQL单表查询案例演示

目录 一、创建数据库lianxi 二、选择数据库为lianxi 三、新建一个数据表grade&#xff0c;在grade表中插入数据 四、开始进行查询操作&#xff08;验证表中数据&#xff09; 1、查询1945班的成绩信息 2、查询1945班&#xff0c;语文成绩大于60小于90的成绩信息 3、查询学…

电商数据分析的介绍及应用||电商数据API接口

在这到处弥漫着电商气息的社会里&#xff0c;人们依靠电商让生活变得简单而便捷。那么作为电商数据分析师&#xff0c;我们需要在海量电商数据中揭示出隐含的、先前未知的并有潜在价值的信息和规律&#xff0c;这也要求我们具备数据洞察和汇总能力&#xff0c;运用数据挖掘模型…

Leetcode-有效的括号(带图)

20. 有效的括号 - 力扣&#xff08;LeetCode&#xff09;https://leetcode.cn/problems/valid-parentheses/ 题目 给定一个只包括 (&#xff0c;)&#xff0c;{&#xff0c;}&#xff0c;[&#xff0c;] 的字符串 s &#xff0c;判断字符串是否有效。 有效字符串需满足&…

git 拉取指定目录

指令方式 打开 git 自带的Git Bash 工具 以拉取github中 fastjson 的 /src/test/java/oracle/sql/ 目录为例 1.创建文件夹和git 初始化 cd D:/Program\ Files mkdir fastjson cd fastjson git init 2.设置允许克隆子目录 git config core.sparsecheckout true 3.添加远程…

【physx/wasm】在physx中添加自定义接口并重新编译wasm

目录 说在前面环境搭建编译自定义接口 说在前面 操作系统&#xff1a;windows11wsl2physx版本&#xff1a;5.3.1参考&#xff1a;physx-js-webidl (physx版本为该作者fork出的某个版本) 环境搭建 这里使用的是wsl2docker进行编译的&#xff0c;搭建步骤参考&#xff1a;WSL2 上…

深入探索Jetpack Compose:大前端式客户端开发实战

&#x1f482; 个人网站:【 摸鱼游戏】【神级代码资源网站】【工具大全】&#x1f91f; 一站式轻松构建小程序、Web网站、移动应用&#xff1a;&#x1f449;注册地址&#x1f91f; 基于Web端打造的&#xff1a;&#x1f449;轻量化工具创作平台&#x1f485; 想寻找共同学习交…

win10编译openssl

环境 Win10 64位 VS2022 openssl 3.3.0 nasm NASM version 2.16.01 compiled on Dec 21 2022 perl strawberry-5.38.2.2环境变量设置 perl加入到环境变量&#xff0c;略过nasm加入到环境变量vs的nmake加入到环境变量我的nmake位置如下&#xff1a; C:\Program…

【Unity Shader入门精要 第7章】基础纹理(二)

除了用于直接表示物体表面颜色&#xff0c;纹理的另外一种常见用法是用来进行凹凸映射&#xff0c;在不增加顶点的情况下&#xff0c;通过纹理来提供额外的法线信息&#xff0c;从而在视觉上增加表面凹凸细节&#xff0c;丰富渲染表现。 最常用的两种凹凸映射为法线贴图和高度…

【C语言每日题解】用函数来模拟实现strlen()、strcpy()、strcmp()、strcat()

&#x1f970;欢迎关注 轻松拿捏C语言系列&#xff0c;来和 小哇 一起进步&#xff01;✊ 学习了函数后&#xff0c;老师让我们用函数来实现上面这四个字符串函数。 我们首先来了解一下这四个字符串函数&#xff1a; 1.strlen函数 用于获取字符串长度&#xff08;不包括末尾…

用Rust构造一个人员基本信息的实体类,输出json测试结果

目录 一、需求说明 二、知识点 serde 一、需求说明 需求描述&#xff1a;用Rust写一个人员基本信息的实体类, 包括编号、姓名、描述、性别、备注、照片、简历等&#xff0c;加上3条测试数据&#xff0c;输出为json。 cargo add serde serde { version "1.0.201"…

SVN切换账号

SVN切换账号 有这么一种情况&#xff0c;对于一个新项目&#xff0c;项目紧急的情况下&#xff0c;大家会使用一个svn账号下载代码&#xff0c;开始提前熟悉业务。那么当正式开发的时候&#xff0c;每个人的svn账号也已经下发下来了&#xff0c;这个时候大家就需要切换成自己的…

Jquery+Servlet+JDBC实现登录注册功能

前端部分 HTMLCSS部分 引入JQuery包和JQuery.cookie包&#xff0c;前者封装了DOM操作的一些方法&#xff0c;后者封装了对cookie的操作 我们使用cookie主要是为了做登录后页面的跳转时&#xff0c;能存下来这个用户是谁&#xff0c;这样后面可以对单一用户进行操作&#xff…

嵌入式学习-PWM输出比较

简介 PWM技术 输出比较框图介绍 定时器部分 比较器控制部分 输出控制部分 相关寄存器

使用screen窗口在Autodl服务器训练网络

无法使用鼠标滚轮来查看历史输出的消息 vim ~/.screenrc 按i插入 termcapinfo xterm* ti:te 按esc :wq 保存screen创建的会话中&#xff0c;无法使用鼠标滚轮来查看历史输出的消息 解决方法_screen查看历史输出-CSDN博客无法使用鼠标滚轮查看screen会话历史&#xff0c;解决方…

证件照尺寸标准大小及用途介绍

在日常生活中&#xff0c;证件照是我们不可或缺的一部分&#xff0c;无论是办理身份证、驾驶证&#xff0c;还是参加考试、求职&#xff0c;都需要用到不同尺寸和底色的证件照。本文将为您详细介绍证件照的尺寸标准、用途以及底色的选择。 一、证件照的尺寸标准证件照的尺寸通…

【错题集-编程题】小红的ABC(字符串 + 找规律)

牛客对应题目链接&#xff1a;小红的ABC (nowcoder.com) 一、分析题目 算法思路&#xff1a;由于题目要找的是最短的回文子串&#xff0c;并且只有三个字母&#xff1a;a、b、c&#xff0c;因此最短的回文子串的长度要么是 2&#xff0c;要么是 3。因此&#xff0c;我们仅需枚举…

如何重启Windows系统上的Mysql服务

很久很久之前&#xff0c;我想把我的一台windows笔记本当比服务使用&#xff0c;当时还没有搞wsl, 试了vmware在局域网内总是断连。然后就直接在 windows系统上装了一个 windows版本的Mysql81。 有一天需要修改最大连接数&#xff0c; 费了挺大的劲终于找到了配置文件 my.ini…