AngularJS自定义Echarts标签 — 雷达图Radar
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);
}
};
});效果图如下：
代码：下载
声明：该文观点仅代表作者本人，牛骨文系教育信息发布平台，牛骨文仅提供信息存储空间服务。
- 上一篇： Echarts实现柱状图、雷达图、时间轴联动
- 下一篇： echart雷达图，自定义提示数据
