在nuxt.js项目中引入echarts

1.首先在项目中安装echarts 1.安装echarts依赖包

npm install echarts --save

2.在plugins目录下创建echarts.js文件并在里面引入echarts依赖包

import Vue from vue
import echarts from echarts//这个需要注意一下有可能会报错,可以用下面方法
Vue.prototype.$echarts = echarts

用以上通用的方法,可能会出现以下报错,“export ‘default‘ (imported as ‘echarts‘) was not found in ‘echarts‘ 是因为Echarts 5.x 不再支持上面的引入方式,详情可以查看Echarts官网 总而言之就是改为以下:

import Vue from vue
import * as echarts from echarts //区别在这里
Vue.prototype.$echarts = echarts

3.在nuxt.config.js配置文件中引入我们刚刚创建的echart.js

plugins: [~plugins/echarts]
 //我只写了要加这个,不代表这里只有这个
 //还可以用@/plugins/echarts形式,都差不多的

以上就是需要配置的步骤,下面我们来看看效果

在pages下的index.vue引入组件就可以看到效果了

经验分享 程序员 微信小程序 职场和发展