vue按需引入echarts
阿新 • • 發佈:2018-07-13
gen http src font tool spa 模板 ada ont
下載安裝echarts包:npm install echarts -D
一、全局引入
main.js中配置
import echarts from ‘echarts‘ //引入echarts
Vue.prototype.$echarts = echarts //引入組件
缺點:如果是完整的引入Echarts,會額外的引入其他無用的配置文件,造成應用文件體積過大,資源加載耗時過長,影響用戶體驗
二、按需引入
如果是在許多頁面中都有用到,就寫在main.js中
//引入基本模板 let echarts = require(‘echarts/lib/echarts‘) // 引入折線圖等組件require(‘echarts/lib/chart/line‘) require(‘echarts/lib/chart/bar‘) require(‘echarts/lib/chart/radar‘) // 引入提示框和title組件,圖例 require(‘echarts/lib/component/tooltip‘) require(‘echarts/lib/component/title‘) require(‘echarts/lib/component/legend‘) require(‘echarts/lib/component/legendScroll‘)//圖例翻譯滾動 Vue.prototype.$echarts = echarts
在組建中使用都是一樣的,如果只在一個地方使用就直接寫在.vue文件中就好啦
註:這裏用 require 不用 import 引入是因為 import 需要詳細的路徑
然後打包,,比全部導入1.69M,少了差不多400K。
vue按需引入echarts