vue+echarts(5.6.0)实现塔状图

<template>
 <div id="chartTaskDom" ref="chartsContent"></div>
</template>
<script setup lang="ts">
//echarts
import * as echarts from 'echarts';
onMounted(() => {
  echarts.registerTheme('dark', theme);
  getDataList()
})
async function getDataList() {
    let data = await zoneTypeTime(parameter.value);
    recordsData.value = data.data;
    getChart(data.data);

}
type EChartsOption = echarts.EChartsOption;
let chartDom
let myChart
function getChart(chartData){
  chartDom = document.getElementById('chartTaskDom')!;
  myChart = echarts.init(chartDom, 'dark');
  let xData = chartData.xAxis;
  let serData = chartData.series[0].data
  let option;
  option = {
    tooltip: {
      trigger: "axis",
      borderRadius: 5,
      borderColor: "#6baab2",
      borderWidth: 1
    },
    grid: {
      top:"15%",
      left: "0",
      right: "0",
      bottom: "0",
      containLabel: true
    },
    xAxis: {
      data: xData,
      triggerEvent: true,
      axisTick: {
        show: false
      },
      axisLine: {
        show: false
      },
      axisLabel: {
        show: true,
        rotate: 0,
        interval: 0,
        textStyle: {
          color: "#E6F7FF"
        }
      }
    },
    yAxis: {
      name: "单位：km",
      triggerEvent: true,
      nameTextStyle: {
        color: "rgb(95,109,119)",
        fontSize: 12
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: 'rgba(255,255,255,.1)'
        }
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: 'rgba(255,255,255,.1)'
        }
      },
      axisLabel: {
        rotate: 0,
        show: true
      }
    },
    series: [
    {
      barMinHeight: 10,
      type: "pictorialBar",
      barCategoryGap: "60%",
      symbol: "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: "rgba(72, 229, 229, 0.35)"
          },
            {
              offset: 0.5,
              color: "rgba(72, 229, 229, 0.35)"
            },
            {
              offset: 1,
              color: "#48E5E5"
            }
          ])
        }
      },
      label: {
        normal: {
          show: false
        }
      },
      data: serData,
      z: 10
    },
    {
      type: "bar",
      barWidth: '20%',
      itemStyle: {
        normal: {
          color: "transparent"
        }
      },
      z: 9
    }
    ]
  }
  option && myChart.setOption(option);
}


</script>