angular把echarts封装为指令（配合requirejs）

1、在require中配置echartsjs文件

2、在directives下定义指令（定义为全局的指令，任何页面调用都可以）

 

define(['app','echarts'],function(app,echarts){
    app.register.directive('bar',function(){
           return {
            scope: {
                legend: "=",
                item: "=",
                data: "="
            },
            restrict: 'EA',
            template: '<div id="barId" style="width:400px;border:2px solid blue;height:400px;float:left;"></div>',
            replace: true,
           link: function($scope, iElm, iAttrs, controller) {
               var option = {
                   tooltip: {
                       show: true,
                       trigger: "axis"
                   },
                   legend: {
                       data:$scope.legend
                   },
                   xAxis: [{
                       type: 'value'
                   }],
                   yAxis: [{
                       type: 'category',
                       data: $scope.item
                   }],
                   series: function() {
                       var serie = [];
                       for (var i = 0; i < $scope.legend.length; i++) {
                           var item = {
                               name: $scope.legend[i],
                               type: 'bar',
                               data: $scope.data[i]
                           };
                           serie.push(item);
                       }
                       return serie;
                   }()
               };
               var myChart = echarts.init(document.getElementById('barId'),'macarons');
                myChart.setOption(option);
            }
        };
    })

});

 

3、路由配置的时候需要注入指令

4、页面调用指令

      注：“=”后面的值可以自定义名称、但要和controller中定义的$scope.后的值对应

5、controller中定义数据：本例中写的假数据（可异步获取）

 

        

 

6、页面效果