问题描述：
折线图有很多数据，鼠标悬停时，针对X轴，Y轴数据进行格式化，例如X的时间戳，格式化为时分秒，Y轴保留两位小时
希望效果图：
方案1：
在这个示例中，X轴依然使用时间戳，但是没有对时间戳进行格式化处理。当鼠标悬停在数据点上时，会显示引导线并在提示框中显示对应的时间戳和Y轴数值。其中，Y轴的数值会保留两位小数。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ECharts Line Chart Example</title>
<!-- 引入 ECharts 文件 -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="chart" style="width: 800px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的 DOM，初始化 ECharts 实例
var myChart = echarts.init(document.getElementById('chart'));
// 指定图表的配置项和数据
var option = {
xAxis: {
type: 'time',
// 时间戳示例数据
data: [1625260800000, 1625347200000, 1625433600000, 1625520000000, 1625606400000, 1625692800000, 1625779200000],
axisLabel: {
formatter: function (value, index) {
var date = new Date(value);
return date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds();
}
},
axisPointer: {
label: {
show: true,
formatter: function(params) {
var date = new Date(params.value);
return date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds();
}
}
}
},
yAxis: {
type: 'value',
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
},
formatter: function(params) {
// 将时间戳转换为Date对象
var date = new Date(params[0].value[0]);
// 获取时分秒数值
var hours = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();
// 将时分秒数值格式化为指定的字符串格式
var timeString = hours + ':' + minutes + ':' + seconds;
// 获取Y轴数值，保留两位小数
var yValue = params[0].value[1];
// 返回格式化后的字符串
return '时间：' + timeString + '<br/>' + '数值：' + yValue.toFixed(2);
}
},
series: [{
data: [
[1625260800000, 100],
[1625264400000, 150],
[1625268000000, 200],
[1625271600000, 250],
[1625275200000, 300],
[1625278800000, 350],
[1625282400000, 400],
[1625286000000, 450],
[1625289600000, 500],
[1625293200000, 550]
],
type: 'line',
name: 'Product A',
smooth: true,
}]
};
// 使用指定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>方案2：
以下是一个完整的示例代码，将ECharts折线图的X轴时间戳格式化为时分秒，并在鼠标悬停时显示友好的引导线，同时引导线上的数据值也被格式化为时分秒：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ECharts Line Chart Example</title> <!-- 引入 ECharts 文件 --> <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script> </head> <body> <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM --> <div id="chart" style="width: 800px;height:400px;"></div> <script type="text/javascript"> // 基于准备好的 DOM，初始化 ECharts 实例 var myChart = echarts.init(document.getElementById('chart')); // 指定图表的配置项和数据 var option = { xAxis: { type: 'time', // 时间戳示例数据 data: [1625260800000, 1625347200000, 1625433600000, 1625520000000, 1625606400000, 1625692800000, 1625779200000] }, yAxis: { type: 'value' }, tooltip: { trigger: 'axis', axisPointer: { type: 'cross', label: { formatter: function(params) { // 将时间戳转换为Date对象 var date = new Date(params.value); // 获取时分秒数值 var hours = date.getHours(); var minutes = date.getMinutes(); var seconds = date.getSeconds(); // 将时分秒数值格式化为指定的字符串格式 var timeString = hours + ':' + minutes + ':' + seconds; return timeString; } } }, formatter: function(params) { // 将时间戳转换为Date对象 var date = new Date(params[0].value[0]); // 获取时分秒数值 var hours = date.getHours(); var minutes = date.getMinutes(); var seconds = date.getSeconds(); // 将时分秒数值格式化为指定的字符串格式 var timeString = hours + ':' + minutes + ':' + seconds; // 返回格式化后的字符串 return '时间：' + timeString + '<br/>' + '数值：' + params[0].value[1]; } }, series: [{ data: [ [1625260800000, 820], [1625347200000, 932], [1625433600000, 901], [1625520000000, 934], [1625606400000, 1290], [1625692800000, 1330], [1625779200000, 1320] ], type: 'line', name: 'Product A', smooth: true }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> </body> </html>
在上面的代码中，将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 下午
