javascript - eCharts - multiple y-axis overlapping each other

Question

I use eCharts javascript plugin to create a line chart ....

As you can see in the picture I attached below, the y-axis is overlapping each other.

And this is the option I use

var colors = ['#5793f3', '#d14a61', '#675bba'];

var option = {
    title: {
        text: 'Wi-Fi Users & Bandwidth Usage by Day & Month Summary'
    },
    tooltip: {
        trigger: 'axis',
        formatter: function (params) {
            params = params[0];
            var date = new Date(params.name);
            return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1];
        },
        axisPointer: {
            animation: false
        }
    },
    grid: {
        left: '20%',
        top: '20%',
        right: '16%'
    },
    legend: {
        data:['Wi-Fi Users','Bandwidth Usage'],
        top:40
    },
    xAxis: {
        name: 'Hours\nDate: 23/11/2017',
        type: 'value',
        splitLine: {
            show: false
        },
        min:0,
        max:24,
        splitNumber: 24
    },
    yAxis: [{
            type: 'value',
            name: "Bandwidth\nUsage",
            min: 0,
            max: 50,
            splitLine: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: colors[2],
                }
            },
            axisLabel: {
                formatter: '{value} Mbps'
            }
        },
        {
            type: 'value',
            name: "Wi-Fi\nUsers",
            min: 0,
            max: 500,
            position: 'left',
            offset:90,
            splitLine: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: colors[1],
                }
            },
        }
    ],
    series: [{
        name: 'Wi-Fi Users',
        type: 'line',
        showSymbol: false,
        hoverAnimation: true,
        yAxisIndex: 1,
        data: [[0,50],[5,30],[6.523,50],[12,100],[13,250],[15,200],[18,180]]
    },{
        name: 'Bandwidth Usage',
        type: 'line',
        showSymbol: false,
        hoverAnimation: true,
        data: [[0,50],[5,30],[6,50],[12,100],[13,250],[15,200],[18,180]]
    }]
};

So, I don't want the y-axis to overlap each other. The red y-axis should be on the left. And the blue one is in correct position.

If you want to test my code on snippet

1. Open this site https://ecomfe.github.io/echarts-examples/public/editor.html?c=bubble-gradient
2. Copy the code I shared above
3. Paste and replace the code into the textarea in the link I give in No. 1

Answer 1

I just solved my problem by adding

onZero: 0,

in axisLine

so the code on y-axis should be

yAxis: [{
        type: 'value',
        name: "Bandwidth\nUsage",
        min: 0,
        max: 50,
        splitLine: {
            show: false
        },
        axisLine: {
            lineStyle: {
                color: colors[2],
            }
        },
        axisLabel: {
            formatter: '{value} Mbps'
        }
    },
    {
        type: 'value',
        name: "Wi-Fi\nUsers",
        min: 0,
        max: 500,
        position: 'left',
        offset:90,
        splitLine: {
            show: false
        },
        axisLine: {
            lineStyle: {
                color: colors[1],
            },
            onZero: 0,  //add this code
        },
    }
],

You can find more detail about the attribute on their website https://ecomfe.github.io/echarts-doc/public/en/option.html#yAxis