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  否则会发生不生效 的问题