angular.js - angular封装echart自适应问题
本文介绍了angular.js - angular封装echart自适应问题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
自己封装了一个echarts
angular.module('docms')
.directive('eChart', function () {
var eChartDirective = {
restrict:'EA',
template:'<div></div>',
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;
})
<div ng-class="{true:'col-sm-12',false:'col-sm-6'}[width]">
<e-chart option = "option"></e-chart>
</div>
原来父元素div只占50%,后续由于ng-class调整至100%,
但是绘图在50%时已经完成了,现在我只能实现窗口大小调整时的重绘,有没有什么办法监控父元素宽度的变化,在变化时重绘cavans?
解决方案
谢邀。
这里可以把导致div的class变化的那个变量传给eChart组件。
angular.module('docms')
.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;
})
<div ng-class="{true:'col-sm-12',false:'col-sm-6'}[width]">
<e-chart option="option" force-render="width"></e-chart>
</div>
这篇关于angular.js - angular封装echart自适应问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文