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
},
{