AngularJS自定义Echarts标签 — 雷达图Radar

最新推荐文章于 2024-09-02 15:44:28 发布

暗夜无月

最新推荐文章于 2024-09-02 15:44:28 发布

阅读量7.6k

点赞数 3

分类专栏：前端文章标签： angularjs echarts html 图表工具 javascript

本文链接：https://blog.csdn.net/u010870890/article/details/47835697

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文介绍了如何在AngularJS应用中集成Echarts库，创建雷达图。首先需要引入AngularJS和Echarts的JavaScript文件，然后在HTML页面中设置图表容器，并在radar.js文件中编写配置代码，最终展示了一张雷达图的效果。

摘要由CSDN通过智能技术生成

1、准备文件

AngularJS的js文件：angular.js

Echarts的js文件：echarts-all.js

2、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>

3、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);
		}
	};
});

效果图如下：