angular使用echarts折线图

echarts是开源的画图工具，在angular框架中引入echarts不能直接使用。需要新建一个directive

//echarts基本参数  
    app.factory('$echartsConfig', function () {  
        return {  
  
            tooltip : {  
                trigger: 'axis'  
            },  
            legend: {  
                data:[]  
            },  
            xAxis : [  
                {  
                    type : 'category',  
                    boundaryGap : false,  
                     data : [1,2,3,4,5,6]  
                }  
            ],  
            yAxis : [  
                {  
                    type : 'value'  
                     
                }  
            ],  
            series : [   
               {  
                    name:'',  
                    type:'line',  
                    data:[0,0,0,0,0,0],  
                }  
            ]  
        };  
    })  
    //echarts directive  
    .directive('echarts', ['$echartsConfig','$window', function ($echartsConfig,$window) {  
        return {  
            restrict: 'A',  
            link: function (scope, element, attrs) {  
                if (!scope.$echartsInstance)  
                    scope.$echartsInstance = {};  
                scope.$watch(attrs.echarts, function () {  
                    var option=angular.extend({},$echartsConfig,scope.$eval(attrs.echarts));  
                    if (option.id) {  
                        scope.$echartsInstance[option.id] = echarts.init(element[0]);  
                        scope.$echartsInstance[option.id].setOption(option);  
                    } else {  
                        scope.$echartsInstance = echarts.init(element[0]);  
                        scope.$echartsInstance.setOption(option);  
                    }  
                });  
                $window.onresize = function() {  
                    if(scope.$echartsInstance.searchTimeOption)  
                        scope.$echartsInstance.searchTimeOption.resize();  
                    if(scope.$echartsInstance.searchCostOption)  
                        scope.$echartsInstance.searchCostOption.resize();  
                    if(scope.$echartsInstance.searchNumOption)  
                        scope.$echartsInstance.searchNumOption.resize();  
                     
                };  
            }  
        };  
    }])  

　　html代码

<div class="panel-body" style="height:320px" echarts="searchCostOption" id="searchCost"></div>  

每次  获取数据  加 到$echartsConfig 当中 ，并重新 初始化 echarts.init()    searchCost   

在页面中需要先加载数据  后显示 echarts  否则会发生不生效 的问题