var app = angular.module("app", ['ngDatepicker']);
    app.controller("AppController", function ($scope, $http) {
        //搜尋
        $scope.searchData = function () {


            try {
                var timeStart = $scope.search.TimeStart + '-' + 1;
                var timeEnd = $scope.search.TimeEnd + '-' + 1;


                var postData = {
                    timeStart: timeStart,
                    timeEnd: timeEnd
                };


                $http.post('/Analysis/GetSalesAchievementRanked', postData).success(function (result) {


                    $scope.$broadcast("chartData", result);


                }).error(function (e) {
                    alert('伺服器內部錯誤');
                });


            } catch (ex) {


            }


        }
    }); 




 app.directive("echarts", function () {
        return {
            require: '?ngModel',
            restrict: 'C',
            link: function ($scope, element, option, ngModel) {


                //接受控制器返回的訊息
                $scope.$on("chartData", function (event, data) {
                    var labels = new Array();
                    var datas = new Array();
                    var datasimg = new Array();


                    for (var i = 0; i < data.length; i++) {
                        labels.push(data[i].salesName);
                        datas.push({
                            value: data[i].saleMoney,
                            symbol: 'rect'
                        });


                        datasimg.push({
                            value: data[i].saleMoney,
                            symbol: 'image://' + (data[i].profile != null ? data[i].profile : '@App.assets/images/defaultpt.png'),
                            symbolSize: [28, 28]
                        });


                    }


                    var barHeitht = 30 * datas.length;
                    var pieHeight = barHeitht - 335;
                    $(element).css('height', barHeitht + 'px');
                    var myChart = echarts.init($(element)[0]);


                    // 圖表顯示提示資訊
                    myChart.showLoading({
                        text: "圖表資料正在努力載入..."
                    });
                    myChart.hideLoading();
                    myChart.setOption({
                        title: {
                            text: ''
                        },
                        tooltip: {
                            trigger: 'axis',
                            formatter: "{a}<br/> {b} : {c}元",
                            axisPointer: { // 座標軸指示器，座標軸觸發有效
                                type: 'none' // 預設為直線，可選為：'line' | 'shadow'
                            }
                        },
                        legend: {
                            data: []
                        },
                        grid: {
                            left: '19%',
                            right: '12%',
                            top: '10px',
                            bottom: '10px'
                        },
                        xAxis: [{
                            type: 'value',
                            boundaryGap: [0, 0.01],
                            position: 'top',
                            name: '業績',
                            nameTextStyle: {
                                color: '#49433f',
                                fontSize: 10
                            },
                            axisLine: {
                                lineStyle: {
                                    color: '#e2e2e2',
                                    width: '1'
                                }
                            },
                            axisTick: {
                                show: true,
                                inside: true,
                                lineStyle: {
                                    color: '#e2e2e2',
                                    width: '1'
                                }
                            },
                            splitLine: {
                                show: false
                            },
                            axisLabel: {
                                show: false
                            }
                        }],
                        yAxis: [{
                            type: 'category',
                            axisLine: {
                                lineStyle: {
                                    color: '#e2e2e2',
                                    width: '1'
                                }
                            },
                            axisLabel: {
                                textStyle: {
                                    fontSize: 13,
                                    color: '#000'
                                }
                            },
                            axisTick: {
                                show: false
                            },
                            splitLine: {
                                show: false
                            },
                            data: labels
                        }],
                        series: [{
                            name: '銷售業績',
                            type: 'pictorialBar',
                            data: datas,
                            itemStyle: {
                                normal: {
                                    //color: ['rgba(75,192,192,0.3)'],
                                    color: function (params) {
                                        //首先定義一個數組 
                                        var colorList = [
                                            '#FF9900', '#CAE1FF', '#BF3EFF', '#00CCFF', '#ff8a23', '#ADFF2F', '#EFE42A', '#EE3A8C', '#EEE685', '#31F0CA',
                                            '#FF4040', '#FFB6C1', '#FFEC8B', '#00ff99', '#993366', '#ff6699', '#ff99ff', '#99ccff',
                                        '#FF9900', '#ff66ff', '#64BD3D', '#FF82AB', '#29AAE3',
                                        '#DB7093', '#ff66ff', '#C43C57', '#4169E1',
                                        '#48D1CC', '#4F94CD', '#CDB38B'
                                        ];
                                        return colorList[params.dataIndex]
                                    },
                                    barBorderRadius: 0,
                                    label: {
                                        show: false,
                                        position: 'right',
                                        textStyle: {
                                            color: '#49433f',
                                            fontSize: 13
                                        }
                                    }
                                }
                            }
                        }, {
                            name: '銷售業績',
                            type: 'pictorialBar',
                            data: datasimg,
                            symbolPosition: 'end',
                            symbolOffset: ['120%', 0],
                            itemStyle: {
                                normal: {
                                    //color: ['rgba(75,192,192,0.3)'],
                                    barBorderRadius: 10,
                                    label: {
                                        show: true,
                                        position: 'right',
                                        textStyle: {
                                            color: '#49433f',
                                            fontSize: 13
                                        }
                                    }
                                }
                            }
                        }]
                    });


                    window.onresize = myChart.resize;
                });


            }
        }
    });








   <div class="row padding15-30 white-bg">
        <div class="rank-b echarts" id="dServantRankBar" style="height:500px"></div>
    </div><!--row -->