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

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];
            }
          },

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

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

相关文章

OpenHarmony标准设备应用开发(二)——布局、动画与音乐

本章是 OpenHarmony 标准设备应用开发的第二篇文章。我们通过知识体系新开发的几个基于 OpenHarmony3.1 Beta 标准系统的样例&#xff1a;分布式音乐播放、传炸弹、购物车等样例&#xff0c;分别介绍下音乐播放、显示动画、动画转场&#xff08;页面间转场&#xff09;三个进阶…

.NET 分享一款Web打包和解压缩工具

01本文概要 在.NET部署环境中&#xff0c;利用IIS中间件开启对ASP的支持&#xff0c;可以实现许多强大的文件操作功能。特别是在一些需要进行预编译的情况下&#xff0c;通过上传ASP脚本&#xff0c;可以获得WebShell&#xff0c;从而方便地进行各种操作。本文将介绍一个名为S…

一文搞懂车载系统开发学习路线

前言 随着汽车技术的快速发展和智能化趋势的加强&#xff0c;车载信息娱乐系统已经成为现代汽车不可或缺的一部分。因此&#xff0c;车载软件市场正在迅速增长&#xff0c;这为Android应用开发提供了新的机会。恰好近年来大环境不是很理想&#xff0c;车载开发不失为Android应…

概率论统计——大数定律

大数定律 弱大数定律&#xff08;辛钦大数定律&#xff09; 利用切比雪夫不等式&#xff0c;证明弱大数定律 应用 伯努利大数定理&#xff0c;&#xff08;辛钦大数定理的推论&#xff09; 证明伯努利大数定理 注意&#xff1a;这里将二项分布转化成0,1分布来表示&#xff0c;…

电能表抄表软件是什么?

1.电能表抄表软件简述 电能表抄表软件是当代电力系统中不可或缺的一部分&#xff0c;它通过大数据技术性完成了远程控制抄表、数据库管理及其电费测算等服务&#xff0c;大大提高了工作效能并降低了人为失误。这类软件的诞生&#xff0c;促使供电公司可以实时监控系统与分析电…

【Uniapp】图片修复对比组件

效果图 不废话&#xff0c;直接上源码&#xff01; 组件直接用 <template><viewclass"img-comparison-container":style"width: width rpx;height: height rpx"><view class"before-image" :style"width: x rpx&quo…

【MATLAB】fminsearchbnd()函数安装包下载

fminsearchbnd()函数 链接&#xff1a;https://pan.baidu.com/s/1apc6_f92rDnV_NwHpZZpDQ?pwdxul8 提取码&#xff1a;xul8 fminsearchbnd, fminsearchcon - File Exchange - MATLAB Central (mathworks.cn) 若链接失效&#xff0c;可以自行注册下载&#xff0c;操作也很简…

一键解锁!贸易行业实现银行与财务系统秒级对接,效率飙升!

客户介绍 某贸易有限公司是一家实力雄厚的工贸一体跨国集团企业。作为行业内的佼佼者&#xff0c;该公司以出口家纺产品和生产销售建材洁具为核心业务。公司始终坚持以市场为导向&#xff0c;不断创新和优化产品和服务&#xff0c;以满足不断变化的市场需求。 客户痛点 以往&…

文本三剑客-awk

一、awk的介绍 1.1awk的简介 AWK 是一种处理文本文件的语言&#xff0c;是一个强大的文本分析工具 可以在无交互的模式下实现复杂的文本操作 相较于sed常作用于一整个行的处理&#xff0c;awk则比较倾向于一行当中分成数个字段来处理&#xff0c;因为awk相当适合小型的文本…

Winform自定义控件 —— 开关

在开始阅读本文之前&#xff0c;如果您有学习创建自定义控件库并在其他项目中引用的需求&#xff0c;请参考&#xff1a;在Visual Studio中创建自定义Winform控件库并在其他解决方案中引用https://blog.csdn.net/YMGogre/article/details/126508042 0、引言 由于 Winform 框架并…

C++ 程序员常用的VScode的插件

vscode中好用的插件 Better CommentsBookmarksC/C ThemeChinese (Simplified) (简体中文) Language Pack for Visual Studio CodeclangdClang-FormatCodeLLDBCMakeCMake ToolsCode RunnerCode Spell CheckerCodeSnapColor Highlightvscode-mindmapDraw.io IntegrationError Len…

推荐一款实用的便捷工具:windows输入法删除工具

这是一款输入法删除的工具&#xff0c;能够辅助个人来彻底的删除你电脑上面的输入法&#xff0c;以极为完整的方式来进行卸载&#xff0c;在你找不到卸载的方式之时这款软件极为的适用&#xff0c;能够帮助你面对这个场景&#xff0c;满足个人对于卸载上面的需求! 目录 一、下…

低功耗音频编解码器CJC8990

由工采网代理的CJC8990是一款低功耗音频编解码器&#xff0c;拥有先进的功能并提供高质量音频&#xff0c;非常适合于便携式数字音频应用&#xff0c;支持多种音频数据格式&#xff0c;包括I2S, DSP模式。 产品介绍&#xff1a; 该芯片工作电压&#xff1a;1.5V&#xff5e;3…

【EasyExcel】EasyExcel合并指定列单元格导出详解设置导出样式

【EasyExcel】EasyExcel合并指定列单元格导出&设置导出样式 需求分析 需求背景 许多报表需要对相同数据的单元格进行合并&#xff0c;以提高数据的可读性和美观性。例如&#xff0c;在销售报表中&#xff0c;将相同客户的订单合并在一起。同时&#xff0c;报表中的标题和内…

MySQL中order by排序时,数据存在null,排序在最前面

order by排序是最常用的功能&#xff0c;但是排序有时会遇到数据为空null的情况&#xff0c;这样排序就会乱了&#xff0c;这里以MySQL为例&#xff0c;记录我遇到的问题和解决思路。 sql 排序为 null 值问题&#xff1a; 排序时我们用 receive_date(一个统计的时间&#xff…

物业水电抄表系统的全面解析

1.系统概述 物业水电抄表系统是现代物业管理中的重要组成部分&#xff0c;它通过自动化的方式&#xff0c;实时监控和记录居民或企业的水电使用情况&#xff0c;极大地提高了工作效率&#xff0c;降低了人工抄表的错误率。该系统通常包括数据采集、数据传输、数据分析和数据展…

python创建新环境并安装pytorch

python创建新环境并安装pytorch 一、创建新环境1、准备工作2、创建虚拟环境并命名3、激活虚拟环境 二、安装pytorch1、pytorch官网2、选择与你的系统相对应的版本3、安装成功 一、创建新环境 1、准备工作 本次创建的环境是在anaconda环境下&#xff0c;否则需要在纯净环境下创…

centOS忘记密码的处理办法

1、开机后在出现内核选项时&#xff0c;按 e&#xff1b; 2、在Linux 开头的这行&#xff0c;输入 rd.break 如下图&#xff1b; 3、然后&#xff0c;执行&#xff1a;CtrlX&#xff1b; 4、进入之后是 switch_root:/#输入 mount -o rw,remount /sysroot 以读写方式重新挂载 /s…

初讲树,二叉数(搜索二叉树,实现的方法<链式,顺序>)

目录 1.树的概念及其结构 1.1树的概念 1.2树相关的概念 1.3树的表示 2.二叉树概念及其结构 2.1概念 2.2现实中的二叉树 2.3特殊的二叉树 2.4二叉树的性质 2.5二叉树存储结构 2.5.1链式存储 2.5.2顺序存储 3.搜索二叉树 1.树的概念及其结构 1.1树的概念 树是一种非…

从零入门激光SLAM(十六)——卡尔曼滤波基础

一、卡尔曼滤波简介KF 卡尔曼滤波器&#xff08;Kalman Filter&#xff09;是一种用于估计动态系统状态的递归算法。它通过结合系统的动态模型和噪声观测数据&#xff0c;提供对系统状态的最优估计。卡尔曼滤波器广泛应用于信号处理、控制系统、导航、计算机视觉等领域。 卡尔…