下载安装echarts包:npm install echarts -D
一、全局引入
main.js中配置
import echarts from 'echarts' //引入echartsVue.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。