[Bug] Not possible to customize triggerOn component on multiple axisPointers that are on the same axis

### Version

5.6.0

### Link to Minimal Reproduction

https://codesandbox.io/p/sandbox/multiple-x-axes-forked-l3vnrw?file=%2Findex.js

### Steps to Reproduce

Create 2 axisPointers on the same xAxis for different xAxis indexes.
Try to make one axisPointer fixed on certain value and the other follow the mouse.

Expected result:
First axisPointer should remain on the fixed value, the second axisPointer should follow the mouse.

Actual result:
Both axisPointers either stay fixed or follow the mouse. Not possible to have different behaviour.

### Current Behavior

Please, see the sample code bellow. It is not possible to configure 2 axisPointers on the same xAxis (for different xAxis indexes) to make one fixed at certain value and the other follow the mouse.
"triggerOn" component on xAxis.axisPointer does not work or have no effect.
Whenever "triggerOn" value is changed on upper level either on tooltip or on global axisPointer it affects both axisPointers.

```
var dom = document.getElementById("chart-container");
var myChart = echarts.init(dom, null, {
renderer: "canvas",
useDirtyRect: false,
});
var app = {};

var option;

const colors = ["#5470C6", "#EE6666"];
option = {
color: colors,
tooltip: {
trigger: "axis",
triggerOn: "none",
show: false,
},
// axisPointer: {
// triggerOn: "mousemove",
// },
legend: {},
grid: {
top: 70,
bottom: 50,
},
xAxis: [
{
type: "category",
axisTick: {
alignWithLabel: true,
},
axisLine: {
onZero: false,
lineStyle: {
color: colors[1],
},
},
axisPointer: {
value: "2016-9",
snap: false,
animation: false,
lineStyle: {
type: "solid",
color: "#7f56d9",
width: 2,
},
},

// prettier-ignore
data: ['2016-1', '2016-2', '2016-3', '2016-4', '2016-5', '2016-6', '2016-7', '2016-8', '2016-9', '2016-10', '2016-11', '2016-12'],
},
{
type: "category",
axisTick: {
alignWithLabel: true,
},
axisLine: {
onZero: false,
lineStyle: {
color: colors[0],
},
},
axisPointer: {
value: "2016-3",
snap: false,
animation: false,
triggerOn: "mousemove",
lineStyle: {
type: "solid",
color: "#7f56d9",
width: 2,
},
},
// prettier-ignore
data: ['2015-1', '2015-2', '2015-3', '2015-4', '2015-5', '2015-6', '2015-7', '2015-8', '2015-9', '2015-10', '2015-11', '2015-12'],
},
],
yAxis: [
{
type: "value",
},
],
series: [
{
name: "Precipitation(2015)",
type: "line",
xAxisIndex: 1,
smooth: true,
emphasis: {
focus: "series",
},
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: "Precipitation(2016)",
type: "line",
smooth: true,
emphasis: {
focus: "series",
},
data: [
3.9, 5.9, 11.1, 18.7, 48.3, 69.2, 231.6, 46.6, 55.4, 18.4, 10.3, 0.7,
],
},
],
};

if (option && typeof option === "object") {
myChart.setOption(option);
}

myChart.getZr().on("mousemove", function (event) {
var pointInPixel = [event.offsetX, event.offsetY];
var pointInGrid = myChart.convertFromPixel({ xAxisIndex: 1 }, pointInPixel);

if (pointInGrid) {
myChart.dispatchAction({
type: "updateAxisPointer",
xAxisIndex: 1, // Move only the second axisPointer
value: pointInGrid[0],
});
}
});

window.addEventListener("resize", myChart.resize);

```

### Expected Behavior

First axisPointer should remain on the fixed value, the second axisPointer should follow the mouse.

### Environment

```markdown
- OS:
- Browser:
- Framework:
```

### Any additional comments?

_No response_