echart图表(自定义提示框) 鼠标移动到数据展示区自定义展示提示框天/时/分/秒

ratel️

已于 2022-05-26 11:48:31 修改

阅读量1.1k

点赞数 3

文章标签： elementui javascript vue.js

于 2022-05-26 11:44:38 首次发布

本文链接：https://blog.csdn.net/cjy_fly/article/details/124981778

版权

// 毫秒数转换为 天 时 分 秒
function timeTransition(value) {
  var time = parseInt(value);// 需要转换的时间秒 
  var minute = 0;// 分 
  var hour = 0;// 小时 
  var day = 0;// 天
  if (time > 60) {
    minute = parseInt(time / 60);
    theTime = parseInt(time % 60);
    if (minute > 60) {
      hour = parseInt(minute / 60);
      minute = parseInt(minute % 60);
      if (hour > 24) {
        //大于24小时
        day = parseInt(hour / 24);
        hour = parseInt(hour % 24);
      }
    }
  }
  var result = '';
  if (time > 0) {
    result = "" + parseInt(theTime) + "秒";
  }
  if (minute > 0) {
    result = "" + parseInt(minute) + "分" + result;
  }
  if (hour > 0) {
    result = "" + parseInt(hour) + "小时" + result;
  }
  if (day > 0) {
    result = "" + parseInt(day) + "天" + result;
  }
  return result;
}

export default {
	timeTransition,
}

1.在需要使用的页面引入上面封装好的js

import getTime from './getTime.js'

2.使用

tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross'
            },
            formatter: function (params) {
              // console.log(params, 789); // 鼠标悬浮的数据
              let stopTime = params[0]
              let openTime = params[1]
              let operationRate = params[2]
              return '时间1：' + getTime.timeTransition(openTime.data) + '<br>' + '时间2：' + getTime.timeTransition(stopTime.data) + '<br>时间率：' + operationRate.data + '%';
            }
          },