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

Question

我正在尝试将时间整数（例如 010511）更改为工具提示和 Echarts 的 YAxis 的人类可读格式 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

如果时间值确实像您的示例中那样是六个字符，则将时间值称为 t，格式如下所示：

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

或者这个，更优雅一点：

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

Answer 2

用下面的方法解决了！

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's answer!格式化), 并检查它是否是数组中的最后一个结果，以便我们可以添加中断标记。

Answer 3

params.value[0] 包含 yyyy-mm-dd 格式的日期

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

Answer 4

基于@pujitha-pinky 的回答，您可以将其调整为像这样的多系列图表（示例将日期格式化为 fr-FR 本地）：

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 - 在工具提示中将时间 Int 格式化为 H:M:S

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

javascript

formatting

echarts