坐标轴名称的位置,随着名称长度、坐标轴最值长度的变化,属实难以控制,所以尝试使用title取代:
option = {
title: [{
text: "单位:左边一个坐标轴名称",
left: "18px",
top: 0,
textStyle: {
color: "#999",
fontSize: 12,
fontWeight: '400'
}
}, {
text: "单位:右边一个坐标轴名称",
right: "18px",
top: 0,
textStyle: {
color: "#999",
fontSize: 12,
fontWeight: '400'
}
}],
grid: {
left: '25',
right: '25',
bottom: '24',
top: '75',
containLabel: true
},
xAxis: {
type: 'category',
data: ['01-01', '01-02', '01-03', '01-04', '01-05', '01-06', '01-07'],
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: false
},
},
yAxis: [{
type: 'value',
axisLabel: {
color: '#999',
textStyle: {
fontSize: 12
},
},
splitLine: {
show: true,
lineStyle: {
color: '#F3F4F4'
}
},
axisTick: {
show: false
},
axisLine: {
show: false
},
}, {
type: 'value',
axisLabel: {
color: '#999',
textStyle: {
fontSize: 12
},
},
splitLine: {
show: true,
lineStyle: {
color: '#F3F4F4'
}
},
axisTick: {
show: false
},
axisLine: {
show: false
},
}],
series: [{
name: '订单总数',
type: 'line',
smooth: true,
data: [3, 2, 4, 4, 5, 3, 8],
yAxisIndex: 0,
},
{
name: '消费金额',
type: 'line',
smooth: true,
data: [999, 54, 34, 2222, 32225, 1111],
yAxisIndex: 1,
}
]
};
很完美(神奇的title,很多场景都可以用title处理):