vue-admin-template模板使用vue-elementui-admin中的echarts图表

1.vue-admin-template导入echarts

在vue-admin-template模板中是没有安装echarts的,我们需要安装

npm install echarts --save

2.vue-admin-template中拉取vue-elementui-admin中的图表

vue-admin-template模板使用vue-elementui-admin中的echarts图表_第1张图片
将vue-elementui-admin中views下的图表文件拉入vue-admin-template下的views文件夹。

vue-admin-template模板使用vue-elementui-admin中的echarts图表_第2张图片
将vue-elementui-admin中components下的charts文件拉入到vue-admin-template中的components中

3.注册路由

vue-admin-template模板使用vue-elementui-admin中的echarts图表_第3张图片

4.运行

vue-admin-template模板使用vue-elementui-admin中的echarts图表_第4张图片
发现报错了,有一个debounce未找到,我们找到utils文件,找到index.js

vue-admin-template模板使用vue-elementui-admin中的echarts图表_第5张图片

找到这个代码复制到对应的vue-admin-template下utils下的index中

发现第一个报错不见了,还有一个echarts报错,
找到官方文档发现5.0版本与4.0导入的区别就好办了
vue-admin-template模板使用vue-elementui-admin中的echarts图表_第6张图片

于是我们将components下charts中的导入代码改一下就好了,我用的是5版本,如果你是4版本就可以不用改了
在这里插入图片描述

vue-admin-template模板使用vue-elementui-admin中的echarts图表_第7张图片
这样图表就导入成功了;

你可能感兴趣的:(VUE,vue.js,前端,javascript)