angular结合echarts建立图表

时间 2019-11-16 标签 angular 结合 echarts 建立图表

原理：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;
        }
    });
});