angularJs和echarts结合实例

半兽人 发表于: 2019-07-31   最后更新时间: 2023-04-27 13:41:23  
{{totalSubscript}} 订阅, 3,883 游览

angularJs和echarts结合非常简单,找一个最简单的例子,效果如下:

angularJs和echarts结合实例

代码

<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
    <script src="/user/js/angular-1.5.8.min.js"></script>
    <script src="/js/echarts/echarts.min.js"></script>
</head>
<body ng-app="app" style="height: 100%; margin: 0" ng-controller="sexChart">

    <sexbar data="data" legend="legend"/>

    <script type="text/javascript">
        var app = angular.module("app", []);
        app.controller('sexChart', function ($scope) {
            $scope.legend = ["男", "女"];
            $scope.data = [
                {value: 78, name: '男'}, {value: 56, name: '女'}
            ];
        });

        app.directive('sexbar', function () {
             return {
                 scope: {
                     id: "@",
                     legend: "=",
                     data: "="
                 },
                 restrict: 'E',
                 template: '<div id="main" style="height:400px;"></div>',
                 replace: true,
                 link: function ($scope, element, attrs, controller) {
                     console.log($scope.data);
                     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('main'), 'macarons');
                     myChart.setOption(option);
                 }
             };
         });
    </script>
</body>
</html>

在线运行

更新于 2023-04-27

查看AngularJS更多相关的文章或提一个关于AngularJS的问题,也可以与我们一起分享文章