echarts多重横坐标怎么上下分开

要在echarts中实现多重横坐标的上下分开，可以使用grid组件和axis组件来实现。

首先，使用grid组件将图表分割成多个区域。可以通过设置grid组件的top、bottom、left和right属性来控制每个区域的位置和大小。

然后，在每个区域中使用axis组件来设置横坐标。可以通过设置axis组件的gridIndex属性来指定该坐标轴属于哪个区域。

以下是一个示例代码，演示了如何实现多重横坐标的上下分开：

// 初始化echarts实例
var myChart = echarts.init(document.getElementById('chart'));

// 设置grid组件
var grid = [
  { top: '10%', bottom: '40%' },
  { top: '50%', bottom: '10%' }
];

// 设置横坐标
var xAxis = [
  { type: 'category', gridIndex: 0, data: ['A', 'B', 'C'] },
  { type: 'category', gridIndex: 1, data: ['X', 'Y', 'Z'] }
];

// 设置纵坐标
var yAxis = [{ type: 'value' }];

// 设置系列数据
var series = [
  { type: 'bar', data: [100, 200, 300], xAxisIndex: 0, yAxisIndex: 0 },
  { type: 'line', data: [300, 200, 100], xAxisIndex: 1, yAxisIndex: 0 }
];

// 配置项
var option = {
  grid: grid,
  xAxis: xAxis,
  yAxis: yAxis,
  series: series
};

// 使用配置项显示图表
myChart.setOption(option);

在上面的示例代码中，我们创建了一个echarts实例，并设置了grid组件、横坐标、纵坐标和系列数据。然后使用配置项option来显示图表。