vue 中按需引入 echarts

 

按需引入
1. 專門設置一個echarts配置文件,文件路徑src/lib/echart.js (1.12M)
```src/lib/echart.js
// 直接引用
import echarts from '@/lib/echart.js'
```

2. 利用 babel-plugin-equire 實現按需加載 (1.11M) 

```src/lib/echarts.js
// 直接引用
import echarts from '@/lib/echarts.js'
```

3. main.js中只引入需要的模塊
```
import 'echarts/lib/chart/pie'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/title'
import 'echarts/lib/component/toolbox'
import 'echarts/lib/component/legend'
Vue.prototype.$echarts = echarts

```

全局引入

4. 方式1: 全局引用 （2.4M）
```main.js
import echarts from 'echarts'
import 'echarts/lib/echarts'
import 'echarts/lib/chart/pie'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/title'
import 'echarts/lib/component/toolbox'
import 'echarts/lib/component/legend'

Vue.prototype.$echarts = echarts
```

5. 使用vue-echarts 
```main.js
import ECharts from 'vue-echarts'
import 'echarts/index'
// 注冊為全局組件
Vue.component('v-chart', ECharts)
```
組件使用
```
<v-chart chartId="myChart" :options="chartOptions" width="300px" height="300px" :auto-resize="true"></v-chart>
```

github:  https://github.com/aloehh/vue-echarts