百科生活 投稿
关于【中国地图怎么画】:中国地图简笔画步骤（中国地图简笔画步骤 轮廓），今天小编给您分享一下，如果对您有所帮助别忘了关注本站哦。
- 内容导航：
- 1、手把手教你 Vue3 + vite + Echarts 5 +TS 绘制中国地图，看完就会
- 2、中国地图怎么画：中国地图简笔画步骤（中国地图简笔画步骤 轮廓）
- 3、怎么画中国地图简笔画?
- 4、简笔画怎么画出中国地图啊,求详解,求步骤,如果好我会加分的,急用_百度
- 5、中国地图简笔画是什么?
- 6、中国地图怎么画?
1、手把手教你 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"Vue.prototype.$ecahrt = echartsapp.config.globalProperties.$echarts = echarts
也可以直接在绘制页面内按需引用。
引入需要绘制的地图数据 json 或 js 文件，本文使用的是 json 格式：
import chinaJSON from '../../assets/json/china.json'
注意：引入的时候先引入 echarts ，后引入 chinaJSON 文件，顺序不能反哦！
四、开始绘制地图
template 部分代码：
script 部分代码：
百科 https://bk.89qw.com/ All rights reserved.
免责声明：网站内部分图片素材来源于网络，如有涉及任何版权问题，请及时与我们联系，我们将尽快妥善处理！