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

1.效果图如下

 

 

 2.代码如下(如果你懂Ts可直接用)

<template>
  <div
    ref="main"
    id="main"
    style="height: 100%; width: 100%; background: skyblue"
  ></div>
</template>

<script setup lang="ts">
// 引入hook
import { ref, reactive, onMounted } from 'vue'
// 引入 echarts
import * as echarts from 'echarts'
import type { utilsParams, funcFace1 } from '@/utils/interface'
import china from '../map/china.json'
console.log(china.features[china.features.length - 1])
// 注册china map
echarts.registerMap('china', require('../map/china.json') || china)
// 定义一个ref
const main = ref<any>(null)
//  tooltip random函数体
const  randomfunc=():number=> Math.random() * 10 | 0
// 定义发射点数据和到达点的经纬度信息
const chinaGeoCoordMap: utilsParams = {
  武汉: [114.298572, 30.584355],
  新疆: [87.617733, 40.792818],
  西藏: [88.132212, 31.660361],
  广西: [108.320004, 22.82402],
  台湾: [121.509062, 24.044332],
  黑龙江: [127.642464, 46.756967],
  吉林: [125.3245, 43.886841],
  澳门: [113.54909, 22.198951],
  海南: [110.33119, 20.031971],
  南海: [128.51865306, 23.46078502]
}

   
const chinaDatas: any = [
  // {
  //   name: '北京',
  //   value: 0
  // },
  {
    name: '新疆',
    value: 2
  },
  {
    name: '西藏',
    value: 1
  },
  {
    name: '台湾',
    value: 1
  },
  {
    name: '广西',
    value: 2
  },
  {
    name: '黑龙江',
    value: 1
  },
  {
    name: '吉林',
    value: 1
  },
  {
    name: '澳门',
    value: 0
  },
  {
    name: '海南',
    value: 0
  },
  {
    name: '南海',
    value: 0
  }
]
// 轮播utils 数组
const dataList: utilsParams[] = reactive([
  {
    name: '南海诸岛',
    value: 25
  },
  {
    name: '北京',
    value: 71
  },
  {
    name: '天津',
    value: 52
  },
  {
    name: '上海',
    value: 14
  },
  {
    name: '重庆',
    value: 50
  },
  {
    name: '河北',
    value: 20
  },
  {
    name: '河南',
    value: 30
  },
  {
    name: '云南',
    value: 55
  },
  {
    name: '辽宁',
    value: 50
  },
  {
    name: '黑龙江',
    value: 40
  },
  {
    name: '湖南',
    value: 6
  },
  {
    name: '安徽',
    value: 96
  },
  {
    name: '山东',
    value: 75
  },
  {
    name: '新疆',
    value: 45
  },
  {
    name: '江苏',
    value: 15
  },
  {
    name: '浙江',
    value: 8
  },
  {
    name: '江西',
    value: 78
  },
  {
    name: '湖北',
    value: 78
  },
  {
    name: '广西',
    value: 36
  },
  {
    name: '甘肃',
    value: 25
  },
  {
    name: '山西',
    value: 140
  },
  {
    name: '内蒙古',
    value: 85
  },
  {
    name: '陕西',
    value: 85
  },
  {
    name: