手把手教你 Vue3 + vite + Echarts 5 +TS 绘制中国地图，看完就会

废话不多说，看图！

本篇文章介绍 Vue3 + vite +TS 项目内使用 Echarts 5 绘制中国地图，标记分布点！之前没有接触过 Echarts 的，可以先去官方示例看看，里面图形特别齐全。但是官方文档看着费劲的，太多了根本记不住，所以自己做个总结，下次就可以直接使用了，不用做重复无用功。

一、安装

Echarts 已更新到了 5.0 版本，安装完记得检查下自己的版本是否是 5.0 。

npm install echarts --save

安装完成之后，在 package.json 中检查是否安装成功？

二、下载地图的 json 数据

可以下载中国以及各个省份地图数据。免费的文件下载地址：

http://datav.aliyun.com/portal/school/atlas/area_selector#&lat=30.332329214580188&lng=106.72278672066881&zoom=3.5

记得收藏哦！免得浪费加班时间。

三、引入

引入 echarts 可以全局引入：

import * as echarts from "echarts"

/* 之前vue2 */
Vue.prototype.$ecahrt = echarts

/* vue3 */
app.config.globalProperties.$echarts = echarts

也可以直接在绘制页面内按需引用。

引入需要绘制的地图数据 json 或 js 文件，本文使用的是 json 格式：

import chinaJSON from '../../assets/json/china.json'

注意：引入的时候先引入 echarts ，后引入 chinaJSON 文件，顺序不能反哦！

四、开始绘制地图

template 部分代码：

script 部分代码：