vue按需加载echarts

作者: deepwinter 分类: 前端 发布时间: 2019-05-24 10:50 点击量: 448 次阅读

npm安装echarts

npm install echarts -D

全局引入

main.js中配置

import echarts from 'echarts' //引入echarts
Vue.prototype.$echarts = echarts //引入组件

缺点:
如果是完整的引入Echarts,会额外的引入其他无用的配置文件,造成应用文件体积过大,资源加载耗时过长,影响用户体验。


按需引入

//引入基本模板
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

如果是在许多页面中都有用到,就写在main.js中,如果只在一个地方使用就直接写在.vue文件中就好啦。

注意:
这里用require不用import引入是因为import需要详细的路径。


转自:https://www.cnblogs.com/goloving/p/9302213.html

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注