博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
vue按需引入echarts
阅读量:4919 次
发布时间:2019-06-11

本文共 791 字,大约阅读时间需要 2 分钟。

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

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

你可能感兴趣的文章
String字符串常用方法
查看>>
猴子们的研究
查看>>
[Python]小甲鱼Python视频第027课(集合:在我的世界里,你就是唯一)课后题及参考解答...
查看>>
sed
查看>>
关系数据库-----SQL标准语言
查看>>
java设计模式----中介模式
查看>>
常用通用JS函数
查看>>
第一章 读后心得体会
查看>>
windows下命令行cmder工具
查看>>
【深度学习大讲堂】首期第一讲:人工智能的ABCDE 第二部分:简谈当前AI技术与发展趋势...
查看>>
pandas 3 设置值
查看>>
pip无法更新
查看>>
vue-12-element组件库
查看>>
尝试读取或写入受保护的内存。这通常指示其他内存已损坏。
查看>>
安装oracle后登录时出现 ERROR: ORA-01031 insufficient privileges
查看>>
HOME键窥探Android的Activity生命周期
查看>>
Regularization - Handle with the Overfitting Problem
查看>>
领域驱动设计和实践
查看>>
【第二章】Shell 变量
查看>>
Docker概念学习系列之为什么使用docker?(3)
查看>>