具有 2 个数据集的 Echarts 图表未显示第二个 xAxis 标签

Question

I have an eCharts graph with 2 datasets and I want to show 2 xAxis, one on top of the chart and the other one at the bottom. I must be missing some config settings because I can't figure out how to show the second xAxis labels. 1st xAxis shows correctly but 2nd one only shows the axis name, no ticks labels.

Please see attached screenshot for a visual reference.

Missing labels for 2nd xAxis

I've tried multiple settings but no luck, these are my chart options so far:

this.chartOptions = {
        backgroundColor: this.isFirstChart ? '' : '#F7F8FD',
        grid: {
            show: true,
            top: 50,
            left: this.isFirstChart ? 75 : 15,
            right: this.isFirstChart ? 0 : 15,
            bottom: 50,
            borderColor: this.isFirstChart ? '#00000000' : '#DBDDE6',
        },
        yAxis: {
            id: 0,
            gridIndex: 0,
            type: 'time',
            inverse: true,
            data: this.channel1.map(({ time }) => time ?? 0),
            axisLabel: {
                hideOverlap: true,
                show: !!this.isFirstChart,
                formatter: ((ms: number) => DateUtil.format(ms)),
            },
            axisTick: {
                lineStyle: {
                    width: 0
                },
                inside: this.isFirstChart
            },
            axisLine: {
                show: false
            },
            splitLine: {
                show: true
            },
        },
        xAxis: [{
            type: 'value',
            axisLabel: {
                showMinLabel: true,
                showMaxLabel: true,
                fontSize: 10,
                color: '#8086B1',
                show: !this.isFirstChart,
            },
            interval: 1000000,
            axisLine: {
                show: false,
            },
            splitLine: {
                show: true,
                lineStyle: { type: 'dashed' }
            },
            name: this.chartMeta.channelsNames[0],
            nameLocation: 'middle',
            nameGap: 30,
            nameTextStyle: {
                color: this.chartMeta.colors[0]
            },
        },
        {
            type: 'value',
            axisLabel: {
                showMinLabel: true,
                showMaxLabel: true,
                show: !this.isFirstChart,
                fontSize: 10,
                color: '#8086B1',
            },
            interval: 1000000,
            axisLine: {
                show: false,
            },
            splitLine: {
                show: true,
                lineStyle: { type: 'dashed' }
            },
            name: this.chartMeta.channelsNames[1],
            nameLocation: 'middle',
            nameGap: 30,
            nameTextStyle: {
                color: this.chartMeta.colors[1]
            }
        }],
        series: [
            {
                name: this.chartMeta.channelsNames[0],
                type: 'line',
                symbol: 'none',
                connectNulls: true,
                color: this.chartMeta.colors[0],
                data: this.channel1.map((data) => [data.value as number, data.time]),
            },
            {
                name: this.chartMeta.channelsNames[1],
                type: 'line',
                symbol: 'none',
                connectNulls: true,
                color: this.chartMeta.colors[1],
                data: this.channel2.map((data) => [data.value as number, data.time]),

            },
        ],
    };

Answer 1

Ok so after a few more attempts I found the issue:

• Removing both interval from xAxis
• Referencing each series to its respective axes.

Working now as expected.