用 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 轴。

 

 

你可能感兴趣的:(用 echarts 绘制双 x 轴折线图(Multiple x Axes))