下载安装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. HEOI2018翻盘记

    HEOI2018翻盘记 听说依照惯例要写一篇游记?好吧,没有退役,我已经谢天谢地了QAQ.那就用两句歌词做开头吧: "遠い遠い夢の終わり.悪夢に似た現実はもう昔日久远,梦之终结,那犹如噩梦的 ...

  2. BZOJ.2456.mode(绝对众数)

    题目链接 \(Description\) 限制空间(只能保留两个变量),求给定n个数中出现次数超过\(\frac{n}{2}\)的数. \(Solution\) 维护两个变量,\(now\)和\(cn ...

  3. Intel Code Challenge Final Round (Div. 1 + Div. 2, Combined) E. Goods transportation 动态规划

    E. Goods transportation 题目连接: http://codeforces.com/contest/724/problem/E Description There are n ci ...

  4. ibatis的缓存机制

    Cache        在特定硬件基础上(同时假设系统不存在设计上的缺漏和糟糕低效的SQL 语句)Cache往往是提升系统性能的最关键因素).        相对Hibernate 等封装较为严密的 ...

  5. 使用 IntraWeb (8) - 系统模板

    我们可以自定义系统错误模板, 编辑 IWError.html 放到模板文件夹后, 它将替换默认的模板. {在主页面, 这是要模拟一个系统错误} procedure TIWForm1.IWButton1 ...

  6. WCID Devices -- Windows Compatible ID Devices

    WCID Devices What is WCID? A WCID device, where WCID stands for "Windows Compatible ID", i ...

  7. HTML一些标签注意事项

    最近在IE10下运行一个以前的做web系统发现了两个小问题: 一.图片上使用"alt"属性来添加一些文字提示信息在IE10下无法正常显示出来 上网查了一下原因:原来是现在一些较新的 ...

  8. 窗体的Alpha通道透明色支持

    参考: http://www.delphibbs.com/delphibbs/dispq.asp?lid=2190768 Windows 2000后,为了支持类似MAC界面的Alpha通道混合效果,提 ...

  9. 安装oracle 11g环境变量ORACLE_HOME的一个问题 转

    http://blog.itpub.net/26129555/viewspace-1243467/报错内容: OUI-10137:An Oracle Home with name ORACLE_HOM ...

  10. h.264 x.264

    这是两个不同类型的东西. x264是视频编码器,H.264是视频编码格式. x264编出来的东西就是h.264的.举个例子来说,x264就好比画图或者photoshop,h.264就好比jpg,bmp ...