ECharts 水平坐标轴二级刻度的实现

前言

最近使用ECharts（官网：https://www.echartsjs.com）做一些图表，需要在X轴上实现二级坐标轴。
查询官网后，发现其并不支持二级坐标轴，但是支持创建多个坐标轴，于是尝试通过多个坐标轴实现该需求。

实现过程

在官网实例中，找了一个简单的柱状图实例，进行修改。首先在实例的基础上添加一个水平坐标轴：

   var option = {
        title: {
            text: '二级坐标示例'
        },
        tooltip: {},
        legend: {
            data:['测试数据']
        },
        xAxis: [
            {
                data: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"]
            } ,
            //以下是添加的第二个坐标轴
            {
                position: 'bottom', //坐标轴的位置，位于底部
                axisLabel: {
                    margin: 30 //文字与坐标轴的间隔
                },
                axisTick: {
                    length: 45 //刻度的长度
                },
                data: ["一季度","二季度","三季度","四季度"]
            }
        ],
        yAxis: {},
        series: [{
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20,15, 25, 36, 15, 10, 20]
        }]
    };

效果如下：

基本满足需求。