vue按需引入echarts


  下載安裝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。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM