下载安装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. bzoj 3673 可持久化并查集

    本质上是维护两个可持久化数组,用可持久化线段树维护. /************************************************************** Problem: ...

  2. IEEEXtreme Practice Community Xtreme9.0 - Digit Fun!

    Xtreme9.0 - Digit Fun! 题目连接: https://www.hackerrank.com/contests/ieeextreme-challenges/challenges/di ...

  3. CentOS下使用autoenv实现进入特定目录后运行特定环境变量

    安装 # Mac git clone git://github.com/kennethreitz/autoenv.git ~/.autoenv # 安装默认shell echo 'source ~/. ...

  4. 华为交换机VRRP配置实例收集(转)

    示例图: 其实说白了就是做线路冗余,达到热备切换. 组网需求: 楼层1和楼层2分别通过两条线路做冗余接入交换机(本示例只考虑vrrp,暂不考虑其他方面).当其中一段链路故障时,能通过另外一条链路传输. ...

  5. spring-boot 速成(5) profile区分环境

    maven中的profile概念,在spring-boot中一样适合,只要约定以下几个规则即可: 一.不同环境的配置文件以"application-环境名.yml"命名 举个粟子: ...

  6. Serilog中的Jobject/Jtoken对象序列化的问题

    今天使用Serilog打印object对象的时候,发现Jtoken对象输出成 [[[]] 这种形式了,本来以为是传入参数的问题,确认了几遍后发现确实是Serilog输出的问题.github上也有人提出 ...

  7. LPC43xx Asymmetric Dual Core : Cortex-M0 and Cortex-M4

  8. 在ASP.NET Web API中使用OData的单例模式

    从OData v4开始增加了对单例模式的支持,我们不用每次根据主键等来获取某个EDM,就像在C#中使用单例模式一样.实现方式大致需要两步: 1.在需要实现单例模式的导航属性上加上[Singleton] ...

  9. javascript:apply方法

    1.        apply和call的区别在哪里 2.        什么情况下用apply,什么情况下用call 3.        apply的其他巧妙用法(一般在什么情况下可以使用apply ...

  10. Java 反射机制(包括组成、结构、示例说明等内容)

    第1部分 Java 反射机制介绍 Java 反射机制.通俗来讲呢,就是在运行状态中,我们可以根据“类的部分已经的信息”来还原“类的全部的信息”.这里“类的部分已经的信息”,可以是“类名”或“类的对象” ...