ECharts / JS - 在工具提示中将时间整数格式化为 H:M:S

Question

我正在尝试将工具提示和 Echarts 的 YAxis 的时间整数（例如 010511）更改为 01:05:11 的人类可读格式。

请注意，这不是时间戳，而是秒表类型的数据，始终从 00:00:00 开始并上升。

以下是 EChart 的当前状态。

<!-- Echart JS CC --> 
<script>

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

var option = {
    title: { text: '' },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#6a7985'
            }
        }

    },
    textStyle: {
        color: '#fff'
    },
    grid: {
        left: '0',
        right: '4%',
        bottom: '27%',
        top: '4%',
        containLabel: true
    },
    dataZoom: [
        {
            type: 'inside',
            start: 0,
            end: 100
        },
        {
            show: true,
            type: 'slider',
            y: '75%',
            start: 0,
            end: 100
        }
    ],
    legend: {
        data: ["Bobby", "Freddy"],
        textStyle: {
        },
        textStyle: {
            color: '#fff'
        },
        bottom: 0,
    },
    xAxis: {
        boundaryGap : false,
        data: ["19/03/18","20/03/18","21/03/18","22/03/18","23/03/18","26/03/18","27/03/18","29/03/18","03/04/18"]
    },
    yAxis: {
        boundaryGap : false
    },
    series: [
        {
            name: 'Bobby',
            type: 'line',
            areaStyle: {normal: {}},
            symbol: 'circle',
            symbolSize: 8,
            data: ["011441","011614","011614","003815","001915","003610","000432","000458","005801"]
        },
        {
            name: 'Freddy',
            type: 'line',
            areaStyle: {normal: {}},
            symbol: 'circle',
            symbolSize: 8,
            data: ["001725","001725","001725","003239","010239","002531","005208","004547","002441"]
        },
    ]
};
myChart.setOption(option);
</script>

如何在 ECharts 中将 int 值更改为更易读的格式？

Answer 1

用下面的方法解决了！

tooltip: {
    trigger: 'axis',
    formatter: function(params) {

        params.sort(function(a,b) { // Sort params by value size first
            return parseInt(b.value) - parseInt(a.value)
        });

        output = '<b>' + params[0].name + '</b><br/>'
        for (i = 0; i < params.length; i++) {
            output += params[i].marker + params[i].seriesName + ': ' + params[i].value.match(/\d\d/g).join(':'); // : every 2nth

            if (i != params.length - 1) { // Append a <br/> tag if not last in loop
                output += '<br/>'
            }
        }
        return output
    }
}

首先，我们使用 .sort() 函数对 params 数组进行排序，然后我们创建一个输出，其中包含第一个结果的日期作为标题（日期将出现在所有其他记录上，因此从第一个结果中获取它就可以了），然后我们遍历数组的长度，将我们想要的值附加到输出（使用kshetline 的答案格式化！），并检查它是否是数组中的最后一个结果，以便我们可以添加中断标记。