多图折线图

描述:当前是关于Echarts图表中的 折线图 示例。
 
            //var colors = ['orange', '#d14a61', '#1E90FF'];
option = {
    backgroundColor: '#ffffff',
    title: [{
        text: '',
        left: '28%',
        top: '1%',
        textAlign: 'center'
    }, {
        text: '',
        left: '28%',
        top: '34%',
        textAlign: 'center'
    }, {
        text: '',
        left: '28%',
        top: '66%',
        textAlign: 'center'
    }],
    tooltip: {
        trigger: 'axis'
    },
    grid: [{
        show: false,
        left: '5%',
        top: '5%',
        containLabel: true,
        width: '100%',
        height: '33%'
    }, {
        show: false,
        left: '2%',
        top: '35%',
        containLabel: true,
        width: '100%',
        height: '33%'
    }, {
        show: false,
        left: '5%',
        top: '68%',
        containLabel: true,
        width: '100%',
        height: '33%'
    }],
    // legend: [{
    //   data:['各幅值区间暂降频次', '暂降频次2'],
    //   x:'right',
    // },{data:['暂降频次3', '暂降频次4'],
    //      x:'right',
    // }],
    xAxis: [{
        gridIndex: 0,
        type: 'category',
        name: '暂降幅值区间',
        nameLocation: 'center',
        nameGap: '30',
        nameTextStyle: {
            fontSize: 16
        },
        //axisLabel:{  
        //             interval:0,//横轴信息全部显示  
        //            rotate:-30,//-30度角倾斜显示  
        //       }  ,
        axisTick: {
            alignWithLabel: true
        },
        data: ['0~10%', '10%~20%', '20%~30%', '30%~40%', '40%~50%', '50%~60%', '60%~70%', '70%~80%', '80%~90%', ]
    }, {
        gridIndex: 1,
        type: 'category',
        name: '暂降幅值',
        nameLocation: 'center',
        nameGap: '30',
        nameTextStyle: {
            fontSize: 16
        },
        boundaryGap: false,
        //axisLabel:{  
        //             interval:0,//横轴信息全部显示  
        //            rotate:-30,//-30度角倾斜显示  
        //       }  ,
        axisTick: {
            alignWithLabel: true
        },
        data: ['0', '10%', '20%', '30%', '40%', '50%', '60%', '70%', '80%', '90%']
    }, {
        gridIndex: 2,
        type: 'category',
        //axisLabel:{  
        //         interval:0,//横轴信息全部显示  
        //         rotate:-30,//-30度角倾斜显示  
        //   }  ,
        name: '暂降持续时间(s)',
        nameLocation: 'center',
        nameGap: '30',
        nameTextStyle: {
            fontSize: 16
        },
        axisTick: {
            alignWithLabel: true
        },
        data: ['0~0.1', '0.1~0.25', '0.25~0.5', '0.5~1', '>1']

    }],
    yAxis: [{
        gridIndex: 0,
        type: 'value',
        name: '暂降频次(次/年)',
        nameLocation: 'center',
        nameGap: '30',
        nameTextStyle: {
            fontSize: 16
        },
        axisLine: {
            lineStyle: {
                //color: colors[1]
            }
        },
        splitLine: {
            show: false
        }
    }, {
        gridIndex: 1,
        type: 'value',
        name: '概率分布',
        nameLocation: 'center',
        nameGap: '40',
        nameTextStyle: {
            fontSize: 16
        },
        axisLabel: {
            show: true,
            interval: 'auto',
            formatter: '{value} %'
        },
        //position: 'right',
        axisLine: {
            lineStyle: {
                //color: colors[0]
            }
        },
        splitLine: {
            show: false
        }
    }, {
        gridIndex: 2,
        type: 'value',
        name: '暂降频次(次/年)',
        nameLocation: 'center',
        nameGap: '30',
        nameTextStyle: {
            fontSize: 16
        },
        axisLine: {
            lineStyle: {
                //color: colors[0]
            }
        },
        splitLine: {
            show: false
        },
        position: 'left'
    }],
    series: [{
            name: '暂降幅值与暂降频次',
            type: 'line',
            xAxisIndex: 0,
            yAxisIndex: 0,
            label: {
                normal: {
                    show: true,
                    position: 'top',

                }
            },
            data: [3.5, 0.7, 0.6, 1.4, 1.8, 3, 5, 9.5, 24.6]
        },{
            name: '暂降幅值与暂降频次',
            type: 'line',
            xAxisIndex: 0,
            yAxisIndex: 0,
            label: {
                normal: {
                    show: true,
                    position: 'top',

                }
            },
            data: [4, 1.7,1.6, 2.4, 2.8, 3.8, 6, 10, 25.6]
        }, {

            name: '暂降幅值概率分布',
            type: 'line',
            smooth: true,
            barWidth: 25,
            xAxisIndex: 1,
            yAxisIndex: 1,
            symbolSize: 8, //拐点大小
            label: {
                normal: {
                    show: true,
                    position: 'top',
                    color: '#FAD860',
                }
            },
            lineStyle: {
                normal: {
                    width: 4,
                    color: '#FAD860'
                }
            },

            data: [0, 7, 8.4, 9.6, 12.4, 16, 22, 31.9, 50.9, 100]
        },{

            name: '暂降幅值概率分布',
            type: 'line',
            smooth: true,
            barWidth: 25,
            xAxisIndex: 1,
            yAxisIndex: 1,
            symbolSize: 8, //拐点大小
            label: {
                normal: {
                    show: true,
                    position: 'top',
                    color: '#FAD860',
                }
            },
            lineStyle: {
                normal: {
                    width: 4,
                    color: '#FAD860'
                }
            },

            data: [0, 17, 18.4, 29.6, 32.4, 26, 32, 41.9, 58.9, 110]
        }, {

            name: '持续时间与暂降频次',
            type: 'line',
            xAxisIndex: 2,
            yAxisIndex: 2,
            label: {
                normal: {
                    show: true,
                    position: 'top',
                }
            },

            data: [36.1, 5.4, 2.4, 1, 5.2]
        }, {

            name: '持续时间与暂降频次',
            type: 'line',
            xAxisIndex: 2,
            yAxisIndex: 2,
            label: {
                normal: {
                    show: true,
                    position: 'top',
                }
            },

            data: [46.1, 15.4, 12.4, 11, 15.2]
        }
    ]
};