下载安装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的更多相关文章

  1. vue按需引入element或mint

    vue按需引入element或mint需要添加 babel-preset-es2015 和babel-plugin-component

  2. vue按需引入/全局引入echarts

    npm install echarts -S 1.按需引入 新建echarts.js公共引入 // 文件路径 @/lib/echarts.js 自行配置 // 加载echarts,注意引入文件的路径 ...

  3. vue按需引入Element UI的方法

    在我们的实际项目开发中,多数是采用按需引入的模式来进行开发的,那么具体应该如何操作呢,可能会有许多新人傻傻分不清楚,具体将在下文讲到. 首先我们先vue create demo创建一个项目出来此时我们 ...

  4. mpvue中按需引入echarts

    大家都知道小程序文件大小不能超过2M, 在项目中引入echarts后,文件大小远远超出2M了.因为echarts文件默认是包含所有图表代码的,所以文件体积会比较大.解决办法如下: 安装 首先我们先安装 ...

  5. vue按需引入第三方ui插件优化

    components.js import { fullScreenContainer, borderBox12, scrollBoard, loading, borderBox10, borderBo ...

  6. vue中按需引入Element-ui

    安装 1.安装element-ui:npm i element-ui -S. 2.安装babel-plugin-component:npm install babel-plugin-component ...

  7. vue项目使用echarts按需引入实现地图动态显示效果时,报错:TypeError: Cannot read property 'dataToPoint' of undefined

    vue项目使用echarts按需引入实现地图动态显示效果时,报错:TypeError: Cannot read property 'dataToPoint' of undefined 借鉴了该大神的文 ...

  8. vue引入echarts、找不到的图表引入方法、图表中的点击事件

    1.在vue-cli项目中添加webpack配置,本文引入的最新版本.在 3.1.1 版本之前 ECharts 在 npm 上的 package 是非官方维护的,从 3.1.1 开始由官方 EFE 维 ...

  9. 在Vue项目中使用Element UI:按需引入和完整引入

    下面操作在main.js文件中进行 完整引入: import Element from 'element-ui'; //样式文件,需单独引入 import 'element-ui/lib/theme- ...

随机推荐

  1. poj 1511 优先队列优化dijkstra *

    题意:两遍最短路 链接:点我 注意结果用long long #include<cstdio> #include<iostream> #include<algorithm& ...

  2. Xtreme9.0 - Taco Stand 数学

    Taco Stand 题目连接: https://www.hackerrank.com/contests/ieeextreme-challenges/challenges/taco-stand Des ...

  3. Codeforces Round #375 (Div. 2) D. Lakes in Berland 贪心

    D. Lakes in Berland 题目连接: http://codeforces.com/contest/723/problem/D Description The map of Berland ...

  4. Xcode 模拟器复制解决方案

    网址:http://blog.csdn.net/zhangao0086/article/details/38491271

  5. 【原】getInputStream()与getParameterMap()获得Post请求的数据区别

    [前言] 最近在写一个接口,写好以后想测试,自己写ajax(Post方法)来调用接口倒是可以用action所在类的属性的get/set方法获得数据.但是不只是页面的ajax会调用这个接口,还有外系统会 ...

  6. logstash高速入口

    原文地址:http://logstash.net/docs/1.4.2/tutorials/getting-started-with-logstash 英语水平有限,假设有错误请各位指正 简单介绍 L ...

  7. JAVA泛型中的有界类型(extends super)(转)

    JDK1.5中引入了泛型(Generic)机制.泛型的本质是参数化类型,也就是说所操作的数据类型被指定为一个参数.这种参数类型可以用在类.接口和方法的创建中,分别称为泛型类.泛型接口.泛型方法. Ja ...

  8. C#网络编程技术FastSocket实战项目演练

    一.FastSocket课程介绍 .NET框架虽然微软提供了socket通信的类库,但是还有很多事情要自己处理,比如TCP协议需要处理分包.组包.粘包.维护连接列表等,UDP协议需要处理丢包.乱序,而 ...

  9. windows phone 基础

    一.安装 建议安装Windows 7环境,XP中不能运行模拟器,Vista系统支持,但不解释.系统安装完后,直接去微软网站在线安装即可,非常方便,美中不足的是如果你的网速不快,那可能要折磨你半天,快得 ...

  10. eval json ajax

    在JS中将JSON的字符串解析成JSON数据格式,一般有两种方式: 1.一种为使用eval()函数. 2. 使用Function对象来进行返回解析. 使用eval函数来解析,并且使用jquery的ea ...