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

已于 2024-10-09 19:43:00 修改
阅读量1w 收藏 34
点赞数 38
分类专栏： ECharts系列 问题方案 文章标签： echarts 前端 javascript
于 2023-07-07 13:18:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_44171297/article/details/131594637
版权
文章提供了两个示例，展示了如何在ECharts折线图中将X轴的时间戳格式化为时分秒，并在鼠标悬停时显示Y轴数值，同时保留两位小数。方案1和方案2都详细解释了配置项和数据处理方法，使时间戳更易于阅读。此外，还推荐了一本关于前端工程化和Vue.js3.0实践的书籍。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

 问题描述：

折线图有很多数据，鼠标悬停时，针对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 下午

评论 44
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值