AngularJS结合Echarts — 雷达图Radar-Article-IT72.COM

AngularJS结合Echarts — 雷达图Radar

Home / Article MrLee 2016-7-26 3876

本来是想实现一个动态获取例子，因为刚刚学也不知道怎么弄，于是就在网络上整了一个写死的例子。先学习下。我用jQuery实现异步总是不执行，不知道什么情况。
html页面

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>雷达图</title>
</head>
<!--加载AngularJS-->
<script src="js/angular/angular.js"></script>
<!--加载ECharts-->
<script src="js/echarts-2.2.7/build/dist/echarts-all.js"></script>
<script src="js/radar.js"></script>
<body ng-app="app" ng-controller="radarCtrl">
	<radar id="main" legend="legend" item="item" max="max" data="data"></radar>
</body>
</html>

radar.js文件

var app = angular.module('app', []);
app.controller('radarCtrl', function($scope) {
	$scope.legend = ['预算'];
	$scope.item = ['销售', '管理', '信息技术', '客服', '研发', '市场'];
	$scope.max = [55000,55000,55000,55000,55000,55000];
	$scope.data = [
		[4300, 10000, 28000, 35000, 50000, 19000]
	];
});
app.directive('radar', function() {
	return {
		scope: {
			id: "@",
			legend: "=",
			item: "=",
			max: "=",
			data: "="
		},
		restrict: 'E',
		template: '<div style="height:400px"></div>',
		replace: true,
		link: function($scope, element, attrs, controller) {
			var option = {
				tooltip: {
					trigger: 'axis'
				},
				legend: {
					orient: 'vertical',
					x: 'right',
					y: 'bottom',
					data: $scope.legend
				},
				polar: [{
					indicator: function(){
						var indicator = [];
						for(var i=0;i<$scope.item.length;i++){
							var item = {
								text: $scope.item[i],
								max: $scope.max[i] //设置最大值
							};
							indicator.push(item);
						};
						return indicator;
					}()
				}],
				series: [{
					type: 'radar',
					data: function(){
						var data = [];
						for(var i=0;i<$scope.legend.length;i++){
							var item = {
								name: $scope.legend[i],
								value: $scope.data[i]
							};
							data.push(item);
						}
						return data;
					}()
				}]
			};
			var myChart = echarts.init(document.getElementById($scope.id),'macarons');
			myChart.setOption(option);
		}
	};
});

2016-07-22 09-46-34

本文链接:https://it72.com/9808.htm