angularjs封裝echarts

使用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中代碼如下:

<p  e-chart e-data="{{UserTypeOption}}">//因為監聽是使用&observe,所以e-data可以通過{{ }}傳入
</p>

 

發佈留言