AngularJS中如何使用echart插件示例详解


Posted in Javascript onOctober 26, 2016

第一步:准备

首先我们要做的是在我们的项目中引入我们所需要的依赖,假设你已经在你的电脑上已经安装好了nodecnpm只需要利用控制台在你的项目目录下使用如下命令

1. cnpm install angular --save
 2. cnpm install echarts --save

在安装完毕后你将会得到一个命名为node_modules的文件夹,而我们需要的东西都在里面,当一切准备完毕后我们就可以开始我们的开发了。

第二步:开发

我认为在angular中使用其他插件的最好方法是使用指令的形式在项目中引入,这样做有许多好处,其中最明显的好处便是当项目中需要引入多种插件时可以使用各种不同的指令将他们分离并且还具有一次开发各处使用的组件化特点。
首先我创建了如下目录的angular的项目

AngularJS中如何使用echart插件示例详解

其中index.html作为主要页面我们需要在其中利用script标签引入所有会被用到的依赖,但是过多script标签会拖累整个页面的加载速度,需要优化的话可以使用webpack对他们进行打包,这个感兴趣的可以下去自行了解。对于angular来说其项目会自动生成一个作用域,当你想要在angular项目中使用其他独立的插件时通常我们做的第一件事是将这个插件引入到angular的作用域中,因此在项目中我创建了一个factory用于将echart传入到angular的作用域内

.factory('echarts',function(){
 return echarts;
});

这时只需要在创建的指令中直接引用之前创建的名为echarts的factory我们就可以在指令内直接使用echarts的这一插件了。

测试时的代码如下

.directive('paintDirective',['echarts',function(echarts){
 console.log(echarts);
 return {
  restrict:'E',
  controller: ['$scope','$rootScope',function($scope,$rootScope){
   console.log('123');
  }],
  templateUrl:'../scripts/template/paintTemplate.html',
 }
}]);

从控制台中的输出我们很容易的就可以看到echarts被引入到了指令内,这个时候我们就可以利用echarts在angular的项目中进行操作了。

AngularJS中如何使用echart插件示例详解

总结

以上就是在AngularJS中使用插件的全部内容,希望本文的内容对大家学习或者使用AngularJS能有所帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
IE 下的只读 innerHTML
Aug 21 Javascript
Javascript验证用户输入URL地址是否为空及格式是否正确
Oct 09 Javascript
JavaScript实现16进制颜色值转RGB的方法
Feb 09 Javascript
JavaScript中的getTime()方法使用详解
Jun 10 Javascript
基于Phantomjs生成PDF的实现方法
Nov 07 Javascript
js前端实现多图图片上传预览的两个方法(推荐)
Nov 18 Javascript
JavaScript 控制字体大小设置的方法
Nov 23 Javascript
js倒计时显示实例
Dec 11 Javascript
原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面
Nov 01 Javascript
vue-scroller记录滚动位置的示例代码
Jan 17 Javascript
对vue 键盘回车事件的实例讲解
Aug 25 Javascript
javascript实现用户必须勾选协议实例讲解
Mar 24 Javascript
BootStrap modal模态弹窗使用小结
Oct 26 #Javascript
BootStrap实现带有增删改查功能的表格(DEMO详解)
Oct 26 #Javascript
BootStrap tooltip提示框使用小结
Oct 26 #Javascript
Bootstrap CDN和本地化环境搭建
Oct 26 #Javascript
浅谈jquery之on()绑定事件和off()解除绑定事件
Oct 26 #Javascript
通过网页查看JS源码中汉字显示乱码的解决方法
Oct 26 #Javascript
Bootstrap 实现查询的完美方法
Oct 26 #Javascript
You might like
新版PHP将向Java靠拢
2006/10/09 PHP
微信营销平台系统?刮刮乐的开发
2014/06/10 PHP
Yii 框架入口脚本示例分析
2020/05/19 PHP
php+js实现的拖动滑块验证码验证表单操作示例【附源码下载】
2020/05/27 PHP
firefox下jquery iframe刷新页面提示会导致重复之前动作
2012/12/17 Javascript
JQuery 获取json数据$.getJSON方法的实例代码
2013/08/02 Javascript
jquery网页回到顶部效果(图标渐隐,自写)
2014/06/16 Javascript
Python脚本后台运行的几种方式
2015/03/09 Javascript
jquery实现可点击伸缩与展开的菜单效果代码
2015/08/31 Javascript
浅谈JS继承_借用构造函数 & 组合式继承
2016/08/16 Javascript
jQuery图片前后对比插件beforeAfter用法示例【附demo源码下载】
2016/09/20 Javascript
Vue实现双向绑定的原理以及响应式数据的方法
2018/07/02 Javascript
vue单文件组件lint error自动fix与styleLint报错自动fix详解
2019/01/08 Javascript
使用 Element UI Table 的 slot-scope方法
2019/10/10 Javascript
解决vue-cli项目开发运行时内存暴涨卡死电脑问题
2019/10/29 Javascript
浅析vue中的provide / inject 有什么用处
2019/11/10 Javascript
原生js+ajax分页组件
2020/01/30 Javascript
[13:40]TI3青蛙君全程回顾 DOTA2我们为梦想再战
2013/09/13 DOTA
python广度优先搜索得到两点间最短路径
2019/01/17 Python
python使用参数对嵌套字典进行取值的方法
2019/04/26 Python
Python中filter与lambda的结合使用详解
2019/12/24 Python
Python3 main函数使用sys.argv传入多个参数的实现
2019/12/25 Python
Win10下用Anaconda安装TensorFlow(图文教程)
2020/06/18 Python
TensorFlow保存TensorBoard图像操作
2020/06/23 Python
Python 多进程原理及实现
2020/12/21 Python
CSS3基础(RGBa、text-shadow、box-shadow、border-radius)
2012/11/13 HTML / CSS
家得宝加拿大家装网上商店:The Home Depot加拿大
2016/08/27 全球购物
魅力惠奢品线上平台:MEI.COM
2016/11/29 全球购物
电子商务专业毕业生工作推荐信
2013/11/17 职场文书
美容师的职业规划书
2013/12/27 职场文书
政法干警核心价值观心得体会
2014/09/11 职场文书
2014年设计师工作总结
2014/11/25 职场文书
2014年城管个人工作总结
2014/12/08 职场文书
2014年个人教学工作总结
2014/12/09 职场文书
2015年高校图书馆工作总结
2015/04/30 职场文书
tomcat正常启动但网页却无法访问的几种解决方法
2022/05/06 Servers