需求描述:页面中按钮控制上传文件后显示数据,图表显示
功能点描述:控制显示隐藏(没上传文件前不显示图表),获取数据渲染图表
出现问题:
- v-if控制显示隐藏发现图表不渲染
- 渲染成功图表显示很小一块
- 图表显示正常调试变小,关闭调试图表不变回原来的大小
- 一个页面多个图表时,图表不能自适应
- 第一次渲染图表出现,刷新页面图表没有了,怎么刷新都不出现
解决方案
- 第一个问题修改v-if为v-show可解决
- 第二个问题 动态控制容器的大小即可解决
- 第三个问题
//图表配置setoption之后加
setTimeout(function() {
window.onresize = function() {
mycharts.resize();
}
}, 200)
即可解决!
4.第四个问题 首先四个图表只有一个可以自适应 百度到使用以下进行设置自适应
resizeEvent(ref) {
console.log(ref)
window.addEventListener('resize', () => {
ref.resize();
})
},
接着一个都不行(手动捂脸) 不要慌,我的图表容器是动态设置的宽度,所以如下
mounted() {
this.contentStyleObj = window.innerWidth-50;//contentStyleObj这是我的容器宽度动态变量名
window.onresize = () => {
return (() => {
this.contentStyleObj = window.innerWidth-50;
})();
};
},
- 最后一个问题强调一定要给图表的容器设置大小宽高