ECharts / JS - Форматировать время Int в H: M: S во всплывающей подсказке

Я пытаюсь изменить целое время, например 010511, в удобочитаемый формат 01:05:11 как для всплывающей подсказки, так и для YAxis Echarts.

Обратите внимание, что это не отметка времени, а часть данных типа секундомера, всегда начинающаяся с 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>

Как изменить значение int в более удобочитаемый формат в ECharts?


javascript formatting echarts
person bbrg    schedule 03.04.2018    source источник

Ответы (3)


arrow_upward
4
arrow_downward

Решил это с помощью ниже!

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

Сначала мы сортируем массив params с помощью функции .sort(), затем создаем вывод, содержащий дату первого результата в качестве заголовка (Дата будет в каждой второй записи, поэтому захват ее из первого результата отлично), затем мы перебираем длину массива, добавляя нужные значения к выходным данным (отформатированные с использованием kshetline answer!), и проверяя, является ли это последним результатом в массиве, чтобы мы могли добавить теги разрыва.

person bbrg    schedule 04.04.2018

arrow_upward
2
arrow_downward

Если значение времени достоверно равно шести символам, как в ваших примерах, назовите значение времени t, и форматирование будет выглядеть так:

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

Или это, немного более элегантно:

t.match(/\d\d/g).join(':')
person kshetline    schedule 03.04.2018
comment
Спасибо за ваш комментарий! В конце концов мне удалось понять это самому, и я использовал код, который вы разместили, для форматирования необходимой части, как показано в моем ответе :-) - person bbrg; 04.04.2018

arrow_upward
0
arrow_downward

params.value[0] содержит дату в формате гггг-мм-дд

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;
    }
},
person pujitha pinky    schedule 21.03.2020