echarts两个X轴图表

ECharts是一个非常强大的可视化库，支持多种类型的图表，包括双 X 轴图表。下面是一个简单的例子，展示如何绘制一个带有两个 X 轴的图表。

HTML 代码：

<div id="chart" style="width: 600px; height: 400px;"></div>

JavaScript 代码：

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

// 指定图表的配置项和数据
var option = {
    xAxis: [{
        type: 'category',
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    }, {
        type: 'category',
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        gridIndex: 1
    }],
    yAxis: [{
        type: 'value'
    }],
    series: [{
        name: '蒸发量',
        type: 'bar',
        data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6]
    }, {
        name: '降水量',
        type: 'bar',
        data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6]
    }],
    grid: [{
        top: 10,
        left: 60,
        right: 60,
        height: 150
    }, {
        top: 220,
        left: 60,
        right: 60,
        height: 150
    }]
};

// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);

在上面的代码中，我们使用了两个 X 轴，分别是第一个和第二个 xAxis。第一个 xAxis 的数据是 ['周一', '周二', '周三', '周四', '周五', '周六', '周日']，第二个 xAxis 也是相同的数据。第二个 xAxis 的 gridIndex 属性被设置为 1，表示该 X 轴对应的是第二个 grid。同时，我们还设置了两个 grid，分别对应两个 X 轴所在的位置。

最终的效果是一个带有两个 X 轴的图表，其中第一个 X 轴对应的是第一个 grid，第二个 X 轴对应的是第二个 grid。