ECharts实现整数计时数据转H:M:S格式（提示框与Y轴）

没问题，我来帮你搞定这个格式转换的需求！核心思路是先封装一个通用的秒数转HH:MM:SS格式的工具函数，然后分别在ECharts的Y轴标签和Tooltip提示框里调用它即可。

第一步：编写秒数格式化函数 #

先写一个处理数字补零和时分秒计算的函数，不管是Y轴还是Tooltip都能复用：

// 把秒数转换为 HH:MM:SS 格式
function formatSeconds(seconds) {
    // 计算小时、分钟、剩余秒数
    const hours = Math.floor(seconds / 3600);
    const minutes = Math.floor((seconds % 3600) / 60);
    const secs = seconds % 60;
    
    // 补零处理：小于10的数字前面加0
    const padZero = num => num.toString().padStart(2, '0');
    
    return `${padZero(hours)}:${padZero(minutes)}:${padZero(secs)}`;
}

第二步：配置Y轴显示格式 #

在你的ECharts option里找到Y轴配置（yAxis），添加axisLabel.formatter来调用上面的格式化函数：

var option = {
    // ... 其他已有配置
    yAxis: {
        // ... 你的Y轴其他配置
        axisLabel: {
            // 把Y轴的数值（秒数）转成时分秒格式
            formatter: function(value) {
                return formatSeconds(value);
            }
        }
    },
    // ... 其他配置
};

第三步：配置Tooltip提示框格式 #

因为你用的是trigger: 'axis'，所以Tooltip的formatter需要处理每个系列的数据，把对应的秒数转成可读格式：

var option = {
    // ... 其他已有配置
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            // ... 你的axisPointer配置
        },
        // 自定义Tooltip内容格式
        formatter: function(params) {
            // 先处理标题（通常是X轴内容）
            let result = params[0].axisValue + '<br/>';
            // 遍历每个系列的数据，把秒数转成时分秒
            params.forEach(item => {
                result += `${item.marker}${item.seriesName}: ${formatSeconds(item.value)}<br/>`;
            });
            return result;
        }
    },
    // ... 其他配置
};

完整整合示例 #

把所有部分整合到你的现有代码里，大概是这样：

<script>
var chart = document.getElementById('cc_chart');
var myChart = echarts.init(chart);

// 格式化函数放在最前面
function formatSeconds(seconds) {
    const hours = Math.floor(seconds / 3600);
    const minutes = Math.floor((seconds % 3600) / 60);
    const secs = seconds % 60;
    const padZero = num => num.toString().padStart(2, '0');
    return `${padZero(hours)}:${padZero(minutes)}:${padZero(secs)}`;
}

var option = {
    title: { text: '' },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            // ... 你的原有axisPointer配置
        },
        formatter: function(params) {
            let result = params[0].axisValue + '<br/>';
            params.forEach(item => {
                result += `${item.marker}${item.seriesName}: ${formatSeconds(item.value)}<br/>`;
            });
            return result;
        }
    },
    yAxis: {
        // ... 你的原有Y轴配置
        axisLabel: {
            formatter: function(value) {
                return formatSeconds(value);
            }
        }
    },
    // ... 其他原有配置（比如xAxis、series等）
};

myChart.setOption(option);
</script>

这样修改后，Y轴上的数值和Tooltip里显示的内容都会从010511（秒数）转换成01:05:11的易读格式啦。

内容的提问来源于stack exchange，提问作者bbrg