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- ...
随机推荐
- luogu [TJOI2007]线段
题目链接 luogu [TJOI2007]线段 题解 dp[i][0/1]第i行在左/右端点的最短路 瞎转移 代码 #include<bits/stdc++.h> using namesp ...
- mybatis学习笔记(三)-- 优化数据库连接配置
原来直接把数据库连接配置信息写在conf.xml配置中,如下 <?xml version="1.0" encoding="UTF-8"?> < ...
- Codeforces Round #517 (Div. 2, based on Technocup 2019 Elimination Round 2)
Codeforces Round #517 (Div. 2, based on Technocup 2019 Elimination Round 2) #include <bits/stdc++ ...
- 10分钟上手python pandas
目录 Environment 开始 对象创建 查看数据 选择 直接选择 按标签选择 按位置选择 布尔索引 设置 缺失数据 操作 统计 应用(apply) 直方图化(Histogramming) 字符串 ...
- spring-boot 速成(6) 整合disconf
spring-boot虽然不推荐使用xml文件做为配置文件,但是并没有把路堵死,所以与disconf的整合,仍旧可以沿用之前的xml方式来处理. 一.在Application类上用注解导入xml pa ...
- SQL Server DATEDIFF() 函数(SQL计算时间差)
select * from task_list where 1=1 and datediff(dd,carateTime,getdate()) =0 定义和用法 DATED ...
- WebClient 通过get和post请求api
//get 请求 string url = string.Format("http://localhost:28450/api/values?str1=a&str2=b ...
- perl解析xml-XML::Simple/XMLin
转自: http://blog.charlee.li/perl-xml-simple/ [Perl]用XML::Simple解析XML文件 在Perl中解析XML的方法最常见的就是使用 XML::DO ...
- 在centos中安装jenkins master为service
需要sudo或root权限. 翻译自: https://wiki.jenkins-ci.org/display/JENKINS/Installing+Jenkins+on+Red+Hat+dis ...
- SATA工作模式咋选?揭秘AHCI和IDE区别(全文)
第1页:AHCI模式与Win7.SSD的不解之缘 AHCI这个注定和SATA接口结下不解之缘的接口模式,它担负着淘汰IDE模式的重任,从诞生开始就充满争议,它经历了整整7年时间.它伴随着SSD ...