Vue项目按需/非按需使用echarts的几种方式

1,375 阅读1分钟

总结下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到原型上

完结,如有遗漏欢迎补充~