【ECharts系列】ECharts 鼠标悬停线格式化

 问题描述：

折线图有很多数据，鼠标悬停时，针对X轴，Y轴数据进行格式化，例如X的时间戳，格式化为时分秒，Y轴保留两位小时

希望效果图：

方案1：

在这个示例中，X轴依然使用时间戳，但是没有对时间戳进行格式化处理。当鼠标悬停在数据点上时，会显示引导线并在提示框中显示对应的时间戳和Y轴数值。其中，Y轴的数值会保留两位小数。

方案2：

以下是一个完整的示例代码，将ECharts折线图的X轴时间戳格式化为时分秒，并在鼠标悬停时显示友好的引导线，同时引导线上的数据值也被格式化为时分秒：

在上面的代码中，将X轴的type属性设置为'time'，然后将时间戳示例数据作为X轴的data属性。

在tooltip的axisPointer中，将type属性设置为'cross'，表示显示十字准星指示器，label属性中的formatter回调函数用于格式化引导线对应的X值。

在callback函数中，将时间戳转换为Date对象，然后使用getHours()、getMinutes()和getSeconds()方法获取时分秒数值，最后使用字符串拼接的方式将它们组合成"时:分:秒"的字符串格式。

另外，在tooltip中添加了一个formatter回调函数，用于格式化引导线上的数据值。

在这个回调函数中，依然将时间戳转换为Date对象，然后使用getHours()、getMinutes()和getSeconds()方法获取时分秒数值，最后使用字符串拼接的方式将它们组合成"时:分:秒"的字符串格式。

同时，还在返回的字符串中添加了"数值："前缀，用于提示引导线上的数据值。

通过类似以上示例代码的方式，可以将ECharts折线图的X轴时间戳格式化为任意指定的时间格式，并在鼠标悬停时显示友好的引导线，同时引导线上的数据值也被格式化为指定的时间格式。

图书推荐

图书名称：《前端工程化：基于Vue.js 3.0的设计与实践》

 

 

图书介绍

◆图书简介◆
本书以Vue.js的3.0版本为核心技术栈，围绕“前端工程化”和TypeScript的知识点展开讲解，根据笔者多年的前端开发和一线团队管理经验，将Vue 3的知识点按照工程师做项目的实施顺序梳理成章，一步一步帮助读者进行前端工程化和Vue 3的开发。

从前端工程化开始到TypeScript语言的学习，再到使用TypeScript开发Vue 3项目，通过循序渐进的学习过程提升读者在前端工程化领域的实战能力。
本书大部分知识点都搭配了通俗易懂、可实现的代码案例，读者扫描封底的二维码可获得随书附赠的源代码等资源。本书适合计算机前端开发技术人员、前端技术团队管理人员和相关专业的在校大学生阅读。

◆名人推荐◆

网易游戏社区原前端负责人 黄通

本书系统地介绍了前端工程化开发中的各种技术，并以流行框架 Vue.js 3.0 作为技术栈，从知识讲解到实践运用，再到实际问题的解决，引导读者掌握基于 Vue.js 3.0 的前端开发技术。

红迅软件研发经理 朱伟聪

本书从 0 到 1 ，带你从前端工程化的基础概念到动手实操，再到流行框架 Vue.js 全新 3.0 版本的学习，不但可以学习框架的知识，更能明白在哪用、怎么用，可以说是前端同学的必备案边读物。

顺丰科技前产品经理、中国设计智造大奖获得者、独立开发者 吴庸
本书清晰地介绍了前端工程化的发展变化，以及从基础的入门到框架的实践，还对当下流行的技术栈组合进行了科普和运用场景分析，不仅适合前端工程师阅读，对于产品经理来说，也是值得一看的。产品经理了解前端技术发展带来的优势，设计的产品会更有竞争力。

等不及的小伙伴可以先睹为快：前端工程化

 参与方式 

图书数量：本次送出 2 本   ！！！⭐️⭐️⭐️
活动时间：截止到 2023-07-11 12:00:00

抽奖方式：

评论区随机抽取

参与方式：

• 对文章进行：点赞、收藏，评论

中奖名单 

获奖名单

 中奖名单：请关注博主动态

名单公布时间：2023-07-11 下午