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?

bbrg · Accepted Answer · 2018-04-04T09:55:50.073

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.

kshetline · Answer 2 · 2018-04-03T16:05:39.673

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(':')

edited Apr 03 '18 at 16:05

answered Apr 03 '18 at 15:59

kshetline

12,547
4
37
73

Thanks for your comment! I eventually managed to figure it out myself, and have used the code you posted to format the part needed, as shown in my answer :-) – bbrg Apr 04 '18 at 09:57

score 2 · Answer 3 · edited Mar 21 '20 at 19:09

params.value[0] contains date in yyyy-mm-dd format

tooltip: {
    trigger: 'axis',
    formatter: function(params) {
        params = params[0];
        var chartdate = echarts.format.formatTime('dd-MM-yyyy', params.value[0]);
        var val = '<li style="list-style:none">' + params.marker +
            params.seriesName + '&nbsp;&nbsp;' + params.value[1] + '</li>';
        return chartdate + val;
    }
},

score 0 · Answer 4 · answered Sep 09 '21 at 10:18

Based on @pujitha-pinky answer you can adapt it to a multiple series chart like this (example with formating the date to a fr-FR local):

tooltip = {
    trigger: "axis",
    formatter: function (params) {
     var chartdate = (new Date(params[0].value[0])).toLocaleDateString("fr-FR", {
       year: "numeric",
       month: "2-digit",
       day: "2-digit",
      });
     var vals = params.reduce((prev, curr) => prev + '<li style="list-style:none">' + curr.marker + curr.seriesName + "&nbsp;&nbsp;" + curr.value[1] + "</li>", "");
     return chartdate + vals;
    },
   };

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

4 Answers4