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 相关文章推荐
JQuery 图片延迟加载并等比缩放插件
Nov 09 Javascript
ajax 同步请求和异步请求的差异分析
Jul 04 Javascript
Jquery中显示隐藏的实现代码分析
Jul 26 Javascript
js实现Select下拉框具有输入功能的方法
Feb 06 Javascript
JavaScript和JQuery的鼠标mouse事件冒泡处理
Jun 19 Javascript
JS实现的适合做faq或menu滑动效果示例
Nov 17 Javascript
微信小程序 数组(增,删,改,查)等操作实例详解
Jan 05 Javascript
JavaScript轻松创建级联函数的方法示例
Feb 10 Javascript
使用DataTable插件实现异步加载数据
Nov 19 Javascript
深入浅出vue图片路径的实现
Sep 04 Javascript
jQuery实现轮播图源码
Oct 23 jQuery
微信小程序学习总结(四)事件与冒泡实例分析
Jun 04 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
PHP4 与 MySQL 数据库操作函数详解
2006/10/09 PHP
PHP中MD5函数使用实例代码
2008/06/07 PHP
腾讯CMEM的PHP扩展编译安装方法
2015/09/25 PHP
php如何比较两个浮点数是否相等详解
2019/02/12 PHP
Extjs Ext.MessageBox.confirm 确认对话框详解
2010/04/02 Javascript
jQuery验证Checkbox是否选中的代码 推荐
2011/09/04 Javascript
由JavaScript中call()方法引发的对面向对象继承机制call的思考
2011/09/12 Javascript
基于jquery的文章中所有图片width大小批量设置方法
2013/08/01 Javascript
jquery操作复选框checkbox的方法汇总
2015/02/05 Javascript
TinyMCE提交AjaxForm获取不到数据的解决方法
2015/03/05 Javascript
jQuery实现文本框输入同步的方法
2015/06/20 Javascript
原生js实现jquery函数animate()动画效果的简单实例
2016/08/21 Javascript
微信小程序tabBar模板用法实例分析【附demo源码下载】
2017/11/28 Javascript
Vue+Vux项目实践完整代码
2017/11/30 Javascript
微信小程序实现图片滚动效果示例
2018/12/05 Javascript
vue实现的网易云音乐在线播放和下载功能案例
2019/02/18 Javascript
vue实现菜单切换功能
2019/05/08 Javascript
微信小程序自定义toast组件的方法详解【含动画】
2019/05/11 Javascript
总结网络IO模型与select模型的Python实例讲解
2016/06/27 Python
python提取log文件内容并画出图表
2019/07/08 Python
python查找重复图片并删除(图片去重)
2019/07/16 Python
flask框架配置mysql数据库操作详解
2019/11/29 Python
Django中的session用法详解
2020/03/09 Python
解决Python中报错TypeError: must be str, not bytes问题
2020/04/07 Python
使用Python构造hive insert语句说明
2020/06/06 Python
css3实现画半圆弧线的示例代码
2017/11/06 HTML / CSS
css3 实现滚动条美化效果的实例代码
2021/01/06 HTML / CSS
九年级数学教学反思
2014/02/02 职场文书
2015年个人思想总结
2015/03/09 职场文书
党支部考察鉴定意见
2015/06/02 职场文书
对学校的意见和建议
2015/06/04 职场文书
小学教师教学随笔
2015/08/14 职场文书
初中班主任培训心得体会
2016/01/07 职场文书
年中了,该如何写好个人述职报告?
2019/07/02 职场文书
win10+anaconda安装yolov5的方法及问题解决方案
2021/04/29 Python
MySQL自定义函数及触发器
2022/08/05 MySQL