在nuxt.js项目中引入echarts

只需要三步就搞定

第一步:安装echarts所需的依赖包

npm install echarts --save

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

import Vue from 'vue'
import echarts from 'echarts' // 引入echarts
Vue.prototype.$echarts = echarts // 引入组件(将echarts注册为全局)

第三步:在nuxt.config.js配置文件中引入我们刚刚创建的echart.js

  // 配置插件
  plugins: ['~plugins/iview', '~plugins/echarts'],

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

我在components目录下创建了一个组件




在pages下的index.vue引入组件就可以看到效果了在nuxt.js项目中引入echarts_第1张图片

到这里,你就可以随心所欲的使用echarts了,写的不好,望各位见谅!

你可能感兴趣的:(web,vue,nuxt)