使用angularjs的directive来封装echarts对数据可视化,有利于网页的分层,记录下工作中使用过的方式,其中directive代码如下:
app.directive('eChart', function($http, $window) {
function link($scope, element, attrs) {
var myChart = echarts.init(element[0]);
attrs.$observe('eData', function() {//通过$observe监听attrs中绑定的option属性,可以通过ajax请求数据,动态更新图表。
var option = $scope.$eval(attrs.eData);
if (angular.isObject(option)) {
myChart.setOption(option);
}
}, true);
$scope.getDom = function() {
return {
'height': element[0].offsetHeight,
'width': element[0].offsetWidth
};
};
$scope.$watch($scope.getDom(), function() {
// resize echarts图表
myChart.resize();
}, true);
}
return {
restrict: 'A',
link: link
};
});
html中代码如下:
<div e-chart e-data="{{UserTypeOption}}">//因为监听是使用&observe,所以e-data可以通过{{ }}传入
</div>
PS.其中$eval可以查看http://www.cnblogs.com/stephenykk/p/3962617.html