echarts 其他样式 折线 重叠_javascript-eCharts-多个y轴彼此重叠

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

Copy the code I shared above

Paste and replace the code into the textarea in the link I give in No. 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

},

}

],