[Bug] axis tick and splitLine animation incorrect

### Version

5.4.0

### Link to Minimal Reproduction

_No response_

### Steps to Reproduce

Put the example below in `echarts/test` folder. Open it in browser. And click `1 day` and `7 day` repeatly.

```html

require([
'echarts',
// 'map/js/china',
// './data/nutrients.json'
], function (echarts) {

var option1 = {
"legend": {
"left": 0,
"textStyle": { "color": "#1F2533", "fontSize": 12 },
"itemWidth": 8,
"itemHeight": 8,
"icon": "circle"
},
"grid": {
"left": 0,
"right": 56,
"top": 40,
"bottom": 0,
"containLabel": true
},
"tooltip": {
"show": true,
"trigger": "item",
"axisPointer": { "type": "cross" },
"borderColor": "#fff"
},
"xAxis": {
// animation: false,
"type": "category",
// "type": "time",
"boundaryGap": false,
"splitLine": {
"show": true,
"lineStyle": { "color": "#d8dce6", "type": "dashed" }
},
"axisLine": { "show": true, "lineStyle": { "color": "#d8dce6" } },
"axisLabel": { "show": true, "color": "#9AA1B1" },
"axisPointer": { "snap": true, "label": { "fontSize": 12 } }
},
"yAxis": {
"type": "value",
"minInterval": 1,
"splitLine": { "lineStyle": { "color": "#d8dce6", "type": "dashed" } },
"axisLine": { "show": true, "lineStyle": { "color": "#d8dce6" } },
"axisLabel": { "show": true, "color": "#9AA1B1" },
"axisPointer": {
"snap": true,
"label": { "fontSize": 12, "fontWeight": "bold" }
}
},
"series": [
{
"data": [["2022-09-27", 124]],
"type": "line",
"name": "退款订单数",
"smooth": true,
"showSymbol": true,
"symbol": "circle",
"symbolSize": 8,
"lineStyle": { "normal": { "color": "#4E6EF2", "width": 3 } },
"areaStyle": {
"opacity": 0.3,
"color": {
"colorStops": [
{ "offset": 0, "color": "rgba(78,110,242,0.3)" },
{ "offset": 1, "color": "rgba(78,110,242,0)" }
],
"x": 0,
"y": 0,
"x2": 0,
"y2": 1,
"type": "linear",
"global": false
}
},
"markLine": { "silent": true, "lineStyle": { "color": "#9AA1B1" } }
}
]
};

var option7 = {
"legend": {
"left": 0,
"textStyle": { "color": "#1F2533", "fontSize": 12 },
"itemWidth": 8,
"itemHeight": 8,
"icon": "circle"
},
"grid": {
"left": 0,
"right": 56,
"top": 40,
"bottom": 0,
"containLabel": true
},
"tooltip": {
"show": true,
"trigger": "item",
"axisPointer": { "type": "cross" },
"borderColor": "#fff"
},
"xAxis": {
// animation: false,
"type": "category",
// "type": "time",
"boundaryGap": false,
"splitLine": {
"show": true,
"lineStyle": { "color": "#d8dce6", "type": "dashed" }
},

"axisLine": { "show": true, "lineStyle": { "color": "#d8dce6" } },
"axisLabel": { "show": true, "color": "#9AA1B1" },
"axisPointer": { "snap": true, "label": { "fontSize": 12 } }
},
"yAxis": {
"type": "value",
"minInterval": 1,
"splitLine": { "lineStyle": { "color": "#d8dce6", "type": "dashed" } },
"axisLine": { "show": true, "lineStyle": { "color": "#d8dce6" } },
"axisLabel": { "show": true, "color": "#9AA1B1" },
"axisPointer": {
"snap": true,
"label": { "fontSize": 12, "fontWeight": "bold" }
}
},
"series": [
{
"data": [
["2022-09-21", 213],
["2022-09-22", 13],
["2022-09-23", 146],
["2022-09-24", 41],
["2022-09-25", 55],
["2022-09-26", 245],
["2022-09-27", 122]
],
"type": "line",
"name": "退款订单数",
"smooth": true,
"showSymbol": false,
"symbol": "circle",
"symbolSize": 8,
"lineStyle": { "normal": { "color": "#4E6EF2", "width": 3 } },
"areaStyle": {
"opacity": 0.3,
"color": {
"colorStops": [
{ "offset": 0, "color": "rgba(78,110,242,0.3)" },
{ "offset": 1, "color": "rgba(78,110,242,0)" }
],
"x": 0,
"y": 0,
"x2": 0,
"y2": 1,
"type": "linear",
"global": false
}
},
"markLine": { "silent": true, "lineStyle": { "color": "#9AA1B1" } }
}
]
};

var chart = testHelper.create(echarts, 'main0', {
title: [
'Test Case Description of main0',
'(Muliple lines and **emphasis** are supported in description)'
],
option: option1,
// height: 300,
buttons: [
{
text: '1 day',
onclick: function () {
chart.setOption(option1);
}
},
{
text: '7 day',
onclick: function () {
chart.setOption(option7);
}
}
],
// recordCanvas: true,
});
});

```

### Current Behavior

When click `7 day`, the axis tick and splitLine `2022-09-27` move toward left and become `2022-09-21`, and a new `2022-09-27` appear in the right most. It will misleading users.


### Expected Behavior

When click `7 day`, the axis tick and splitLine `2022-09-27` move toward right.

### Environment

_No response_

### Any additional comments?

See https://github.com/apache/echarts/blob/5.4.0/src/component/axis/CartesianAxisView.ts#L161

When the `axis.type` is `'category'`, `tickValue` here is 0, 1, 2, 3, .. which should not be used as `anid` directly. We should better use `axis.scale.getLabel({value: tickValue, ...})` as `anid`.