echarts 双折线图联动问题 - 如何自定义四个Y轴

标签：前端 echarts

需求：

有一组数据，需要在两个折线图间保持联动（鼠标放在任意一个图上，两个折线图两个相同时间的数据都能联动显示），官方的联动表格默认只能显示两个y轴，无法设置4个y轴。

解决方案：

重点在于 yAxis[2] 和 series 中的 yAxisIndex 属性。
yAxis[2] 对应 yAxisIndex = 2 。
由下面代码可以看到，yAxis[2] 对应的 y 轴不会显示，仅用于占一个位置，起到过渡作用（缺少 yAxis[2] 这个空白的 y 轴，会导致下方折线图的 y轴显示不正常，猜测是官方bug），从 yAxis[3] 开始，才是第二个折线图的第一条 y 轴

拿官方示例改造，可复制到官方运行，代码如下：

var timeData = [
    '2009/6/12 2:00', '2009/6/12 3:00', '2009/6/12 4:00', '2009/6/12 5:00', '2009/6/12 6:00', '2009/6/12 7:00', '2009/6/12 8:00', '2009/6/12 9:00', '2009/6/12 10:00', '2009/6/12 11:00', '2009/6/12 12:00', '2009/6/12 13:00', '2009/6/12 14:00', '2009/6/12 15:00', '2009/6/12 16:00', '2009/6/12 17:00', '2009/6/12 18:00', '2009/6/12 19:00', '2009/6/12 20:00', '2009/6/12 21:00']

timeData = timeData.map(function (str) {
    return str.replace('2009/', '');
});

option = {
    title: {
        text: '雨量流量关系图',
        subtext: '数据来自西安兰特水电测控技术有限公司',
        x: 'center'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            animation: false
        }
    },
    legend: {
        data:['流量','降雨量'],
        x: 'left'
    },
    toolbox: {
        feature: {
            dataZoom: {
                yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
        }
    },
    axisPointer: {
        link: {xAxisIndex: 'all'}
    },
    dataZoom: [
        {
            show: true,
            realtime: true,
            start: 30,
            end: 70,
            xAxisIndex: [0, 1]
        },
        {
            type: 'inside',
            realtime: true,
            start: 30,
            end: 70,
            xAxisIndex: [0, 1]
        }
    ],
    grid: [{
        left: 50,
        right: 50,
        height: '35%'
    }, {
        left: 50,
        right: 50,
        top: '55%',
        height: '35%'
    }],
    xAxis : [
        {
            type : 'category',
            boundaryGap : false,
            axisLine: {onZero: true},
            data: timeData
        },
        {
            gridIndex: 1,
            type : 'category',
            boundaryGap : false,
            axisLine: {onZero: true},
            data: timeData,
            position: 'top'
        }
    ],
    yAxis : [
        {
            gridIndex: 0,
            name : '流量1(m^3/s)',
            type : 'value',
            max : 500
        },
        {
            gridIndex: 0,
            name : '流量2(mm)',
            type : 'value',
            inverse: true
        },
        {
            gridIndex: 0,
        },
        {
            gridIndex: 1,
            name : '降雨量1(m^3/s)',
            type : 'value',
            max : 500
        },
        {
            gridIndex: 1,
            name : '降雨量1(m^3/s)',
            type : 'value',
            max : 500
        },
    ],
    series : [
        {
            name:'流量1',
            type:'line',
            xAxisIndex: 0,
            yAxisIndex: 0,
            symbolSize: 8,
            hoverAnimation: false,
            data:[0.97,0.96,0.96,0.95,0.95,0.97,0.96,0.96,0.95,0.95,0.97,0.96,0.96,0.95,0.95,0.97,0.96,0.96,0.95,0.95]
        },
        {
            name:'流量2',
            type:'line',
            xAxisIndex: 0,
            yAxisIndex: 1,
            symbolSize: 8,
            hoverAnimation: false,
            data:[0.97,0.96,0.96,0.95,0.95,0.97,0.96,0.96,0.95,0.95,0.97,0.96,0.96,0.95,0.95,0.97,0.96,0.96,0.95,0.95]
        },
        {
            name:'降雨量3',
            type:'line',
            xAxisIndex: 1,
            yAxisIndex: 3,
            symbolSize: 8,
            hoverAnimation: false,
            data:[0.97,0.96,0.96,0.95,0.95,0.97,0.96,0.96,0.95,0.95,0.97,0.96,0.96,0.95,0.95,0.97,0.96,0.96,0.95,0.95]
        },
        {
            name:'降雨量4',
            type:'line',
            xAxisIndex: 1,
            yAxisIndex: 4,
            symbolSize: 8,
            hoverAnimation: false,
            data:[0.97,0.96,0.96,0.95,0.95,0.97,0.96,0.96,0.95,0.95,0.97,0.96,0.96,0.95,0.95,0.97,0.96,0.96,0.95,0.95]
        }
    ]
};