用 echarts 绘制双 x 轴折线图（Multiple x Axes）

1. echarts 在线编辑：点击

2. 参考配置

let colors = ['#5793f3', '#d14a61', '#675bba'];
option = {
    color: colors,
    tooltip: {
        trigger: 'none',
        axisPointer: {
            type: 'cross'
        }
    },
    legend: {
        data:['2015 降水量', '2016 降水量']
    },
    grid: {
        top: 70,
        bottom: 50
    },
    xAxis: [
        {
            type: 'category',
            axisTick: {
                alignWithLabel: true
            },
            axisLine: {
                onZero: false,
                lineStyle: {
                    color: colors[1]
                }
            },
            axisPointer: {
                label: {
                    formatter: function (params) {
                        return '降水量  ' + params.value
                            + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
                    }
                }
            },
            data: ['2016-1', '2016-2', '2016-3', '2016-4', '2016-5', '2016-6', '2016-7', '2016-8', '2016-9', '2016-10', '2016-11', '2016-12']
        },
        {
            type: 'category',
            axisTick: {
                alignWithLabel: true
            },
            axisLine: {
                onZero: false,
                lineStyle: {
                    color: colors[0]
                }
            },
            axisPointer: {
                label: {
                    formatter: function (params) {
                        return '降水量  ' + params.value
                            + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
                    }
                }
            },
            data: ['2015-1', '2015-2', '2015-3', '2015-4', '2015-5', '2015-6', '2015-7', '2015-8', '2015-9', '2015-10', '2015-11', '2015-12']
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: [
        {
            name: '2015 降水量',
            type: 'line',
            xAxisIndex: 1,
            smooth: true,
            data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
        },
        {
            name: '2016 降水量',
            type: 'line',
            smooth: true,
            data: [3.9, 5.9, 11.1, 18.7, 48.3, 69.2, 231.6, 46.6, 55.4, 18.4, 10.3, 0.7]
        }
    ]
};

3. 说明

• color

color 是有默认值的，之所以在这里显式地设置颜色，是因为 color 的默认值只能针对于 series（即曲线的颜色），无法针对坐标轴，这样做可以自定义 series 的同时，也设置了坐标轴的颜色（见 xAxis.axisLine.lineStyle）。这对于双轴的图表有很强的辨识度。

• tooltip.trigger

默认为 item，这里设置为 none，表示没有触发器，是因为已经在 xAxis .axisPointer.label 进行了配置，所以会在坐标轴处显示含有相关数据的标签，因此不必赘余地增加 tooltip 的触发器了。

• tooltip.axisPointer.type

默认是 line，但这样就必须显式地在 xAxis.axisPointer.show、yAxis.axisPointer.show 处设置，而设置为 cross，则会因为 tooltip.axisPointer. axis = 'auto' 这样的默认配置而自动选择类目轴或时间轴（xAxis.type 已经配置为类目轴）。

• legend.data

该数组需要与 series 的 name 保持一致

• xAxis.axisTick.alignWithLabel

由于类目轴  xAxis. boundaryGap 默认为 true，因此类目轴两边会有留白（为了美观），此时的刻度也不再与标签对齐，需要设置 xAxis.axisTick.alignWithLabel 为 true

• xAxis.axisLine.onZero

默认为 true，因此 x 轴总是与 y 轴的 0 刻度对齐，对于双轴是绝对不行的，因为另一个 x 轴需要与 y 轴的顶部对齐，于是这里全部设置为 false。

ps：经过测试，即使这里两边都不设置，也不会有影响，如果都设置成 true，也不会有影响，有可能是因为设置冲突，因此忽略配置。

• xAxis.axisPointer.label

这里使用回调函数的形式进行了设置，之前的 tooltip.trigger 关闭了，就是因此这里自定义的 label，否则 tooltip 会让用户有一些混乱。

• series.xAxisIndex

在单个图表实例中存在多个 x 轴的时候就必须使用这个，否则 echarts 无法辨别 series 对应哪个 x 轴。