![9cd3331e50a8ca2c0f54f23dabce713e.png](https://i-blog.csdnimg.cn/blog_migrate/2f006b0b39224eb3acfe2e24ddd0c236.jpeg)
最近有多位读者反应,3D 饼图在 VUE 环境里跑不通。可我其实是一个先学 ECharts 后学 Javascript 的前端外行,再加上读者往往也没有告诉我具体的报错信息是什么,所以一时也没能帮读者找出问题原因。
这两天有空,为了看看到底是什么原因,我跑去查了查 VUE 的手册和教程,尝试在 @vue/cli 创建的 webpack 中,把我的 3D 饼图跑通。最终效果如下:
![3b897e6758ee2bdd5a650418610a0d71.png](https://i-blog.csdnimg.cn/blog_migrate/12c95db32e96fac416ce4f48d009dffc.png)
下文主要分为三大块:
- 环境准备(node.js、vue、webpack、@vue/cli 安装等)
- 创建 VUE 项目,安装依赖
- App.vue 文件编写
环境准备(前端们见笑了,可以略过)
- 安装 Node.js
建议跟我一样的前端外行,直接使用包管理器安装,具体搜索「Installing Node.js via package manager」吧,我之前用的好像是「yum」,安装后使用命令:
node -v
![a6b5118621d7a5086e002ecc208388c9.png](https://i-blog.csdnimg.cn/blog_migrate/77aebc41cc821f4902586583d4f5d283.png)
查看安装结果。
- 安装 @vue/cli
Node.js 安装好之后,使用命令:
npm install -g @vue/cli
安装「Vue-CLI」,完成后使用命令「vue -V」查看安装结果。
![ac27f513776aad9ebe4cfa35b14274c4.png](https://i-blog.csdnimg.cn/blog_migrate/3fcd3ee37231acd73caaf961e515fdda.png)
- 创建项目
「Vue-CLI」安装后,就可以使用「vue create xxx」命令创建项目(我选择的「Vue 2」),xxx 是项目名称,也是自动创建的项目目录名。
![f82b3ad86e9eb3455521979798197366.png](https://i-blog.csdnimg.cn/blog_migrate/54ede5ed1f0175818202d3007b17672d.jpeg)
![77434154944eb1415903d59290cf8bfa.png](https://i-blog.csdnimg.cn/blog_migrate/05d1fc4a49dbb2574167235af5712a63.jpeg)
项目创建完成,按提示跑一下先看看「cd xxx&&npm run serve」
![56ade7c9f6d2dee7c2a05a0365660b97.png](https://i-blog.csdnimg.cn/blog_migrate/f9786adf3350b0c8fb1634063872c8e2.jpeg)
![83d5c9bbd77a126da2f81721ab447cb8.png](https://i-blog.csdnimg.cn/blog_migrate/0b9c1c10b4a68b99ead43909f97b4264.jpeg)
安装 ECharts 相关依赖
在项目目录中执行命令
npm install echarts@4.9.0 echarts-gl vue-echarts –-save
安装所需的 ECharts 依赖。
Vue-ECharts
Apache ECharts (incubating) component for Vue.js. [1]
![1499c4c0db0221066f9900b3ab281ad2.png](https://i-blog.csdnimg.cn/blog_migrate/96edf375686ea34f5e175f4b7ffc21aa.png)
App.vue 文件编写
「Vue-ECharts」的 README.md 中,有一个极坐标线图的例子可供参考。
我就是参考那个文件,改写我的 3D 饼图的。有兴趣的同学可以自行尝试一下,也可以在文章尾部复制,保存为「App.vue」,替换掉 src 目录下的 App.vue。
改写/替换好之后,再次运行项目
![07502f0c1b8b5b0d8b8a0f83f7c39e94.png](https://i-blog.csdnimg.cn/blog_migrate/2fc36ad6d698101034447e7d0725b0e1.jpeg)
![3b897e6758ee2bdd5a650418610a0d71.png](https://i-blog.csdnimg.cn/blog_migrate/12c95db32e96fac416ce4f48d009dffc.png)
- App.vue 内容简要解释
从文档中查到,扩展名为 .vue 的文件被称为 single-file components (单文件组件),而这个 App.vue 又有点像 Express 的 app.js,似乎是整个项目的入口文件。作为新手,为了省事&#x