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- ...
随机推荐
- 51nod 1584加权约数和
学到了好多东西啊这题... https://blog.csdn.net/sdfzyhx/article/details/72968468 #include<bits/stdc++.h> u ...
- 「LOJ 556 Antileaf's Round」咱们去烧菜吧
「LOJ 556 Antileaf's Round」咱们去烧菜吧 最近在看 jcvb 的生成函数课件,顺便切一切上面讲到的内容的板子题,这个题和课件上举例的背包计数基本一样. 解题思路 首先列出答案的 ...
- 【bfs】BZOJ1102- [POI2007]山峰和山谷Grz
最后刷个水,睡觉去.Bless All! [题目大意] 给定一个地图,为FGD想要旅行的区域,地图被分为n*n的网格,每个格子(i,j) 的高度w(i,j)是给定的.若两个格子有公共顶点,那么他们就是 ...
- Gunicorn设计部分的翻译
Design 关于Gunicorn架构的简要描述. Server Model Gunicorn是基于pre-fork(预启动,提前fork)的工作模式.这就意味着Gunicorn是由一个主进程来管理这 ...
- Xcode6 iOS7模拟器和Xcode7 iOS8模拟器离线下载
Xcode6 只支持iOS7和iOS8的模拟器 Xcode7 只支持iOS9和iOS8的模拟器 Xcode 并不会识别 SDKs 目录下的模拟器,我经过一些尝试以后,发现要放在这个目录下: /Libr ...
- leetcode——169 Majority Element(数组中出现次数过半的元素)
Given an array of size n, find the majority element. The majority element is the element that appear ...
- 在Visual Studio中使用活动图描述业务流程
当希望描述某个流程的时候,用活动图表示. 在项目中添加一个名称为"Shopping"的文件夹. 把"Orders Model"这个UML类图拖放到Shoppin ...
- Glibc 和 uClibc
转自:https://blog.csdn.net/clirus/article/details/50145959?locationNum=4 最近在搞mips openwrt框架的东西,mipc的GC ...
- 使用 Crash 工具分析 Linux dump 文件
转自:http://blog.csdn.net/commsea/article/details/11804897 简介: Linux 内核由于其复杂性,使得对内核出现的各种异常的追踪变得异常困难.本文 ...
- git 删除远程分支和本地分支
删除远程分支和本地分支 https://www.cnblogs.com/luosongchao/p/3408365.html 将远程git仓库里的指定分支拉取到本地(本地不存在的分支) https:/ ...