vue按需引入echarts
下载安装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的更多相关文章
- vue按需引入element或mint
vue按需引入element或mint需要添加 babel-preset-es2015 和babel-plugin-component
- vue按需引入/全局引入echarts
npm install echarts -S 1.按需引入 新建echarts.js公共引入 // 文件路径 @/lib/echarts.js 自行配置 // 加载echarts,注意引入文件的路径 ...
- vue按需引入Element UI的方法
在我们的实际项目开发中,多数是采用按需引入的模式来进行开发的,那么具体应该如何操作呢,可能会有许多新人傻傻分不清楚,具体将在下文讲到. 首先我们先vue create demo创建一个项目出来此时我们 ...
- mpvue中按需引入echarts
大家都知道小程序文件大小不能超过2M, 在项目中引入echarts后,文件大小远远超出2M了.因为echarts文件默认是包含所有图表代码的,所以文件体积会比较大.解决办法如下: 安装 首先我们先安装 ...
- vue按需引入第三方ui插件优化
components.js import { fullScreenContainer, borderBox12, scrollBoard, loading, borderBox10, borderBo ...
- vue中按需引入Element-ui
安装 1.安装element-ui:npm i element-ui -S. 2.安装babel-plugin-component:npm install babel-plugin-component ...
- vue项目使用echarts按需引入实现地图动态显示效果时,报错:TypeError: Cannot read property 'dataToPoint' of undefined
vue项目使用echarts按需引入实现地图动态显示效果时,报错:TypeError: Cannot read property 'dataToPoint' of undefined 借鉴了该大神的文 ...
- vue引入echarts、找不到的图表引入方法、图表中的点击事件
1.在vue-cli项目中添加webpack配置,本文引入的最新版本.在 3.1.1 版本之前 ECharts 在 npm 上的 package 是非官方维护的,从 3.1.1 开始由官方 EFE 维 ...
- 在Vue项目中使用Element UI:按需引入和完整引入
下面操作在main.js文件中进行 完整引入: import Element from 'element-ui'; //样式文件,需单独引入 import 'element-ui/lib/theme- ...
随机推荐
- node-webkit开发桌面应用
Node-Webkit能够做什么呢?(打开链接看discuss) github 项目源:https://github.com/rogerwang 导言 node-webkit 是一个很神奇的桌面客户端 ...
- 在JavaScript中什么时候使用==是正确的?
在JavaScript中什么情况下使用==是正确的?简而言之:没有.这篇文章来看五种情况下总是使用===,并且解释为什么不用==. JavaScript有两种操作符用来比较两个值是否相等 [1]: 严 ...
- 2017-2018-2 20172302 『Java程序设计』课程 结对编程练习_四则运算
1.结对对象 20172308周亚杰 2.本周内容 需求分析 (1).自动生成题目 可独立使用(能实现自己编写测试类单独生成题目的功能) 可生成不同等级题目,类似于: 1级题目:2 + 5 = .10 ...
- 数据库操作类——C#
整理数据库操作类以便取用: using System; using System.Collections.Generic; using System.Linq; using System.Web; u ...
- Android命令(更新……)
1.通过命令行安装包 语法:adb install -r apk包 例子:adb install -r D:\android\android-sdk-windows\platform-tools\L ...
- 做了一个可定制的英文记忆字典 - RDict
RDict_1.0 下载 在我自己试用过程中, 随时发现了不少小问题, 我会随时更新下.
- Sed&awk笔记之sed篇(转)
Sed是什么 <sed and awk>一书中(1.2 A Stream Editor)是这样解释的: Sed is a "non-interactive" strea ...
- C#快速找出磁盘内的所有文件
本文只针对NTFS格式化的磁盘文件快速检索,速度不是非常快,是让你震惊. 一般用文件遍历的方法检索一个50G的文件夹需要几十分钟甚至一个小时的时间,而用本方法只需几秒. using System; u ...
- 从.snk文件导出密钥
先声明该文的实用性不强, 要产生一对密钥可以有更简单的方法.该文简单解释了.snk文件的格式,并给出了从中提取密钥的C#代码. .snk文件(Strong Name Key)也可以叫签名文件,它一般用 ...
- 安装APK的错误码(PackageManager.java)
安装APK的错误码,定义在android源码中的这个文件中:frameworks\base\core\java\android\content\pm\PackageManager.java /** * ...