在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 相关文章推荐
一个可以随意添加多个序列的tag函数
Jul 21 Javascript
js 加载并解析XML字符串的代码
Dec 13 Javascript
JS对img进行操作(换图片/切图/轮换/停止)
Apr 17 Javascript
JS获取屏幕高度的简单实现代码
May 24 Javascript
Javascript中document.referrer隐藏来源的方法
Jan 16 Javascript
React简单介绍
May 24 Javascript
浅谈Angular2 模块懒加载的方法
Oct 04 Javascript
Vue添加请求拦截器及vue-resource 拦截器使用
Nov 23 Javascript
CSS3结合jQuery实现动画效果及回调函数的实例
Dec 27 jQuery
vue自定义底部导航栏Tabbar的实现代码
Sep 03 Javascript
jQuery实现上下滚动公告栏详细代码
Nov 21 jQuery
JS实现的进制转换,浮点数相加,数字判断操作示例
Nov 09 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管理内存函数 memory_get_usage()使用介绍
2012/09/23 PHP
ThinkPHP实现递归无级分类――代码少
2015/07/29 PHP
使用PHP+AJAX让WordPress动态加载文章的教程
2015/12/11 PHP
PHP生成和获取XML格式数据的方法
2016/03/04 PHP
设定php简写功能的方法
2019/11/28 PHP
防止页面被iframe(兼容IE,Firefox火狐)
2010/07/04 Javascript
用js实现的模拟jquery的animate自定义动画(2.5K)
2010/07/20 Javascript
新手常遇到的一些jquery问题整理
2010/08/16 Javascript
js调用webservice中的方法实现思路及代码
2013/02/25 Javascript
JavaScript中Number.MAX_VALUE属性的使用方法
2015/06/04 Javascript
JS+CSS实现下拉列表框美化效果(3款)
2015/08/15 Javascript
AngularJS入门心得之directive和controller通信过程
2016/01/25 Javascript
AngularJS 中的事件详解
2016/07/28 Javascript
详解vue嵌套路由-query传递参数
2017/05/23 Javascript
nodejs开发微信小程序实现密码加密
2017/07/11 NodeJs
javascript 中事件冒泡和事件捕获机制的详解
2017/09/01 Javascript
layui实现数据分页功能(ajax异步)
2019/07/27 Javascript
VUE实现图片验证码功能
2020/11/18 Javascript
webpack.DefinePlugin与cross-env区别详解
2020/02/23 Javascript
python实现的登录和操作开心网脚本分享
2014/07/09 Python
Django在Win7下的安装及创建项目hello word简明教程
2014/07/14 Python
Python 创建子进程模块subprocess详解
2015/04/08 Python
python查询sqlite数据表的方法
2015/05/08 Python
Python2.7.10以上pip更新及其他包的安装教程
2018/06/12 Python
python树莓派红外反射传感器
2019/01/21 Python
使用TensorFlow对图像进行随机旋转的实现示例
2020/01/20 Python
HTML5 Canvas入门学习教程
2016/03/17 HTML / CSS
俄罗斯披萨、寿司和面食送货到家服务:2 Берега
2019/12/15 全球购物
英国时尚配饰、珠宝和服装网站:KJ Beckett
2020/01/23 全球购物
药学专业个人的自我评价
2013/12/31 职场文书
2015世界地球日活动总结
2015/02/09 职场文书
2016年基层党组织公开承诺书
2016/03/25 职场文书
开发一个封装iframe的vue组件
2021/03/29 Vue.js
centos8安装MongoDB的详细过程
2021/10/24 MongoDB
SQL Server的存储过程与触发器以及系统函数和自定义函数
2022/04/10 SQL Server
PostgreSQL常用字符串分割函数整理汇总
2022/07/07 PostgreSQL