快捷導(dǎo)航

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

更新時(shí)間：2016年10月26日 11:09:28 投稿：daisy

之前因?yàn)轫?xiàng)目的需求，第一次系統(tǒng)的使用了angular這一優(yōu)秀的js框架，其所擁有的許多優(yōu)秀特性極大的方便了項(xiàng)目的開(kāi)發(fā)，然而在開(kāi)發(fā)中也遇到過(guò)不少的問(wèn)題，趁著最近有時(shí)間給大家總結(jié)一下，這篇文章將會(huì)介紹使用angularjs1結(jié)合百度的圖表插件echart作為例子用以演示。

第一步：準(zhǔn)備

首先我們要做的是在我們的項(xiàng)目中引入我們所需要的依賴(lài)，假設(shè)你已經(jīng)在你的電腦上已經(jīng)安裝好了node與cnpm只需要利用控制臺(tái)在你的項(xiàng)目目錄下使用如下命令

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

在安裝完畢后你將會(huì)得到一個(gè)命名為node_modules的文件夾，而我們需要的東西都在里面，當(dāng)一切準(zhǔn)備完畢后我們就可以開(kāi)始我們的開(kāi)發(fā)了。

第二步：開(kāi)發(fā)

我認(rèn)為在angular中使用其他插件的最好方法是使用指令的形式在項(xiàng)目中引入，這樣做有許多好處，其中最明顯的好處便是當(dāng)項(xiàng)目中需要引入多種插件時(shí)可以使用各種不同的指令將他們分離并且還具有一次開(kāi)發(fā)各處使用的組件化特點(diǎn)。
首先我創(chuàng)建了如下目錄的angular的項(xiàng)目

其中index.html作為主要頁(yè)面我們需要在其中利用script標(biāo)簽引入所有會(huì)被用到的依賴(lài)，但是過(guò)多script標(biāo)簽會(huì)拖累整個(gè)頁(yè)面的加載速度，需要優(yōu)化的話可以使用webpack對(duì)他們進(jìn)行打包，這個(gè)感興趣的可以下去自行了解。對(duì)于angular來(lái)說(shuō)其項(xiàng)目會(huì)自動(dòng)生成一個(gè)作用域，當(dāng)你想要在angular項(xiàng)目中使用其他獨(dú)立的插件時(shí)通常我們做的第一件事是將這個(gè)插件引入到angular的作用域中，因此在項(xiàng)目中我創(chuàng)建了一個(gè)factory用于將echart傳入到angular的作用域內(nèi)

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

這時(shí)只需要在創(chuàng)建的指令中直接引用之前創(chuàng)建的名為echarts的factory我們就可以在指令內(nèi)直接使用echarts的這一插件了。

測(cè)試時(shí)的代碼如下

.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',
 }
}]);

從控制臺(tái)中的輸出我們很容易的就可以看到echarts被引入到了指令內(nèi)，這個(gè)時(shí)候我們就可以利用echarts在angular的項(xiàng)目中進(jìn)行操作了。