ECharts双X轴图表中，第二个X轴标签不显示是常见问题。本文提供解决方案，并附带代码示例。
在性能分析图等应用中，配置双X轴后，第二个X轴的标签可能无法显示，仅显示轴线。这是由于配置不当导致的。
以下为问题代码示例：
xaxis: [{
name:'1',
min: starttime,
scale: true,
axisline: {
show: true,
linestyle: {
color: colors[2]
}
},
axislabel: {
backgroundcolor:'red',
formatter: '{value} ml'
}
},{
name:'2',
axisline: {
show: true,
linestyle: {
color: colors[2]
}
},
min: starttime,
scale: true,
axislabel: {
backgroundcolor:'red',
inside:true,
show:true,
hideoverlap:true,
// formatter: '111ml'
}
},],
代码中已定义两个X轴，但第二个X轴标签仍不显示。
解决方法：在series配置中，为每个series都设置数据，并为第二个series添加xAxisIndex: 1属性，指定其关联的X轴。
修改后的代码：
series: [
{
type: 'custom',
renderItem: renderItem,
itemStyle: {
opacity: 0.8
},
encode: {
x: [1, 2],
y: 0
},
data: data
},
{
type: 'custom',
renderItem: renderItem,
xAxisIndex: 1,
itemStyle: {
opacity: 0.8
},
encode: {
x: [1, 2],
y: 0
},
data: data
}
]
通过此配置，第二个X轴标签将显示在图表上方。虽然此方法可能导致重复渲染，但能有效解决标签不显示的问题。目前暂未找到更优方案避免重复渲染，欢迎各位提供更好的解决方法。
