angular封装echart自适应问题 

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../lib/bootstrap-3.3.7/css/bootstrap.min.css">
    <script src="../lib/jquery/jquery.min.js"></script>
    <script src="../lib/bootstrap-3.3.7/js/bootstrap.min.js"></script>
    <script src="../lib/angular-1.7.0/angular.js"></script>
    <script src="../lib/echarts/echarts.js"></script>
    <script>
        var app = angular.module('app', []);
        app.directive('eChart', function () {
            var eChartDirective = {
                restrict:'EA',
                template:'<div></div>',
                replace:true,
                scope:{
                    option:'=',
                    forceRender:'='
                },
                link:function(scope,eles,attrs,ctrl){
                    var chart = echarts.init(eles[0]);
                    scope.$watch('option',function(newOption){
                        chart = echarts.init(eles[0]);
                        chart.setOption(newOption);
                    },true);
                    scope.$watch('forceRender',function(newOption){
                        chart.resize();
                    },true);
                    window.addEventListener('resize',function(){
                        chart.resize();
                    })
                }
            };
            return eChartDirective;
        });
        app.controller('myCtrl', function ($scope) {
            $scope.option= {
                title: {
                    text: '某站点用户访问来源',
                    subtext: '纯属虚构',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
                },
                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '60%'],
                        data: [
                            {value: 335, name: '直接访问'},
                            {value: 310, name: '邮件营销'},
                            {value: 234, name: '联盟广告'},
                            {value: 135, name: '视频广告'},
                            {value: 1548, name: '搜索引擎'}
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
        });
    </script>
</head>
<body ng-controller="myCtrl">
<div class="container">
    <e-chart option="option" force-render="width" style="height: 400px;"></e-chart>
<!--    <div ng-class="{true:'col-sm-12',false:'col-sm-6'}[width]">-->
<!--        <e-chart option="option" force-render="width" style="height: 400px;"></e-chart>-->
<!--    </div>-->
</div>
</body>
</html>

　　

posted @ 2020-08-12 16:22  sct春天  阅读(345)  评论(0)    收藏  举报