vue3+ts+echarts 绘制一个射线中国地图+轮播tooltip

以下是一个简化的代码示例，展示了如何在Vue 3和TypeScript中结合ECharts绘制一个射线图的中国地图，并添加了轮播tooltip功能。

<template>
  <div ref="mapChart" style="width: 600px; height: 400px;"></div>
</template>
 
<script lang="ts">
import { defineComponent, ref, onMounted, watch } from 'vue';
import * as echarts from 'echarts';
 
export default defineComponent({
  name: 'MapChart',
  setup() {
    const mapChart = ref<HTMLElement | null>(null);
    let chartInstance: echarts.ECharts | null = null;
 
    onMounted(() => {
      chartInstance = echarts.init(mapChart.value as HTMLElement);
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{b}',
          axisPointer: {
            type: 'line',
            lineStyle: {
              color: 'rgba(0,0,0,0.2)',
              width: 1,
              type: 'solid'
            }
          }
        },
        geo: {
          map: 'china',
          roam: true,
          label: {
            emphasis: {
              show: true
            }
          },
          itemStyle: {
            normal: {
              areaColor: '#323c48',
              borderColor: '#111'
            },
            emphasis: {
              areaColor: '#2a333d'
            }
          }
        },
        series: [
          {
            type: 'lines',
            coordinateSystem: 'geo',
            data: [
              {
                coords: [
                  [116.405285, 39.904989], // 起点经纬度
                  [121.472644, 31.231706]  // 终点经纬度
                ],
                name: 'Line 1',
                value: 0
              }
            ],
            lineStyle: {
              width: 1,
              opacity: 1,
              color: 'rgb(223,0,0)'
            },
            effect: {
              show: true,
              period: 6,
              trailLength: 0.7,
              color: 'rgb(223,0,0)',
              symbolSize: 3
            }
          }
        ]
      };
 
      chartInstance?.setOption(option);
    });
 
    watch(() => chartInstance, (newInstance) => {
      if (newInstance) {
        setInterval(() => {
          const dataLen = newInstance.getOption().series[0].data.length;
          // 假设我们有一个动态的数组来更新tooltip信息
          const tooltips = ['Info 1', 'Info 2', 'Info 3'];
          const currentTooltip = tooltips[(dataLen - 1) % tooltips.length];
 
          newInstance.setOption({
            series: [