总结下vue项目使用echarts的几种办法
1. npm安装echarts依赖式
npm install echarts --save
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
缺点:会把echarts的不需要用到的模块都引入,项目依赖包过大
2. npm安装vue-echarts组件式 (按需)
参考vue-echarts官方文档 github.com/ecomfe/vue-…
import Vue from 'vue'
import ECharts from 'vue-echarts'
// 手动引入 ECharts 各模块来减小打包体积
import 'echarts/lib/chart/bar'
import 'echarts/lib/component/tooltip'
// 注册组件后即可使用
Vue.component('v-chart', ECharts)
缺点:需要安装多一个依赖,该组件依赖的echarts版本可能无法紧随最新版echarts
3. require按需引入式 (按需)
let echarts = require('echarts/lib/echarts')
// 引入饼状图组件
require('echarts/lib/chart/pie')
Vue.prototype.$echarts = echarts //挂载到原型
4. HTML引入echarts.js式(按需)
先在echarts定制下载,然后把echarts.min.js放到public文件夹,index.html引入
<script src="./echarts.min.js"></script>
然后在main.js入口文件挂载到Vue原型,这里加了window是因为项目中使用到了eslint,不加的话会提示echarts为定义。
Vue.prototype.$echarts = window.echarts; //挂载echarts到原型上