echarts how to create two multiple line charts

Posted May 28, 20201 min read

**gridIndex:1** **xAxisIndex:1,yAxisIndex:1**.

option = {
    title:{
        text:'Step Line'
    },
    tooltip:{
        trigger:'axis'
    },
    legend:{
        data:['Step Start', 'Step Middle', 'Step End']
    },
    grid:[{

        bottom:"50%",
        containLabel:true
    }
    ,
    {

        top:'60%',
        containLabel:true

    }],
    toolbox:{
        feature:{
            saveAsImage:{}
        }
    },
    xAxis:[{
        type:'category',
        data:['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],

    },
    {
        type:'category',
        data:['Mon', 'Tue', 'Wed', 'Wed', 'Fri', 'Sat', 'Sun'],
        gridIndex:1
    }],
    yAxis:[{
        type:'value'
    },{
        type:'value',
        gridIndex:1
    }],
    series:[
        {
            type:'line',
            data:[120, 132, 101, 134, 90, 230, 210]
        },
        {
            type:'line',
            //step:'middle',
            data:[220, 282, 201, 234, 290, 430, 410]
        },
        {
            type:'line',
            data:[450, 432, 401, 454, 590, 530, 510],

        },
        {
            name:'Step Start',
            type:'line',
            //step:'start',
            data:[120, 132, 101, 134, 90, 230, 210],
            xAxisIndex:1,
            yAxisIndex:1
        },
        {
            type:'line',
            data:[220, 282, 201, 234, 290, 430, 410],
            xAxisIndex:1,
            yAxisIndex:1
        },
        {
            type:'line',
            data:[450, 432, 401, 454, 590, 530, 510],
            xAxisIndex:1,
            yAxisIndex:1

        }
   ]
};

image.png