请问是否支持多grid多yAxis的图表?

[zhyt0520]

One-line summary [问题简述]

折线图，单个图是多纵坐标的，我想把多个图放到一起，像这样
grid:[
    {/*grid 0*/},
    {/*grid 1*/},
],
xAxis:[
    {gridIndex:0,},
    {gridIndex:1,},
],
yAxis:[
    {gridIndex:0,},
    {gridIndex:0,},
    {gridIndex:1,},
    {gridIndex:1,},
],
我尝试了多次一直失败，报错：
xAxis and yAxis must use the same grid
我想知道目前的版本是否支持此功能，或者是否有其他的方法可以实现

Version & Environment [版本及环境]

• ECharts version [ECharts 版本]: 3.6.2
• Browser version [浏览器类型和版本]: chrome 60.0.3112.90
• OS Version [操作系统类型和版本]: win 7

Expected behaviour [期望结果]

期望多grid里面的单图可以有多个纵坐标

ECharts option [ECharts配置项]

option = {

}

Other comments [其他信息]

[lsy9202]

遇到了同样问题。

option = {
grid:[{
height:"40%"
},{
height:"40%",
bottom:"20px"
}],
xAxis: [{
type: 'category',
gridIndex:0,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},{
type: 'category',
gridIndex:1,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
}],
yAxis: [{
type: 'value',
gridIndex:0
},{
type:'value',
gridIndex:0,
position:'right'
},{
type: 'value',
gridIndex:1
},{
type:'value',
gridIndex:1,
position:'right'
}],
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
xAxisIndex:0,
yAxisIndex:0
},{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
xAxisIndex:1,
yAxisIndex:1
}]
};

[100pah]

支持，配置正确即可。

[lsy9202]

已解决。
xAxis和yAxis的数量与gridIndex都一致就ok了。
感谢。

[junfalin]

已解决。
xAxis和yAxis的数量与gridIndex都一致就ok了。
感谢。
请问右边两个Y轴要怎么引用，我的数据渲染都是对应左边Y轴上的值，需要加什么吗？

option = {

tooltip: {
    trigger: 'item'
},

xAxis: [{ //上面横轴
        axisLine: {

        },
        splitLine: {
            show: true,
            lineStyle: {
                type: 'dotted'
            }
        },
        axisLabel: {
            show: false,
        },
        axisTick: {
            show: false
        },
        data: []

    },
    { //下层横轴
        data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
        splitLine: {
            show: true,
            lineStyle: {
                type: 'dotted'
            }
        },
        gridIndex: 1,
        axisLabel: {


        }

    }
],
yAxis: [{
        //左上y轴

        position: 'left',

        axisLabel: {
            margin: -25,
            color: function(value) {
                if (value < 0) {
                    return 'green';
                }
                if (value > 0) {
                    return 'red';
                }
                return 'black';

            },
        },
        axisTick: {
            show: false
        },

        splitLine: {
            show: true,
            lineStyle: {
                type: 'dotted'
            }
        },
    },

    { //左下y轴

        axisLabel: {
            color: 'green',
            show: true,
            margin: -25,
        },
        axisTick: {
            show: false
        },
        splitLine: {
            show: true,
            lineStyle: {
                type: 'dotted'
            }
        },
        gridIndex: 1
    },


    { //右上轴
        splitLine: {
            show: false
        },
        position: 'right',
        min: -1.01,
        max: 1.01,
        axisTick: {
            show: false
        },
        axisLabel: {
            align: 'right',
            margin: -5,
            formatter: '{value} %',
            color: function(value) {
                if (value < 0) {
                    return 'green';
                }
                if (value > 0) {
                    return 'red';
                }
                return 'black';

            },
        }
    },

    { //右下y轴
        splitLine: {
            show: false
        },
        position: 'right',
        min: 84,
        max: 930,
        axisTick: {
            show: false
        },
        axisLabel: {
            margin: -25,
            color: 'green'
        },
        gridIndex: '1'

    }
],
grid: [{
    bottom: '50%'
}, {
    top: '50%'
}],
series: [{
    //左上 面积图
    type: 'line',
    areaStyle: {},
    showSymbol: false,
    data: [11, 22, 33, 44, 55, 66, 77]
}, { //右上  百分比
    type: 'line',
    showSymbol: false,
    data: [1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, -0.5]
}, {
    //右下坐标数据  柱形图
    type: 'bar',
    showSymbol: false,
    data: [30, 40, 80, 60, 70, 70, 60, 600],
    xAxisIndex: '1',
    yAxisIndex: '1'
}, {
    //左下数据
    type: 'line',
    showSymbol: false,
    data: [56, 78, 95, 100, 120, 130, 140, 200, 20],
    xAxisIndex: '1',
    yAxisIndex: '1'
}]

};

[junfalin]

已解决。
xAxis和yAxis的数量与gridIndex都一致就ok了。
感谢。
请问右边两个Y轴要怎么引用，我的数据渲染都是对应左边Y轴上的值，需要加什么吗？

option = {

tooltip: {
    trigger: 'item'
},

xAxis: [{ //上面横轴
        axisLine: {

        },
        splitLine: {
            show: true,
            lineStyle: {
                type: 'dotted'
            }
        },
        axisLabel: {
            show: false,
        },
        axisTick: {
            show: false
        },
        data: []

    },
    { //下层横轴
        data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
        splitLine: {
            show: true,
            lineStyle: {
                type: 'dotted'
            }
        },
        gridIndex: 1,
        axisLabel: {


        }

    }
],
yAxis: [{
        //左上y轴

        position: 'left',

        axisLabel: {
            margin: -25,
            color: function(value) {
                if (value < 0) {
                    return 'green';
                }
                if (value > 0) {
                    return 'red';
                }
                return 'black';

            },
        },
        axisTick: {
            show: false
        },

        splitLine: {
            show: true,
            lineStyle: {
                type: 'dotted'
            }
        },
    },

    { //左下y轴

        axisLabel: {
            color: 'green',
            show: true,
            margin: -25,
        },
        axisTick: {
            show: false
        },
        splitLine: {
            show: true,
            lineStyle: {
                type: 'dotted'
            }
        },
        gridIndex: 1
    },


    { //右上轴
        splitLine: {
            show: false
        },
        position: 'right',
        min: -1.01,
        max: 1.01,
        axisTick: {
            show: false
        },
        axisLabel: {
            align: 'right',
            margin: -5,
            formatter: '{value} %',
            color: function(value) {
                if (value < 0) {
                    return 'green';
                }
                if (value > 0) {
                    return 'red';
                }
                return 'black';

            },
        }
    },

    { //右下y轴
        splitLine: {
            show: false
        },
        position: 'right',
        min: 84,
        max: 930,
        axisTick: {
            show: false
        },
        axisLabel: {
            margin: -25,
            color: 'green'
        },
        gridIndex: '1'

    }
],
grid: [{
    bottom: '50%'
}, {
    top: '50%'
}],
series: [{
    //左上 面积图
    type: 'line',
    areaStyle: {},
    showSymbol: false,
    data: [11, 22, 33, 44, 55, 66, 77]
}, { //右上  百分比
    type: 'line',
    showSymbol: false,
    data: [1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, -0.5]
}, {
    //右下坐标数据  柱形图
    type: 'bar',
    showSymbol: false,
    data: [30, 40, 80, 60, 70, 70, 60, 600],
    xAxisIndex: '1',
    yAxisIndex: '1'
}, {
    //左下数据
    type: 'line',
    showSymbol: false,
    data: [56, 78, 95, 100, 120, 130, 140, 200, 20],
    xAxisIndex: '1',
    yAxisIndex: '1'
}]

};

已解决，在声明yaxis是所对应的顺序为0,1,2,3.
series中渲染时{xAxisIndex: '0',
yAxisIndex: '0'}
{xAxisIndex: '1',
yAxisIndex: '1'}
{xAxisIndex: '0',
yAxisIndex: '2'}
{xAxisIndex: '1',
yAxisIndex: '3'}