需求:根据数据量的大小,动态调整echart柱形图的宽度。
实现构想:根据数据的size调整div的大小,然后调用echart对象的resize方法重置柱状图的宽度:
// 图的大小动态自动调整
let compactWidth = data.size*32;
let width = compactWidth < 1860 ? 1860 : compactWidth;
this.chartStyle.width = width + "px";
vueVisit.visitChart.resize();
碰到的问题:柱状图并没有动态的改变了宽度,而是下次再调整一次才生效。
原因分析:应该是echart渲染或者读取div的宽度什么的延迟了。。。
解决方法:延时100毫秒再调用echart对象的resize方法:
// 图的大小动态自动调整
let compactWidth = data.size*32;
let width = compactWidth < 1860 ? 1860 : compactWidth;
this.chartStyle.width = width + "px";
setTimeout(function(){
vueVisit.visitChart.resize();
}, 100); //需要一个延迟,resize()才能生效