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

来源：互联网发布：怎么看是淘宝客推广的编辑：程序博客网时间：2024/06/06 19:46

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

效果图如下：

代码：下载

2 0