您的位置：首页 > Web前端 > AngularJS

AngularJS自定义Echarts标签 — 柱状图Bar

2015-08-21 15:41 726 查看

1、准备文件

AngularJS的js文件：angular.js

Echarts的js文件：echarts-all.js

2、html页面

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Y轴显示数据的柱状图</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/bar-y.js"></script>

<body ng-app="bar" ng-controller="barCtrl">
<bar-y id="main" legend="legend" item="item" data="data"></bar-y>
</body>
</html>

3、bar.js文件

var bar = angular.module('bar', []);

bar.controller('barCtrl', function($scope) {
$scope.legend = ["2015"];
$scope.item = ['XX企业', 'XX企业', 'XX企业', 'XX企业', 'XX企业', 'XX企业'];  //Y轴展示数据
$scope.data = [
[5, 10, 10, 20, 30, 40] //2015年数据
];
});

bar.directive('barY', function() {
return {
scope: {
id: "@",
legend: "=",
item: "=",
data: "="
},
restrict: 'E', // E = Element, A = Attribute, C = Class, M = Comment
template: '<div style="height:400px"></div>',
replace: true,
link: function($scope, iElm, iAttrs, controller) {
var option = {
tooltip: {
show: true,
trigger: "axis"
},
legend: {data:$scope.legend},
xAxis: [{
type: 'value'
}],
yAxis: [{
type: 'category',
data: $scope.item
}],
series: function() {
var serie = [];
for (var i = 0; i < $scope.legend.length; i++) {
var item = {
name: $scope.legend[i],
type: 'bar',
data: $scope.data[i]
};
serie.push(item);
}
return serie;
}()
};

// 基于准备好的dom，初始化echarts图表
var myChart = echarts.init(document.getElementById($scope.id),'macarons');
// 为echarts对象加载数据
myChart.setOption(option);
}
};
});

效果图如下：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航