angular.js - angular encapsulates echart adaptive problem

Question

I encapsulated an 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>   

Originally the parent element p only occupied 50%. Later, due to the adjustment of ng-class to 100%,
but the drawing was completed at 50%. Now I can only implement redrawing when the window size is adjusted. Is there any Is there any way to monitor changes in the width of the parent element and redraw cavans when it changes?

Answer 1

Thanks for the invitation.

Here you can pass the variable that causes the class change of p to the eChart component.

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>