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 相关文章推荐
JavaScript库 开发规则
Jan 31 Javascript
入门基础学习 ExtJS笔记(一)
Nov 11 Javascript
firebug的一个有趣现象介绍
Nov 30 Javascript
Extjs中TabPane如何嵌套在其他网页中实现思路及代码
Jan 27 Javascript
JQuery slideshow的一个小问题(如何发现及解决过程)
Feb 06 Javascript
jQuery实现隔行背景色变色
Nov 24 Javascript
原生JavaScript编写俄罗斯方块
Mar 30 Javascript
javascript实现在网页任意处点左键弹出隐藏菜单的方法
May 13 Javascript
AngularJS路由切换实现方法分析
Mar 17 Javascript
详解Vue.js 2.0 如何使用axios
Apr 21 Javascript
vue.js动态数据绑定学习笔记
May 19 Javascript
jQuery判断自定义属性data-val用法示例
Jan 07 jQuery
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循环语句笔记(foreach,list)
2011/11/29 PHP
Yii2 ActiveRecord多表关联及多表关联搜索的实现
2016/06/30 PHP
php版微信自动登录并获取昵称的方法
2016/09/23 PHP
详解Yii2高级版引入bootstrap.js的一个办法
2017/03/21 PHP
Extjs学习笔记之二 初识Extjs之Form
2010/01/07 Javascript
jQuery将多条数据插入模态框的示例代码
2014/09/25 Javascript
用js读、写、删除Cookie代码续篇
2014/12/03 Javascript
js实现可折叠展开的手风琴菜单效果
2015/09/07 Javascript
谈谈impress.js初步理解
2015/09/09 Javascript
Vue.js自定义指令的用法与实例解析
2017/01/18 Javascript
Vue.js学习笔记之常用模板语法详解
2017/07/25 Javascript
JS内部事件机制之单线程原理
2018/07/02 Javascript
深入koa-bodyparser原理解析
2019/01/16 Javascript
Vue2.0实现简单分页及跳转效果
2019/07/29 Javascript
Python中返回字典键的值的values()方法使用
2015/05/22 Python
python 2.7.14安装图文教程
2018/04/08 Python
Python操作MySQL数据库的两种方式实例分析【pymysql和pandas】
2019/03/18 Python
python 将有序数组转换为二叉树的方法
2019/03/26 Python
python实现AES和RSA加解密的方法
2019/03/28 Python
python匿名函数lambda原理及实例解析
2020/02/07 Python
python程序输出无内容的解决方式
2020/04/09 Python
自学python用什么系统好
2020/06/23 Python
Django中Aggregation聚合的基本使用方法
2020/07/09 Python
pymysql模块使用简介与示例
2020/11/17 Python
python3字符串输出常见面试题总结
2020/12/01 Python
10张动图学会python循环与递归问题
2021/02/06 Python
Flask中jinja2的继承实现方法及实例
2021/03/03 Python
La Redoute英国官网:法国时尚品牌
2017/04/27 全球购物
美国最值得信赖的宠物药房:Allivet
2019/03/23 全球购物
英语专业毕业生自荐信
2013/10/28 职场文书
《秋姑娘的信》教学反思
2014/02/28 职场文书
李开复演讲稿
2014/05/24 职场文书
依法行政工作汇报材料
2014/10/28 职场文书
导游词怎么写
2015/02/04 职场文书
医院病假条范文
2015/08/17 职场文书
Python答题卡识别并给出分数的实现代码
2021/06/22 Python