Show datetime values on xAxis

Hi,
I’m a noob in ECharts, but I have to show some numerical data on a yAxis and datetime values on the xAxis. If I use type ‘category’ for the xAxis everything is easy.
My problem is that the horizontal gap between “2021/04/26 - 2021/04-27” and “2021/04-27 - 2021/12/31” is the same. I would like to see a lot more space for the “2021/04-27 - 2021/12/31”.
So I thought maybe I should use type ‘time’ instead of category, but I haven’t been able to figure out how to show the values on the xaxis.
Please, does anyone have a simple example?

This is my current sample:

option = {
dataZoom: [
{
show: true,
realtime: true,
start: 0,
end: 100
},
{
type: ‘inside’,
realtime: true,
start: 0,
end: 100
}
],
tooltip: {
trigger: ‘axis’
},
xAxis: {
type: ‘category’,
min: ‘2021/01/01’,
max: ‘2023/12/31’,
data: [‘2021/01/01’, ‘2021/01/04 10:00’, ‘2021/01/04 16:00’, ‘2021/01/05’, ‘2021/02/01’, ‘2021/05/01’, ‘2021/09/01’, ‘2021/31/12’]
},
yAxis: {
type: ‘value’,
min: -5,
max: 150
},
series: [{
connectNulls: false,
data: [120, 20, null, 150, 80, 70, 110, 130],
type: ‘line’,
smooth: true,
symbol: ‘circle’,
symbolSize: 14,
lineStyle: {
color: ‘#5470C6’,
width: 6,
type: ‘solid’,
shadowColor: ‘rgba(0, 0, 0, 0.5)’,
shadowBlur: 8,
shadowOffsetX: 3,
shadowOffsetY: 3

    },
    itemStyle: {
        borderWidth: 2,
        borderColor: '#5470C6',
        color: '#5470C6'
    }
}]

};

kind regards,
MiguelL

I should have posted this on a somewhat more relevant site for “Apache Echarts”.
I solved the problem by doing this:

option = {
    dataset: {
        source: [
            ['Date', 'Value'],
            ['2020/12/31', 120],
            ['2021/04/01 10:00', 20],
            ['2021/04/01 21:00', 25],
            ['2021/05/06', null],
            ['2021/08/30', -10],
            ['2021/08/09', 70],
            ['2025/04/24', 110],
            ['2025/06/14', 130]
        ]
    },
    dataZoom: [
        {
            show: true,
            realtime: true,
            start: 0,
            end: 100
        },
        {
            type: 'inside',
            realtime: true,
            start: 0,
            end: 100
        }
    ],
    tooltip: {
        trigger: 'axis'
    },
    xAxis: {
        type: 'time',
        min: 'dataMin', // case sensitive !!
        max: 'dataMax'
    },
    yAxis: {
        type: 'value',
        min: 'dataMin', // case sensitive !!
        max: 'dataMax'
    },
    series: [{
        type: 'line', encode: {x: 0, y: 1},
        connectNulls: false,
        smooth: true,
        symbol: 'circle',
        symbolSize: 14,
        lineStyle: {
            color: '#5470C6',
            width: 6,
            type: 'solid',
            shadowColor: 'rgba(0, 0, 0, 0.5)',
            shadowBlur: 8,
            shadowOffsetX: 3,
            shadowOffsetY: 3
        }}],
        
        itemStyle: {
            borderWidth: 2,
            borderColor: '#5470C6',
            color: '#5470C6'
        }
};