极致呈现系列之：Echarts地图的浩瀚视野(二)

今天我将基于上一个博客讲到的Echarts地图的相关知识，来实现一个三维地图的效果，我将通过两种方式来实现，一种是伪3D效果的中国地图效果，为什么说是伪3D效果呢，跟着做完你就明白了；一种是真正的三维效果中国地图；下面先看下最终的效果图

创建项目

首先创建项目，我这个项目是基于Vue3+Vite+Echarts5开发的，所以你需要先搭建好项目环境，具体创建vue3项目的步骤，我这里就不啰嗦了，还不知道怎么创建的，赶紧百度学习下吧。当然，你也可以基于HTML+CSS+JavaScript的原生环境创建项目，因为我这篇文章不涉及与后台的交互，所以，你用HTML+CSS+JavaScript的方式也是可以实现的，当然了，引入Echarts的方式就需要你借助 script 标签直接通过 CDN 来使用了。

1. 项目创建完成后，需要先安装Echarts

npm install echarts --save

2. 准备地图数据
   下载地图数据，并将其放到src目录下的assets文件夹
3. 新建MapChart3D.vue组件
   在components文件夹新建MapChart3D.vue组件，所有有关地图的代码逻辑都放到这个组件下
4. 新建一个div，作为Echarts地图的容器

<template>
  <div ref="chart" style="width: 100%;height: 100vh;"></div>
</template>

5. 引入vue的组合式API

import {
    ref, onMounted } from 'vue' 
const chart = ref(null)

引入并注册地图

接下来我们使用import方式导入Echarts组件库和json格式的地图文件

import * as echarts from 'echarts'
import cmap from '../assets/china.json'