angularJs和echarts结合实例

2017-04-11

最近项目在做中行的项目，需要angularjs和echarts相结合，做一下记录。顺便除了 AngularJS 内置的指令外，我们还可以创建自定义指令。可以使用 .directive 函数来添加自定义的指令。要调用自定义指令，HTML 元素上需要添加自定义指令名。使用驼峰法来命名一个指令; echartLineView, 但在使用它时需要以 - 分割, echart-line-view

echart实例代码

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>
<body ng-app="app">
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div  style="height:400px">
    <div ng-controller="sexChart" style="height:1400px">
        <sexbar id="sexBarcharts" legend="legend"  data="data"></sexbar>
    </div>
</div>

<script src="js/angular.js"></script>
<script src="../echart3/echarts.js"></script>

<script type="text/javascript">
    var app = angular.module('app', []);
    app.controller('sexChart', function($scope) {
        $scope.legend = ["男", "女"];
        $scope.data = [
            {value:78, name:'男'},{value:56,name:'女'} //Berlin
        ];
    });
    app.directive('sexbar', function() {
        return {
            scope: {//继承父级作用域并创建自己的作用域
                id: "@",
                legend: "=",
                data: "="
            },
            restrict: 'EA',
            template: '<div style="height:360px;"></div>',
            replace: true,
            link: function($scope, element, attrs, controller) {
                var option = {
                    title:{
                        text : '性别比例',//标题说明
                        x:'center'//居中
                    },
                    // 提示框，鼠标悬浮交互时的信息提示
                    tooltip: {
                        show: true,
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    // 图例
                    legend: {
                        x : 'center',
                        y : 'bottom',
                        data: $scope.legend
                    },
                    // 数据内容数组
                    series:	[
                        {
                            name:'',
                            type: 'pie',
                            radius:"55%",
                            center:['50%','50%'],
                            label: {
                                normal: {
                                    position: 'inner' //内置文本标签
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            data:$scope.data,
                            itemStyle : {
                                normal: {
                                    label: {
                                        show: false
                                    },
                                    labelLine: {
                                        show: false
                                    }
                                } ,
                                emphasis: {
                                    label: {
                                        show: true,
                                        position: 'outer'
                                    },
                                    labelLine: {
                                        show: true,
                                        lineStyle: {
                                            color: 'red'
                                        }
                                    }
                                }
                            }
                        }
                    ]
                };
                var myChart = echarts.init(document.getElementById($scope.id));
                myChart.setOption(option);
            }
        };
    });
</script>
</body>

另一种方式

var Echart3 = echarts.init(document.getElementById('inspectionBar3'));

   var data = [53, 85, 10, 45, 31];
   var xMax = 100;
   var axisColor = '#f40';
   $scope.option ={

   };

   Echart3.setOption($scope.option);