我使用eCharts javascript 插件来创建折线图....
正如您在下面附上的图片中看到的那样,y 轴彼此重叠。
这是我使用的选项
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]]
}]
};
所以,我不希望 y 轴相互重叠。红色的 y 轴应该在左边。蓝色的位置正确。
如果你想在片段上测试我的代码
- 打开这个网站https://ecomfe.github.io/echarts-examples/public/editor.html?c=bubble-gradient
- 复制我上面分享的代码
- 将代码粘贴并替换到我在第 1 号给出的链接中的文本区域中