angular結合echarts建立圖表

時間 2019-11-16

標籤 angular 結合 echarts 建立圖表欄目 AngularJS 简体版

原文原文鏈接

原理：javascript

利用angularjs中的指令（directive）將echarts封裝。html

步驟：java

1.封裝函數：angularjs

 app.directive('line', function() {
        return {
            restrict: 'E',
            template: '<div  style="height:400px;width:100px;"></div>',
            replace: true,
            link: function($scope, element, attrs, controller) {
                var option = {
                   ······
                };
                var myChart = echarts.init(document.getElementById("main"));
                myChart.setOption(option);
            }
        };
    });

2.建立塊用來放置圖表ajax

<line id="main" legend="legend" item="item" data="data"></line>

指令（directive）的做用就是自定義元素。因此建立<line></line>json

3.控制器得到數據api

app.controller('lineCtrl', function($scope) {
        $scope.legend = ["Berlin", "London",'New York','Tokyo'];
        $scope.item = ['Jan', 'Feb', 'Mar', 'Apr', 'Mar', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
        $scope.data = [
            [-1, 1, 3, 7, 13, 16, 18, 16, 15, 9, 4, 2], //Berlin
            [0, 1, 4, 7, 12, 15, 16, 15, 15, 10, 6, 5], //London
            [4, 4, 5, 10, 16, 22, 25, 24, 20, 14, 9, 3],    //New York
            [7, 6, 8, 14, 17, 22, 25, 27, 24, 17, 14, 10]   //Tokyo
        ];
    });

4.將echarts中獲得的option配置放入函數中，並把數據調用進配置。數組

 var option = {
                    // 提示框，鼠標懸浮交互時的信息提示
                    tooltip: {
                        show: true,
                        trigger: 'item'
                    },
                    // 圖例
                    legend: {
                        data: $scope.legend
                    },
                    // 橫軸座標軸
                    xAxis: [{
                        type: 'category',
                        data: $scope.item
                    }],
                    // 縱軸座標軸
                    yAxis: [{
                        type: 'value'
                    }],
                    // 數據內容數組
                    series: function(){
                        var serie=[];
                        for(var i=0;i<$scope.legend.length;i++){
                            var item = {
                                name : $scope.legend[i],
                                type: 'line',
                                data: $scope.data[i]
                            };
                            serie.push(item);
                        }
                        return serie;
                    }()
                };

完整測試代碼：app

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>折線圖</title>
</head>
<!--加載AngularJS-->
<script src="../producers/angular/angular.min.js"></script>
<!--加載ECharts-->
<script src="../producers/echars/echarts.js"></script>

<body ng-app="app" ng-controller="lineCtrl">
<line id="main" legend="legend" item="item" data="data"></line>



<script type="text/javascript">

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

    app.controller('lineCtrl', function($scope) {
        $scope.legend = ["Berlin", "London",'New York','Tokyo'];
        $scope.item = ['Jan', 'Feb', 'Mar', 'Apr', 'Mar', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
        $scope.data = [
            [-1, 1, 3, 7, 13, 16, 18, 16, 15, 9, 4, 2], //Berlin
            [0, 1, 4, 7, 12, 15, 16, 15, 15, 10, 6, 5], //London
            [4, 4, 5, 10, 16, 22, 25, 24, 20, 14, 9, 3],    //New York
            [7, 6, 8, 14, 17, 22, 25, 27, 24, 17, 14, 10]   //Tokyo
        ];
    });


    app.directive('line', function() {
        return {
            scope: {
                id: "@",
                legend: "=",
                item: "=",
                data: "="
            },
            restrict: 'E',
            template: '<div  style="height:400px;width:100px;"></div>',
            replace: true,
            link: function($scope, element, attrs, controller) {
                var option = {
                    // 提示框，鼠標懸浮交互時的信息提示
                    tooltip: {
                        show: true,
                        trigger: 'item'
                    },
                    // 圖例
                    legend: {
                        data: $scope.legend
                    },
                    // 橫軸座標軸
                    xAxis: [{
                        type: 'category',
                        data: $scope.item
                    }],
                    // 縱軸座標軸
                    yAxis: [{
                        type: 'value'
                    }],
                    // 數據內容數組
                    series: function(){
                        var serie=[];
                        for(var i=0;i<$scope.legend.length;i++){
                            var item = {
                                name : $scope.legend[i],
                                type: 'line',
                                data: $scope.data[i]
                            };
                            serie.push(item);
                        }
                        return serie;
                    }()
                };
                var myChart = echarts.init(document.getElementById("main"));
                myChart.setOption(option);
            }
        };
    });
</script>
</body>
</html>

View Code

5.引用json文件中的數據echarts

注意：引用數據須要同步，angularjs中的$http沒有同步api，目測最簡單的方法，用ajax原生，直接設置爲同步請求。

app.controller('histogramcontroller', function ($scope,$http) {
    $.ajax({
        type: "post",
        url: "json/teacher/histogram.json",
        cache:false,
        async:false,
        success: function(xmlobj){
            $scope.item=xmlobj.dataline;
            $scope.data=xmlobj.data;
        }
    });
});

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。