angular1使用echarts2繪製圖標

一.繪製柱狀圖：直接上代碼

1.首先下載echarts-all文件（這裏就不贅述了），而後是建立一個bar.js及內容以下：

bar.js內容：

var app = require("../app");
app.directive("barY",["$http","regex",function ($http) {

    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);
        }
    };
}]);記得在main.js導出bar.js，不然沒法使用額。
接下來是在對應的.html文件和.js文件寫對應代碼，以下：
html內容:

<bar-y id="bar" legend="legendBar" item="itemBar" data="dataBar"></bar-y>
js文件內容：

var app = require("../app");

app.controller("welcomeCtrl", ["$scope", function($scope) {
   // 柱狀圖
    $scope.legendBar = [""];
    $scope.itemBar = ['XX企業', 'XX企業', 'XX企業', 'XX企業', 'XX企業', 'XX企業'];  //Y軸展現數據
    $scope.dataBar = [
        [5, 10, 10, 20, 30, 40] //2015年數據
    ];

}]);效果以下：