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],}
	        ]
        };
    })
	//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();
	               
	            };
            }
        };
    }])

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!