在VUE中使用echarts制作3d地球

在VUE中使用echarts制作3d地球

1、环境配置

编辑器vscode

npm创建项目，使用官方脚手架vue-cli4

全局安装vue-cli

npm i -g @vue/cli

创建项目Ocean

vue create ocean

安装项目依赖echarts和echarts-gl

cd ocean

npm i echarts ecahrts-gl -S

2、创建开发目录

public   静态资源 

src  开发环境 

  |-assets 全局会优化 ui资源

    |-js

    |-css

    |-image

    |-...

  |-pages  页面 跳转 

    |-  home.vue

  |-layouts 布局

    |- App.vue

  |-components 通用组件

    |- earth.vue 

  main.js 模块主入口

package.json 依赖管理

3、页面和组件代码

1、App.vue

Home.vue

3、earth.vue

4、效果

image