angular结合echarts创建图表
angular结合echarts创建图表
原理：
利用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;
}
});
});
