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

时间：2021-04-14 05:59:29

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


效果图如下：

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

代码：下载

标签：

相关文章