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