[Feature] support for legend text alignment and relative axis offset

### What problem does this feature solve?

i am currnently working with multiple axis and want to limit the legend left and right parts so that it does not clash with the left axis label and right axis labels

also, the legend content should always be centered

i guess those 2 needs to be implemented to achieve this

1. currently the axis.offset property only accepts absolute values, this is not consistent with the rest, and should accept also percent values.
2. once the left: 0 positioning of the legend is fixed, there is no way to ask echarts to horizontally align the legend content.

### What does the proposed API look like?

const colors = ['#5470C6', '#91CC75', '#EE6666'];
option = {
color: colors,
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
grid: {
right: '20%'
},
toolbox: {
feature: {
dataView: { show: true, readOnly: false },
restore: { show: true },
saveAsImage: { show: true }
}
},
legend: {
data: ['Evaporation', 'Precipitssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssslsation', 'Temperature',"asdasdasd","asdasdasd","asdasdasd","asdasdasd","asdasdasd","asdasdasd","asdasdasd","asdasdasd"],
left: 100,
top: 20,
right: 200,
// width: 200,
orient: 'horizontal',
align: "left",
textAlign: 'center',
// selectorLabel:{align:"center"}
},
xAxis: [
{
type: 'category',
axisTick: {
alignWithLabel: true
},
// prettier-ignore
data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
}
],
yAxis: [
{
type: 'value',
name: 'Evaporation',
position: 'right',
alignTicks: true,
axisLine: {
show: true,
lineStyle: {
color: colors[0]
}
},
axisLabel: {
formatter: '{value} ml'
}
},
{
type: 'value',
name: 'Precipitation',
position: 'right',
alignTicks: true,
offset: 80,
axisLine: {
show: true,
lineStyle: {
color: colors[1]
}
},
axisLabel: {
formatter: '{value} ml'
}
},
{
type: 'value',
name: '温度',
position: 'left',
alignTicks: true,
axisLine: {
show: true,
lineStyle: {
color: colors[2]
}
},
axisLabel: {
formatter: '{value} °C'
}
}
],
series: [
{
name: 'Evaporation',
type: 'bar',
data: [
2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
]
},
{
name: 'Precipitssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssslsation',
type: 'bar',
yAxisIndex: 1,
data: [
2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
]
},
{
name: 'Temperature',
type: 'line',
yAxisIndex: 2,
data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
}
]
};