Echarts坐标轴的name属性更改位置

<template>
  <div class="w-full h-full">
    <p class="font-bold text-left text-xl">
      当日人流量
    </p>
    <div ref="chartRef" class="w-full" style="height: 96%"/>
  </div>
</template>

<script lang="ts" setup>
import { useECharts } from '@/hooks/web/useEChartsX'
import type { Ref } from 'vue'
import type {EChartsOption} from "echarts";
const chartRef = ref<HTMLDivElement>()
const { setOptions, echarts } = useECharts(
  chartRef as Ref<HTMLDivElement>,
)

const option:EChartsOption = {
  grid: {
    left: '0%',
    right: '10%',
    top: '15%',
    bottom: '10%',
    containLabel: true
  },
  tooltip: {
    position: 'top',
    show: true,
    trigger: 'item',
    axisPointer: {
      // 坐标轴指示器，坐标轴触发有效
      type: 'line' // 默认为直线，可选为：'line' | 'shadow',
    },
    formatter: '{c}'
  },

  xAxis: [
    {
      name: '(时)',
      type: 'category',
      boundaryGap: false,
      axisLabel: {
        color: '#67749E'
      },
      axisLine: {
        show: false,
        lineStyle: {
          color: '#67749E'
        }
      },
      axisTick: {
        show: false
      },

      data: Array.from({ length: 24 }, (_, i) => i)
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: '人次',
      nameTextStyle: {
        align: 'right',
      },
      axisLabel: {
        color: '#67749E'
      },
      axisLine: {
        show: false,
        lineStyle: {
          color: '#67749E'
        }
      },

      axisTick: {
        show: false
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#CDCFD0'
        }
      }
    }
  ],
  series: [
    {
      type: 'line',
      stack: '总量',
      symbol: 'circle',
      smooth: true,
      symbolSize: 0,
      itemStyle:{
        borderWidth:0,
        borderColor:'#fff'
      },
      color: '#e1c58d',
      data: Array.from({ length: 24 }, (_, i) => Math.floor(Math.random() * 100)),
      areaStyle: {
        color: new echarts.graphic.LinearGradient(
          0,
          0,
          0,
          1,
          [
            {
              offset: 0,
              color: '#F7AF1E',
            },
            {
              offset: 1,
              color: '#E0DFD9',
            },
          ],
          false
        ),
      },
    }
  ]
};

onMounted(() => {
  nextTick(() => {
    setTimeout(() => {
      setOptions(option)
    }, 1000)
  })
})

</script>

<style  scoped>
.card-wrapper {
  border-radius: 2%;
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}
</style>