Vue3+TS+ECharts 绘制射线中国地图+轮播Tooltip

在 Vue3 和 TypeScript 中，我们可以利用 ECharts 这个强大的可视化库来绘制各种图表，包括中国地图。下面是一个简单的例子，展示如何使用 Vue3、TypeScript 和 ECharts 绘制一个射线中国地图，并实现轮播的 Tooltip 功能。
首先，确保你已经安装了 Vue3、TypeScript 和 ECharts。你可以通过 npm 或 yarn 安装这些依赖：

npm install vue@next typescript echarts

或者

yarn add vue@next typescript echarts

接下来，创建一个新的 Vue3 项目，并使用 TypeScript。在你的项目中创建一个新的组件，例如 MapComponent.vue。在这个文件中，我们将编写代码来绘制地图和实现轮播的 Tooltip 功能。
首先，我们需要导入必要的库和组件：

import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
import { useMap } from 'echarts/core';
import { MapChart } from 'echarts/charts';
import { GeoJSONComponent, TooltipComponent } from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
import mapJson from './map.json'; // 导入中国地图的 GeoJSON 数据

接下来，我们定义一个 mapRef 引用，以便在模板中使用地图组件：

const mapRef = ref(null);

然后，在 mounted() 生命周期钩子中，我们将初始化 ECharts 实例，并将地图渲染到组件中：

onMounted(() => {
const myChart = echarts.init(mapRef.value);
myChart.setOption({
tooltip: {
trigger: 'item', // 触发类型，默认数据触发或数据区域触发
formatter: function (params) { // 格式化提示框内容
// 这里可以根据实际需求自定义 Tooltip 的内容格式化函数
return params.name + ': ' + params.value;
},
// 这里可以设置 Tooltip 的轮播效果等其他配置项
},
series: [
{
type: 'map', // 地图类型，这里使用中国地图类型
map: 'china', // 使用中国地图的 GeoJSON 数据
roam: true, // 是否开启鼠标缩放和平移漫游地图功能
label: { // 地图标签样式设置
show: true, // 是否显示标签文本内容
color: '#000', // 标签文本颜色设置
fontSize: 12, // 标签文本字体大小设置
},
data: [ // 这里可以根据实际需求自定义地图数据和样式设置等其他配置项
{ name: '北京', value: 100 },
{ name: '天津', value: 200 },
// 其他省份数据...
],
},
],
});
});