angular使用echarts折线图

前端之家收集整理的这篇文章主要介绍了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();
	               
	            };
            }
        };
    }])
HTML代码
<div class="panel-body" style="height:320px" echarts="searchCostOption" id="searchCost"></div>
原文链接:https://www.f2er.com/angularjs/149528.html

猜你在找的Angularjs相关文章