angular.js - angular封装echart自适应问题
phpcn_u1582
phpcn_u1582 2017-05-15 17:11:11
0
1
814

自己封装了一个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>   

原来父元素p只占50%,后续由于ng-class调整至100%,
但是绘图在50%时已经完成了,现在我只能实现窗口大小调整时的重绘,有没有什么办法监控父元素宽度的变化,在变化时重绘cavans?

phpcn_u1582
phpcn_u1582

Antworte allen(1)
小葫芦

谢邀。

这里可以把导致p的class变化的那个变量传给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>   
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!