ECharts / JS - Format Time Int to H:M:S within Tooltip

Question

I am trying to change a time int, such as 010511 into a human readable format of 01:05:11 for both the tooltip, and YAxis of Echarts.

Note that this isn't a timestamp, and is a stopwatch-type piece of data, always starting from 00:00:00 and going up.

Below is the current state of the 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>

How do I change the int value into a more human readable format, within ECharts?

Answer 1

Solved it with the below!

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
    }
}

First we sort the params array with a .sort() function, then we create an output containing the date of the first result as the title (The date will be on every other record, so grabbing it from the first result is fine), then we iterate over the length of the array, appending values we want to the output (formatted using kshetline's answer!), and checking if it's the last result in the array so we can add break tags.

Answer 2

If the time value is reliably six characters like in your examples, call the time value t, and formatting would look like this:

t.substr(0, 2) + ':' + t.substr(2, 2) + ':' + t.substr(4, 2)

Or this, a bit more elegant:

t.match(/\d\d/g).join(':')