在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 相关文章推荐
jquery与google map api结合使用 控件,监听器
Mar 04 Javascript
javascript之querySelector和querySelectorAll使用介绍
Dec 20 Javascript
js判断浏览器类型的方法
Aug 07 Javascript
jquery eval解析JSON中的注意点介绍
Aug 23 Javascript
Js 去掉字符串中的空格(实现代码)
Nov 19 Javascript
推荐 21 款优秀的高性能 Node.js 开发框架
Aug 18 Javascript
JS实现带圆弧背景渐变效果的导航菜单代码
Oct 13 Javascript
基于JS实现EOS隐藏错误提示层代码
Apr 25 Javascript
jQuery实现文字自动横移
Jan 08 Javascript
VUE+elementui面包屑实现动态路由详解
Nov 04 Javascript
Vue extend的基本用法(实例详解)
Dec 09 Javascript
Vue实现腾讯云点播视频上传功能的实现代码
Aug 17 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
PHP insert语法详解
2008/06/07 PHP
可以保证单词完整性的PHP英文字符串截取代码分享
2014/07/15 PHP
thinkphp模板用法和内容输出实例
2014/11/28 PHP
php实现购物车功能(上)
2020/07/23 PHP
Zend Framework实现将session存储在memcache中的方法
2016/03/22 PHP
关于php unset对json_encode的影响详解
2018/11/14 PHP
php新建文件的方法实例
2019/09/26 PHP
jquery实现的超出屏幕时把固定层变为定位层的代码
2010/02/23 Javascript
JQuery扩展插件Validate—4设置错误提示的样式
2011/09/05 Javascript
浅谈JavaScript之事件绑定
2013/07/08 Javascript
ExtJS 刷新后如何默认选中刷新前最后一次选中的节点
2014/04/03 Javascript
javascript变量声明实例分析
2015/04/25 Javascript
深入浅析JavaScript中prototype和proto的关系
2015/11/15 Javascript
javaScript数组迭代方法详解
2016/04/14 Javascript
jQuery无刷新上传之uploadify3.1简单使用
2016/06/18 Javascript
Bootstrap + AngularJS 实现简单的数据过滤字符查找功能
2017/07/27 Javascript
使用jQuery实现页面定时弹出广告效果
2017/08/24 jQuery
JavaScript实现HTML5游戏断线自动重连的方法
2017/09/18 Javascript
Angular项目从新建、打包到nginx部署全过程记录
2017/12/09 Javascript
JS监听事件的叠加和移除功能
2018/11/19 Javascript
如何给element添加一个抽屉组件的方法步骤
2019/07/14 Javascript
layui 关闭open弹出框 刷新table表格页面的方法
2019/09/16 Javascript
vue 实现模糊检索并根据其他字符的首字母顺序排列
2019/09/19 Javascript
Vue2.0 实现页面缓存和不缓存的方式
2019/11/12 Javascript
python调用cmd复制文件代码分享
2013/12/27 Python
python实现将html表格转换成CSV文件的方法
2015/06/28 Python
python实现三次样条插值
2018/12/17 Python
Python中__repr__和__str__区别详解
2019/11/07 Python
基于Python3.7.1无法导入Numpy的解决方式
2020/03/09 Python
Python引入多个模块及包的概念过程解析
2020/09/21 Python
活动策划邀请函
2014/02/06 职场文书
家长给学校的建议书
2014/05/15 职场文书
小学生读书活动总结
2014/06/30 职场文书
情况说明书怎么写
2015/10/08 职场文书
Django框架中表单的用法
2022/06/10 Python
微软Win11 全新照片应用面向 Dev预览版推出 新版本上手体验图集
2022/09/23 数码科技