首页 > 解决方案 > 我想使用 ECharts 创建一个类似时间线的条形图

问题描述

我想将 xAxis 的标签更改为以 1 小时为间隔的小时。如何格式化 xAxis 数据?我不能为 xAxis 使用时间类型,因为它通常用于连续数据。

option = {
tooltip : {
        trigger: 'axis',
        axisPointer : {
            type : 'shadow'
        },
        formatter: function (params) {
            var tar;
            if (params[1].value != '-') {
                tar = params[1];
            }
            else {
                tar = params[0];
            }
            return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value + ' min';
        }
    },
    legend: {
        data: ['Duration (minutes)']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis:  {
        type: 'value',
        formatter: '{value} kg'
    },
    yAxis: {
        type: 'category',
        data: ['2019-02-01','2019-02-02','2019-02-03','2019-02-04','2019-02-05','2019-02-06','2019-02-07']
    },
    series: [

        {
            type: 'bar',
            stack: '总量',
            itemStyle: {
                normal: {
                    barBorderColor: 'rgba(0,0,0,0)',
                    color: 'rgba(0,0,0,0)'
                },
                emphasis: {
                    barBorderColor: 'rgba(0,0,0,0)',
                    color: 'rgba(0,0,0,0)'
                }
            },
            data: [150, 212, 201, 154, 190, 330, 410]
        },
        {
            name: 'Duration (minutes)',
            type: 'bar',
            stack: '总量',
            itemStyle: {
                color: '#88c149'
            },
            label: {
                normal: {
                    show: true,
                    position: 'insideRight'
                }
            },
            data: [820, 832, 901, 934, 1290, 1330, 1320]
        }
    ]
};

我想将 xAxis 的标签更改为以 1 小时为间隔的小时。如何格式化 xAxis 数据?

标签: javascriptecharts

解决方案


推荐阅读