在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 相关文章推荐
实现复选框全选/全不选切换
Dec 23 Javascript
url 编码 js url传参中文乱码解决方案
Apr 11 Javascript
JavaScript的类型转换(字符转数字 数字转字符)
Aug 30 Javascript
js验证身份证号有效性并提示对应信息
Oct 19 Javascript
bootstrapvalidator之API学习教程
Jun 29 Javascript
Angular2 组件间通过@Input @Output通讯示例
Aug 24 Javascript
angular指令笔记ng-options的使用方法
Sep 18 Javascript
浅析Vue自定义组件的v-model
Nov 26 Javascript
微信小程序实现文字跑马灯效果
May 26 Javascript
微信小程序页面上下滚动效果
Nov 18 Javascript
jQuery实现图片随机切换、抽奖功能(实例代码)
Oct 23 jQuery
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
从MySQL数据库表中取出随机数据的代码
2007/09/05 PHP
PHP clearstatcache()函数详解
2010/03/02 PHP
PHP中常用的输出函数总结
2014/09/22 PHP
Javascript中的for in循环和hasOwnProperty结合使用
2013/06/05 Javascript
基于Jquery实现万圣节快乐特效
2015/11/01 Javascript
js不间断滚动的简单实现
2016/06/03 Javascript
js监听input输入框值的实时变化实例
2017/01/26 Javascript
angular.js 路由及页面传参示例
2017/02/24 Javascript
vue 实现数字滚动增加效果的实例代码
2018/07/06 Javascript
纯javascript前端实现base64图片下载(兼容IE10+)
2018/09/14 Javascript
vue框架制作购物车小球动画效果实例代码
2019/09/26 Javascript
js实现视图和数据双向绑定的方法分析
2020/02/05 Javascript
逐行分析鸿蒙系统的 JavaScript 框架(推荐)
2020/09/17 Javascript
Python基于csv模块实现读取与写入csv数据的方法
2018/01/18 Python
numpy中的ndarray方法和属性详解
2019/05/27 Python
Python中遍历列表的方法总结
2019/06/27 Python
Django 自定义分页器的实现代码
2019/11/24 Python
使用OpenCV circle函数图像上画圆的示例代码
2019/12/27 Python
Pytorch to(device)用法
2020/01/08 Python
浅谈在django中使用redirect重定向数据传输的问题
2020/03/13 Python
Python判断三段线能否构成三角形的代码
2020/04/12 Python
马来西亚最热门的在线时尚商店:FashionValet
2018/11/11 全球购物
学生会竞选自荐信
2013/10/12 职场文书
警示教育活动总结
2014/05/05 职场文书
环保标语大全
2014/06/12 职场文书
学生安全责任书范本
2014/07/24 职场文书
党员十八大心得体会
2014/09/12 职场文书
大学生职业生涯规划大赛作品(精品)
2014/09/17 职场文书
党员教师四风问题整改措施思想汇报
2014/10/08 职场文书
2014年药房工作总结
2014/11/22 职场文书
《藏戏》教学反思
2016/02/23 职场文书
简短的人生哲理(38句)
2019/08/13 职场文书
golang 实现Location跳转方式
2021/05/02 Golang
「SHOW BY ROCK!!」“雫シークレットマインド”组合单曲MV公开
2022/03/21 日漫
springboot集成redis存对象乱码的问题及解决
2022/06/16 Java/Android
Python中tqdm的使用和例子
2022/09/23 Python