2024年Web前端最新vue+echarts——实现3D地图+3D柱状图 效果—，从入门到深入

最后

今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。不过光是看完而不去付出行动，或者直接进入你的收藏夹里吃灰，那么我写这篇文章就没多大意义了。所以看完之后，还是多多行动起来吧！

可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

初版效果图如下：

1.安装echarts和echarts-gl

npm install echarts --save
npm install echarts-gl --save

2.局部引入使用

直接上代码：

import \* as echarts from 'echarts';
import 'echarts-gl';

3. 下载中国地图数据，存储到本地路径下

我这边是存储到当前文件夹中了。。。

china.js文件可以参考[全国+省市区地图数据js参考链接：http://t.csdn.cn/Vmr05](https://bbs.csdn.net/topics/618166371)这个链接进行存储下载，如果文章没有说明白，可以留个邮箱，我可看到会发到指定邮箱。

4. html模板内容

<template>
  <div style="background:#fff;height:100vh;">
    <div
      ref="chinaMap"
      style="width: 60%; height: 100%;border:1px solid red;margin:0 auto;position:relative;z-index:1;"
    ></div>
  </div>
</template>

5.script内容

<script>
import \* as echarts from 'echarts';
import 'echarts-gl';
import data from '../china';
export default {
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      this.initMap('china');
    },
    convertData(data) {
      let geoCoordMap = {
        海门: [121.15, 31.89],
        鄂尔多斯: [109.781327, 39.608266],
        招远: [120.38, 37.35],
        舟山: [122.207216, 29.985295],