echarts有两条x轴如何使用同一个Y轴不同的x轴创建折线柱状图完整案例数据

可以使用 echarts 的多个坐标系（option.xAxisIndex 和 option.yAxisIndex），将两个 x 轴分别放在两个不同的坐标系中，通过设置 option.series[i].xAxisIndex 和 option.series[i].yAxisIndex 来指定每个系列使用哪个坐标系。示例代码如下：

option = {
    xAxis: [{
        type: 'category',
        data: ['A', 'B', 'C', 'D', 'E']
    }, {
        type: 'category',
        data: ['a', 'b', 'c', 'd', 'e']
    }],
    yAxis: [{
        type: 'value'
    }],
    series: [{
        name: '折线图',
        type: 'line',
        data: [3, 5, 1, 7, 2],
        xAxisIndex: 0,  // 使用第一个 x 轴
        yAxisIndex: 0   // 使用第一个 y 轴
    }, {
        name: '柱状图',
        type: 'bar',
        data: [4, 2, 6, 3, 1],
        xAxisIndex: 1,  // 使用第二个 x 轴
        yAxisIndex: 0   // 使用第一个 y 轴
    }]
};

// 使用下面的代码在一个 div 容器中渲染上面定义的 echarts 图表
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);

在渲染出的图表中，第一个系列使用第一个 x 轴，第二个系列使用第二个 x 轴，但它们都使用同一个 y 轴。这样就实现了两条 x 轴同时存在但分别对应不同数据的效果。