在Vue中使用echarts的方法


Posted in Javascript onFebruary 05, 2018

上篇文章给大家介绍了 在 webpack 中使用 ECharts的实例详解 ,可以点击查看。

1. 使用NPM安装(全局引入)

执行下面的命令:

npm install echarts--save

引入echarts模块

在Vue项目的main.js中引入echarts模块,即是写入如下代码:

import echarts from 'echarts'
Vue.prototype.$echarts = echarts;

2. 按需引入

上面全局引入会将所有的echarts图表打包,导致体积过大,我解决这一问题,可以使用require按需引入即是需要什么就引入什么:

即是:

let echarts = require('echarts/lib/echarts')

3. 直接引用

在index.html文件中全局引入,使用script标签引入

<script src="/static/js/echarts/echarts.js"></script>

注意:src中写入echarts的路径;

然后再vue项目build目录下找到webpack.base.conf.js,配置文件,在module.exports对象中添加externals属性,然后配置echarts所在的路径:

module.exports = {
.....
externals: {
// 路径:命名空间
 'echarts/dist/echarts':'echarts',
}
};

总结

以上所述是小编给大家介绍的在Vue中使用echarts的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQueryUI如何自定义组件实现代码
Nov 14 Javascript
jquery.uploadify插件在chrome浏览器频繁崩溃解决方法
Mar 01 Javascript
自己编写的支持Ajax验证的JS表单验证插件
May 15 Javascript
javascript中if和switch,==和===详解
Jul 30 Javascript
JavaScript实现给按钮加上双重动作的方法
Aug 14 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形网络(1)
Nov 30 Javascript
node.js路径处理方法以及绝对路径详解
Mar 04 Javascript
angular 用拦截器统一处理http请求和响应的方法
Jun 08 Javascript
开发Vue树形组件的示例代码
Dec 21 Javascript
node.js博客项目开发手记
Mar 16 Javascript
分析javascript原型及原型链
Mar 18 Javascript
详解vue页面首次加载缓慢原因及解决方案
Nov 06 Javascript
JavaScript中Object基础内部方法图
Feb 05 #Javascript
基于axios封装fetch方法及调用实例
Feb 05 #Javascript
JS设计模式之观察者模式实现实时改变页面中金额数的方法
Feb 05 #Javascript
JS中Map和ForEach的区别
Feb 05 #Javascript
完美解决axios跨域请求出错的问题
Feb 05 #Javascript
vue 页面加载进度条组件实例
Feb 05 #Javascript
JS设计模式之状态模式概念与用法分析
Feb 05 #Javascript
You might like
浅谈discuz密码加密的方式
2014/05/22 PHP
php防止sql注入之过滤分页参数实例
2014/11/03 PHP
PHP中实现获取IP和地理位置类分享
2015/02/10 PHP
PHP+shell实现多线程的方法
2015/07/01 PHP
盘点PHP和ASP.NET的10大对比!
2015/12/24 PHP
PHP中strpos、strstr和stripos、stristr函数分析
2016/06/11 PHP
PHP中SQL查询语句的id=%d解释(推荐)
2016/12/10 PHP
PHP进阶学习之类的自动加载机制原理分析
2019/06/18 PHP
php实现微信小程序授权登录功能(实现流程)
2019/11/13 PHP
jquery 指南/入门基础
2007/11/30 Javascript
msn上的tab功能Firefox对childNodes处理的一个BUG
2008/01/21 Javascript
JavaScript使用技巧精萃[代码非常实用]
2008/11/21 Javascript
jquery中ajax调用json数据的使用说明
2011/03/17 Javascript
firefox下jquery iframe刷新页面提示会导致重复之前动作
2012/12/17 Javascript
jQuery实现带渐显效果的人物多级关系图代码
2015/10/16 Javascript
jQuery实现加入收藏夹功能(主流浏览器兼职)
2016/12/24 Javascript
js实现自定义进度条效果
2017/03/15 Javascript
小程序实现单选多选功能
2018/11/04 Javascript
JS闭包经典实例详解
2018/12/20 Javascript
react-native聊天室|RN版聊天App仿微信实例|RN仿微信界面
2019/11/12 Javascript
JS代码优化的8点建议
2020/02/04 Javascript
[07:52]2014DOTA2 TI逗比武士游V社解说背后的故事
2014/07/10 DOTA
python实现类之间的方法互相调用
2018/04/29 Python
Python基础之字符串常见操作经典实例详解
2020/02/26 Python
HTML5 HTMLCollection和NodeList的区别详解
2020/04/29 HTML / CSS
佳能加拿大网上商店:Canon eStore Canada
2018/04/04 全球购物
Moss Bros官网:英国排名第一的西装店
2020/02/26 全球购物
params有什么用
2016/03/01 面试题
室内设计实习自我鉴定
2013/09/25 职场文书
外科实习自我鉴定
2013/10/06 职场文书
实习生体会的自我评价范文
2013/11/28 职场文书
2013年员工自我评价范文
2013/12/27 职场文书
中专生毕业个人鉴定
2014/02/26 职场文书
销售顾问工作计划书
2014/08/15 职场文书
《夸父追日》教学反思
2016/02/20 职场文书
springboot创建的web项目整合Quartz框架的项目实践
2022/06/21 Java/Android