Question

我正在尝试将时间int（例如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

用下面解决了！

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! 格式化），并检查它是否是最后一个结果在数组中，我们可以添加break标记。

Answer 2

如果时间值是可靠的六个字符，如示例所示，请调用时间值t，格式如下：

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

或者更优雅一点：

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

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

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

3 个答案: