Echarts图表中使用了两个数据集，但第二个x轴标签未显示出来。

Question

我有一个带有2个数据集的eCharts图表，我想展示2个x轴，一个在图表顶部，另一个在底部。 我必须缺少一些配置设置，因为我无法弄清楚如何显示第二个x轴标签。 第一个x轴正确显示，但第二个x轴只显示轴名称，没有刻度标签。

请参见附带的屏幕截图以进行视觉参考。

第二个x轴缺少标签

我尝试了多个设置，但没有成功，这是我的图表选项：

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]),

            },
        ],
    };

- F C

Answer 1

好的，经过几次尝试，我找到了问题所在：

• 从xAxis中删除两个interval
• 将每个series引用到其各自的轴上。

现在按预期工作。

- F C