按需引入 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
原文:https://www.cnblogs.com/aloehui/p/14180116.html