实现以下效果:
上代码:
option: {
grid: [
{ top: '10%', bottom: '55%', left: '6%', right: '8%' },
{ top: '45%', bottom: '10%', left: '6%', right: '8%' }
],
legend: {
show: true
},
xAxis: [
{
type: 'category',
gridIndex: 0, // 指定使用第一个网格
data: [2,3,4,5,6,7,8,9,10,11,12,13,14,15,16],
axisLabel: {
show: false // 不显示 x 轴标签
},
axisLine: {
show: false,
onZero: true
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed'
}
},
axisTick: {
alignWithLabel: true
},
boundaryGap: false // 设置为 false,确保刻度标签和刻度线对齐
},
{
type: 'category',
gridIndex: 1, // 指定使用第二个网格
name: '压差/MPa',
nameLocation: 'middle',
axisLine: {
lineStyle: {
color: '#000000',
},
onZero: true
},
axisLabel: {
color: '#000000'
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed'
}
},
axisTick: {
// show: true,
alignWithLabel: true
},
boundaryGap: false, // 设置为 false,确保刻度标签和刻度线对齐
nameGap: 20,
data: [2,3,4,5,6,7,8,9,10,11,12,13,14,15,16],
}
],
yAxis: [
{
type: 'value',
gridIndex: 0,
name: '流量',
nameLocation: 'middle', // Y 轴名称显示位置
nameRotate: 90, // Y轴名称旋转角度
nameGap: 30,
min: 4,
max: 7,
interval: 0.5,
position: 'left',
axisLine: {
show: true
},
splitLine: {
lineStyle: {
type: 'dashed' //设置网格线类型 dotted:虚线 solid:实线
},
show: true
},
axisLabel: {
showMinLabel: false, // 不显示最小刻度标签
color: '#000000',
},
nameTextStyle: {
color: '#000000'
}
},
{
type: 'value',
gridIndex: 0,
name: '效率/%',
nameLocation: 'middle', // Y 轴名称显示位置
nameRotate: 90, // Y轴名称旋转角度
nameGap: 35,
// offset: 7, // 手动调整位置,使得两个右侧 Y 轴对齐
min: 0.1,
max: 0.7,
interval: 0.1,
position: 'right',
axisLine: {
show: true
},
splitLine: {
show: false
},
axisLabel: {
showMinLabel: false, // 不显示最小刻度标签
color: '#000000'
},
nameTextStyle: {
color: '#000000'
}
},
{
type: 'value',
gridIndex: 1,
name: '电流/A',
nameLocation: 'middle', // Y 轴名称显示位置
nameRotate: 90, // Y轴名称旋转角度
nameGap: 30,
min: 6.5,
max: 10,
interval: 0.5,
position: 'left',
axisLine: {
show: true
},
splitLine: {
lineStyle: {
type: 'dashed' //设置网格线类型 dotted:虚线 solid:实线
},
show: true
},
axisLabel: {
showMinLabel: false, // 不显示最小刻度标签
showMaxLabel: false,
color: '#000000',
},
nameTextStyle: {
color: '#000000'
}
},
{
type: 'value',
gridIndex: 1,
name: '功率/KW',
nameLocation: 'middle', // Y 轴名称显示位置
nameRotate: 90, // Y轴名称旋转角度
nameGap: 35,
// offset: 10, // 手动调整位置,使得两个右侧 Y 轴对齐
min: 1.4,
max: 2.4,
interval: 0.2,
position: 'right',
axisLine: {
show: true
},
splitLine: {
show: false
},
axisLabel: {
showMaxLabel: false, // 不显示最小刻度标签
color: '#000000'
},
nameTextStyle: {
color: '#000000'
}
}
],
series: [
{
name: '流量点',
type: 'line',
xAxisIndex: 0,
yAxisIndex: 0,
data: [[0, 7], [2, 6.4], [6, 5.7], [10, 5], [14, 4]],
smooth: true
},
{
name: '电流点',
type: 'line',
xAxisIndex: 1,
yAxisIndex: 2,
data: [[0, 6.5], [2, 6.9], [6, 7.7], [10, 9], [14, 10]],
smooth: true
},
{
name: '效率点',
type: 'line',
xAxisIndex: 0, // 使用第二个 x 轴
yAxisIndex: 1,
data: [[0, 0.1], [2, 0.3], [6, 0.5], [10, 0.7], [14, 0.65]],
smooth: true
},
{
name: '功率点',
type: 'line',
xAxisIndex: 1, // 使用第二个 x 轴
yAxisIndex: 3,
data: [[0, 1.4], [2, 1.6], [6, 1.9], [10, 2.2], [14, 2.3]],
smooth: true
}
]
}