首页 > 其他 > 详细

vue按需引入echarts

时间:2018-07-12 23:20:41      阅读:197      评论:0      收藏:0      [点我收藏+]

  下载安装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

原文:https://www.cnblogs.com/goloving/p/9302213.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!