axisLabel of yAxis not bind with yAxis position .
1. when set axisLine.onZero = false, the yAxis is left, works well.
2.when set onZero = true, yAxis is in xAxis 0 label, but the yAxisLabel is on the left.
3. when set yAxis.offset, only works in fixed width, not works well when window resize.
4. yAxis.position only can be set 'left' or 'right', is 'center' ok?
I want to set onZero true, the yAxis is on xAxis 0 label ,and the yAxisLabel still in center.
配置项如下
const data1 = [[-12, 0], [-10, 3], [-8, 5], [-6, 10], [-4, 60], [-2, 99], [0, 100],
[2, 100], [4, 93], [6, 85], [8, 10], [10, 6], [12, 0] ];
const data2 = [[-12, 1], [-10, 2], [-8, 6], [-6, 15], [-4, 70], [-2, 95], [0, 110],
[2, 100], [4, 90], [6, 80], [8, 20], [10, 4], [12, 0] ];
option = {
title: {
text: 'Inline Dose ',
left: 'center'
},
tooltip: {
trigger: 'axis'
},
legend: {
orient: 'vertical',
right: '1%',
padding: [5, 0, 5, 5],
data: ['measurement', 'calculation'],
textStyle: {
fontSize: 16,
},
align: 'left'
},
grid: {
left: '10%',
right: '12%',
show: false,
borderColor: 'red',
},
xAxis: [
{
name: 'Off Axis Distance (cm)',
nameLocation: 'middle',
nameGap: '30',
type: 'value',
boundaryGap: false,
nameTextStyle: {
color: 'red',
fontStyle: 'italic',
fontWeight: 'bold',
fontSize: 16
},
splitNumber: 12,
splitLine: {
show: false,
}
}
],
yAxis: [
{
name: 'Relative dose (%)',
nameLocation: 'middle',
nameGap: '45',
nameTextStyle: {
color: 'red',
fontStyle: 'normal',
fontWeight: 'bold',
fontSize: 16
},
boundaryGap: true,
type: 'value',
// position: 'left', // y轴位置
// offset: -500, // y轴偏移量
splitNumber: 10,
axisLabel: {
show: true,
margin: 8,
showMinLabel: false,
formatter: '{value} %'
},
axisLine: {
show: true,
// onZero: false,
onZero: true, // 固定在x轴0刻度上
symbol: ['none', 'arrow'],
symbolOffset: [0, 10],
},
axisPointer: {
show: false,
},
splitLine: {
show: false,
}
}
],
series: [{
name: 'measurement',
type: 'line',
data: data1,
animationDelay: function (idx) {
return idx * 10;
}
}, {
name: 'calculation',
type: 'line',
data: data2,
animationDelay: function (idx) {
return idx * 10 + 100;
}
}],
animationEasing: 'elasticOut',
animationDelayUpdate: function (idx) {
return idx * 5;
}
};