在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 相关文章推荐
addEventListener和attachEvent二者绑定的执行函数中的this不相同
Dec 09 Javascript
js关闭当前页面(窗口)的几种方式总结
Mar 05 Javascript
dwz 如何去掉ajaxloading具体代码
May 22 Javascript
单击复制文字兼容各浏览器的完美解决方案
Jul 04 Javascript
js入门之Function函数的使用方法【新手必看】
Nov 22 Javascript
JS实现队列的先进先出功能示例
May 10 Javascript
微信小程序实现打卡日历功能
Sep 21 Javascript
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
Apr 28 jQuery
基于 vue-skeleton-webpack-plugin 的骨架屏实战
Aug 05 Javascript
Vue实现手机扫描二维码预览页面效果
May 28 Javascript
深入浅析vue全局环境变量和模式
Apr 28 Javascript
微信小程序实现购物车小功能
Dec 30 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添加MySQL数据记录代码
2008/06/07 PHP
PHP MVC模式在网站架构中的实现分析
2010/03/04 PHP
检查用户名是否已在mysql中存在的php写法
2014/01/20 PHP
PHP 实现类似js中alert() 提示框
2015/03/18 PHP
Thinkphp 5.0实现微信企业付款到零钱
2018/09/30 PHP
Windows平台PHP+IECapt实现网页批量截图并创建缩略图功能详解
2019/08/02 PHP
网页和浏览器兼容性问题汇总(draft1)
2009/06/01 Javascript
JS实现的用来对比两个用指定分隔符分割的字符串是否相同
2014/09/19 Javascript
js读取cookie方法总结
2014/10/31 Javascript
JavaScript实现按照指定长度为数字前面补零输出的方法
2015/03/19 Javascript
纯JavaScript实现的分页插件实例
2015/07/14 Javascript
js实现简单的验证码
2015/12/25 Javascript
使用基于Node.js的构建工具Grunt来发布ASP.NET MVC项目
2016/02/15 Javascript
JavaScript中的操作符类型转换示例总结
2016/05/30 Javascript
Angular2使用Angular-CLI快速搭建工程(二)
2017/05/21 Javascript
将angular.js项目整合到.net mvc中的方法详解
2017/06/29 Javascript
教你5分钟学会用requirejs(必看篇)
2017/07/25 Javascript
JS随机数产生代码分享
2018/02/24 Javascript
jquery 通过ajax请求获取后台数据显示在表格上的方法
2018/08/08 jQuery
Node.js控制台彩色输出的方法与原理实例详解
2019/12/01 Javascript
JS函数进阶之prototy用法实例分析
2020/01/15 Javascript
python编写的最短路径算法
2015/03/25 Python
python抓取最新博客内容并生成Rss
2015/05/17 Python
为什么str(float)在Python 3中比Python 2返回更多的数字
2018/10/16 Python
linux环境下Django的安装配置详解
2019/07/22 Python
利用Python复制文件的9种方法总结
2019/09/02 Python
Python类super()及私有属性原理解析
2020/06/15 Python
Python实现自动签到脚本功能
2020/08/20 Python
英国最大的宠物商店:Pets at Home
2019/04/17 全球购物
文秘专业自荐信
2013/10/14 职场文书
2014新年寄语
2014/01/20 职场文书
生态养殖创业计划书
2014/05/06 职场文书
党员自评材料范文
2014/12/17 职场文书
奠基仪式致辞
2015/07/30 职场文书
2019年度行政文员工作计划范本!
2019/07/04 职场文书
分享python函数常见关键字
2022/04/26 Python