Vue项目配置ECharts的两种方法

原创声明

本文系作者辛苦码字所得，欢迎分享和转载，但请在明显位置注明作者的如下信息：
笔名：来碗鸡蛋面
主页：https://www.jianshu.com/u/4876275b5a73
邮箱：[email protected]
CSDN ID：tom_wong666

需求：

Vue项目用到ECharts，需要配置,除了直接在index.html里面引入echarts文件外，还实践总结了如下两种npm配置方法，亲测有效，建议用方法二。

方法一，注册echarts到vue的原型对象中，指定某个div作为echarts的画布：

1，npm安装

npm install echarts --save

2，main.js增加设置

// 引入echarts
import echarts from 'echarts'
// 将echarts注册到Vue组件的原型对象中去
Vue.prototype.$echarts = echarts

3，组件内使用

（1）创建charts文件夹，文件夹内创建index.vue文件

（2）在router文件夹的index.js文件内引入第一步建立的vue文件，并为其设置访问路径

//引入图表组件
import chart from '@/page/charts/index'

   {
   //为图表组件设置访问路径 
      path: '/chart',
      name: 'chart',
      component: chart
    } 

（3）在charts文件夹，index.vue里面加入如下代码

4，验证

npm run dev 跑起来项目，在地址栏路径后加入/chart访问

备注：此设置已验证OK，需要看源码的同学，可以克隆如下项目查看：
demo的github地址：https://github.com/tom-wong666/model.git

方法二，注册echarts画布为vue的一个自定义组件(或者称为控件/标签)：

1，npm安装

npm i vue-echarts --save

2，main.js增加设置，注意引入配置的方式，可以直接b配置引入所有配置，也可以单独引入需要的配置，比如案例中只演示了bar，就只引入了bar

// 引入ECharts
import ECharts from 'vue-echarts/components/ECharts'
// 注册ECharts为标签
Vue.component('chart', ECharts)
// a配置：按需引入echart图表配置，同下b配置
import '../node_modules/echarts/lib/chart/bar'
// import '../node_modules/echarts/lib/chart/line'
// import '../node_modules/echarts/lib/chart/pie'
// import '../node_modules/echarts/lib/chart/tooltip'
// b配置：直接引入所有echart配置,同上a配置
// require('echarts')

3，组件内使用

（1）创建charts文件夹，文件夹内创建index.vue文件

（2）在router文件夹的index.js文件内引入第一步建立的vue文件，并为其设置访问路径

//引入图表组件
import chart from '@/page/charts/index'

   {
   //为图表组件设置访问路径 
      path: '/chart',
      name: 'chart',
      component: chart
    } 

（3）在charts文件夹，index.vue里面加入如下代码

4，验证

npm run dev 跑起来项目，在地址栏路径后加入/chart访问

备注：此设置已验证OK，需要看源码的同学，可以克隆如下项目查看：
demo的github地址：https://github.com/tom-wong666/xiaoa.git