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>



Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐