自适应 vue-charts 图表
最编程
2024-04-10 21:36:13
...
<div class="box">
<div class="header"></div>
<div class="chart-wrapper">
<v-charts :option="option" ref="echarts"></v-charts>
</div>
</div>
<style lang="scss">
.box{
height: 80%;
display: flex;
flex-direction: column;
.header{
flex:1
}
.chart-wrapper{
flex:1
}
}
</style>
此时只有box中存在高度80%,header和chart-wrapper都是弹性布局平分box。但是v-charts
无法渲染图表高度,导致图表无法展示出来。如下图:
注意:x-vue-echarts
这个盒子的高度是准确的,但是它的子标签canvas的高度却为0,导致图表无法显示。
解决办法:
mounted() {
this.$nextTick(() => {
this.$refs.echarts.resize();
});
},
困扰了2小时的问题,没想到3行代码就解决了!!!!
推荐阅读
-
20 幅 IP 协议图表
-
20 幅 IP 协议图表
-
Gradio 部署工具 Nanny 教程在这里!用图表画出你想要的
-
别再这样绘制条形图了这里有最新的 Excel 累积增长分析图表!
-
Excel 图表:精美的 "到达率 "显示(II)--"水位图"!
-
问题 Python:用折线图表示累计营业额的年度比较 EN
-
uniapp 微信小程序开发误区日记:由于图表数据渲染不出来,第一次使用手表功能在项目中监听数据变化
-
虚拟机安装 win10 BIOS 和 UEFI 虚拟机安装 win10 教程 - 安装 VMware Tools 工具还可以解决虚拟机系统桌面、自适应窗口全屏的问题。
-
Openpyxl 3.0 官方文档 (20) - 更改绘图区域和图例布局 - 图表布局*
-
Python Office Automation [合并单元格-openpyxl, 添加图表-openpyxl, 合并工作表-openpyxl, 合并多个文件工作表-openpyxl] (III)- 全面详解(学习总结-由浅入深) (Next)