angulaire.js - angulaire encapsule le problème adaptatif echart

Question

J'ai encapsulé un echarts

angular.module('docms')
.directive('eChart', function () {
        var eChartDirective = {
            restrict:'EA',
            template:'<p></p>',
            replace:true,
            scope:{
                option:'='
            },
            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);
                window.addEventListener('resize',function(){
                    chart.resize();
                })



            }
        }
        return eChartDirective;
    })

<p ng-class="{true:'col-sm-12',false:'col-sm-6'}[width]">
    <e-chart option = "option"></e-chart>
</p>   

À l'origine, l'élément parent p n'occupait que 50 %. Plus tard, en raison de l'ajustement de ng-class à 100 %,
mais le dessin a été terminé à 50 %. Maintenant, je ne peux implémenter le redessin que lorsque la taille de la fenêtre est égale à 50 %. ajusté. Existe-t-il un moyen de surveiller les changements dans la largeur de l'élément parent et de redessiner les cavans lorsqu'ils changent ?

Answer 1

Merci pour l'invitation.

Ici, vous pouvez transmettre la variable qui provoque le changement de classe de p au composant eChart.

angular.module('docms')
.directive('eChart', function () {
        var eChartDirective = {
            restrict:'EA',
            template:'<p></p>',
            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;
    })

<p ng-class="{true:'col-sm-12',false:'col-sm-6'}[width]">
    <e-chart option="option" force-render="width"></e-chart>
</p>