echarts折线图有两个y轴时如何区分数据对应哪侧
解决方法
在series中添加yAxisIndex: 1,默认为yAxisIndex: 0,
效果图
option = {
tooltip: {
trigger: 'axis'
},
legend: {
textStyle: {
color: "#fff",
fontSize: '18'
},
right: '5%',
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
},
xAxis: {
type: 'category',
boundaryGap: false,
data: curringTime,
axisLine: {
lineStyle: {
color: '#fff',
}
},
axisLabel: {
interval: xInterval,
textStyle: {
color: '#fff'
},
// margin:文字到x轴的距离
margin: 15
},
axisPointer: {
label: {
// padding: [11, 5, 7],
padding: [0, 0, 10, 0],
margin: 15,
// 移入时的字体大小
fontSize: 12,
backgroundColor: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: '#fff' // 0% 处的颜色
}, {
// offset: 0.9,
offset: 0.86,
/*
0.86 = (文字 + 文字距下边线的距离)/(文字 + 文字距下边线的距离 + 下边线的宽度)
*/
color: '#fff' // 0% 处的颜色
}, {
offset: 0.86,
color: '#33c0cd' // 0% 处的颜色
}, {
offset: 1,
color: '#33c0cd' // 100% 处的颜色
}],
global: false // 缺省为 false
}
}
},
},
yAxis: [{
type: 'value',
name:"温度(℃)",
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: '#fff',
},
},
axisLabel: {
textStyle: {
color: '#fff',
// 默认x轴字体大小
fontSize: 16,
},
//y轴上带的单位
formatter: '{value}'
},
splitLine: {
show: false
}
}, {
type: 'value',
name:'湿度(%)',
position: 'right',
axisTick: {
show: false
},
axisLabel: {
textStyle: {
color: '#fff',
fontSize:16
},
formatter: '{value}'
},
axisLine: {
show: true,
lineStyle: {
color: '#fff'
}
},
splitLine: {
show: false
}
}],
series: [
{
name: '温度',
type: 'line',
data: temperature,
symbolSize: 10
},
{
name: '湿度',
type: 'line',
data: humidity,
yAxisIndex: 1,//对应右侧的y轴
symbolSize: 10
},
{
name: '设定湿度',
type: 'line',
data: setHumidity,
yAxisIndex: 1,//对应右侧的y轴
symbolSize: 10
},
{
name: '设定温度',
type: 'line',
data: setTemperature,
symbolSize: 10
},
]
};