原理：
利用angularjs中的指令（directive）將echarts封裝。
步驟：
1.封裝函數：
app.directive('line', function() {
return {
restrict: 'E',
template: '<div style="height:400px;width:100px;"></div>',
replace: true,
link: function($scope, element, attrs, controller) {
var option = {
······
};
var myChart = echarts.init(document.getElementById("main"));
myChart.setOption(option);
}
};
});
2.創建塊用來放置圖表
<line id="main" legend="legend" item="item" data="data"></line>
指令（directive）的作用就是自定義元素。所以創建<line></line>
3.控制器獲得數據
app.controller('lineCtrl', function($scope) {
$scope.legend = ["Berlin", "London",'New York','Tokyo'];
$scope.item = ['Jan', 'Feb', 'Mar', 'Apr', 'Mar', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
$scope.data = [
[-1, 1, 3, 7, 13, 16, 18, 16, 15, 9, 4, 2], //Berlin
[0, 1, 4, 7, 12, 15, 16, 15, 15, 10, 6, 5], //London
[4, 4, 5, 10, 16, 22, 25, 24, 20, 14, 9, 3], //New York
[7, 6, 8, 14, 17, 22, 25, 27, 24, 17, 14, 10] //Tokyo
];
});
4.將echarts中得到的option配置放入函數中，並把數據調用進配置。
var option = { // 提示框，鼠標懸浮交互時的信息提示 tooltip: { show: true, trigger: 'item' }, // 圖例 legend: { data: $scope.legend }, // 橫軸坐標軸 xAxis: [{ type: 'category', data: $scope.item }], // 縱軸坐標軸 yAxis: [{ type: 'value' }], // 數據內容數組 series: function(){ var serie=[]; for(var i=0;i<$scope.legend.length;i++){ var item = { name : $scope.legend[i], type: 'line', data: $scope.data[i] }; serie.push(item); } return serie; }() };
完整測試代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>折線圖</title> </head> <!--加載AngularJS--> <script src="../producers/angular/angular.min.js"></script> <!--加載ECharts--> <script src="../producers/echars/echarts.js"></script> <body ng-app="app" ng-controller="lineCtrl"> <line id="main" legend="legend" item="item" data="data"></line> <script type="text/javascript"> var app = angular.module('app', []); app.controller('lineCtrl', function($scope) { $scope.legend = ["Berlin", "London",'New York','Tokyo']; $scope.item = ['Jan', 'Feb', 'Mar', 'Apr', 'Mar', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; $scope.data = [ [-1, 1, 3, 7, 13, 16, 18, 16, 15, 9, 4, 2], //Berlin [0, 1, 4, 7, 12, 15, 16, 15, 15, 10, 6, 5], //London [4, 4, 5, 10, 16, 22, 25, 24, 20, 14, 9, 3], //New York [7, 6, 8, 14, 17, 22, 25, 27, 24, 17, 14, 10] //Tokyo ]; }); app.directive('line', function() { return { scope: { id: "@", legend: "=", item: "=", data: "=" }, restrict: 'E', template: '<div style="height:400px;width:100px;"></div>', replace: true, link: function($scope, element, attrs, controller) { var option = { // 提示框，鼠標懸浮交互時的信息提示 tooltip: { show: true, trigger: 'item' }, // 圖例 legend: { data: $scope.legend }, // 橫軸坐標軸 xAxis: [{ type: 'category', data: $scope.item }], // 縱軸坐標軸 yAxis: [{ type: 'value' }], // 數據內容數組 series: function(){ var serie=[]; for(var i=0;i<$scope.legend.length;i++){ var item = { name : $scope.legend[i], type: 'line', data: $scope.data[i] }; serie.push(item); } return serie; }() }; var myChart = echarts.init(document.getElementById("main")); myChart.setOption(option); } }; }); </script> </body> </html>
5.引用json文件中的數據
注意：引用數據需要同步，angularjs中的$http沒有同步api，目測最簡單的方法，用ajax原生，直接設置為同步請求。
app.controller('histogramcontroller', function ($scope,$http) {
$.ajax({
type: "post",
url: "json/teacher/histogram.json",
cache:false,
async:false,
success: function(xmlobj){
$scope.item=xmlobj.dataline;
$scope.data=xmlobj.data;
}
});
});