营销型网站的推广,标识标牌设计公司,安徽住房与城乡建设厅网站,网站 空间费用bug场景
两种情况
一就是如标题一样#xff0c;给div设置的100%高度#xff0c;但是最后在elements里检查元素发现高度只有100px。二是#xff0c;设置了高度为100%#xff0c;但是检查元素里发现元素高宽为0。 问题解决方案
在使用 ECharts时#xff0c;将图表嵌套在 …bug场景
两种情况
一就是如标题一样给div设置的100%高度但是最后在elements里检查元素发现高度只有100px。二是设置了高度为100%但是检查元素里发现元素高宽为0。 问题解决方案
在使用 ECharts时将图表嵌套在 el-tabs 中遇到宽高设置不起效的问题有可能是下面三个原因导致的。
一、确保在图表初始化前容器已渲染
确保在图表初始化之前图表容器的大小已经确定。可以在 Vue 的 mounted 钩子函数中初始化图表。如果是嵌套多层组件会比较麻烦需要考虑生命周期但是大部分情况下这种方式更能实现画出的图自适应地填充页面的大部分空白的效果。
el-tabsel-tab-pane labelTab 1div refechartsContainer stylewidth: 100%; height: 100%;/div/el-tab-pane!-- 其他 tab 页 --
/el-tabsmounted() {this.initEcharts();
},
methods: {initEcharts() {const container this.$refs.echartsContainer;const chart echarts.init(container);// 初始化图表配置等}
}
二、确保父容器也充满高度
确保 el-tabs 及其父容器都具有充满高度的样式如果这个一个子组件确保父组件都已经渲染完然后存图的div高度能确定下来比如这种直接把外层设置为100vh那么外层就高度确定了里层的div也就能确定高度图也就画出来了。
div styleheight: 100vh;el-tabsel-tab-pane labelTab 1div stylewidth: 100%; height: 100%;div idecharts-container stylewidth: 100%; height: 100%;/div/div/el-tab-pane!-- 其他 tab 页 --/el-tabs
/div
三、强制覆盖样式
可能因为父容器的布局或其他样式规则导致的在图表的样式中使用 !important 强制覆盖可能被其他样式覆盖的情况。
el-tabsel-tab-pane labelTab 1div stylewidth: 100% ; height: 100%;div idecharts-container stylewidth: 100% !important; height: 100% !important;/div/div/el-tab-pane!-- 其他 tab 页 --
/el-tabs
总结 最粗暴的解决办法是给div一个固定的高度也就是上面三种解决方案的核心比如你遇到问题时候实时给div一个高宽恒定值然后看看画出的图尺寸变没有大概这样。 不过画图经常想要在更改网页尺寸时重新绘制 ECharts 图表可以使用 resize 事件来捕获窗口大小的变化并在事件触发时重新渲染图表。
如下
templatedivel-tabs tab-clickhandleTabClickel-tab-pane labelTab 1div refechartsContainer stylewidth: 100%; height: 100%;/div/el-tab-pane!-- 其他 tab 页 --/el-tabs/div
/templatescript
import echarts from echarts;export default {data() {return {chartInstance: null,};},mounted() {this.initEcharts();window.addEventListener(resize, this.handleResize);},beforeDestroy() {window.removeEventListener(resize, this.handleResize);},methods: {initEcharts() {const container this.$refs.echartsContainer;this.chartInstance echarts.init(container);// 初始化图表配置等this.renderChart(); // 第一次渲染图表},renderChart() {// 在这里编写图表的数据和配置const option {// ...};this.chartInstance.setOption(option);},handleTabClick() {// 切换 Tab 时重新绘制图表this.renderChart();},handleResize() {// 窗口大小变化时重新绘制图表this.chartInstance.resize();},},
};
/scriptover
