如何解决echarts图表超出容器宽度显示问题？

本文共计263个文字，预计阅读时间需要2分钟。

在ECharts中，如果遇到子容器宽度超出父容器的问题，通常是因为ECharts在初始化时只绘制了一次，而容器大小在绘制后发生了变化。为了解决这个问题，可以在组件挂载后使用`setTimeout`来动态获取父级容器的宽度并重新渲染图表。以下是修改后的代码示例：

javascriptmounted() { setTimeout(()=> { // 发现ECharts子容器宽度超出父容器的问题 // 在这里理解了ECharts的绘制机制 // ECharts图形只绘制一次，且绘制时自动获取父级容器的尺寸 // 若容器大小变化，需要重新渲染图表 }, 0);}

出现echarts超出父盒子宽度的问题在了解echarts绘制机制echarts图形只绘制一次,且绘制时自动获取父级大小填写宽度原代码mounted(){setTimeout(

 

 出现echarts超出父盒子宽度的问题

在了解echarts绘制机制

echarts图形只绘制一次,且绘制时自动获取父级大小填写宽度

原代码mounted () { // setTimeout(() => { this.$refs.GaugeChartBox.changeCpu() this.$refs.GaugeChartBox.changeMemory() this.$refs.GaugeChartBox.changeStorage() this.$refs.IPSECSessions.sessionsEcharts() this.$refs.IPSECFlow.flowEcharts() // }, 20) },

使用setTimeout

mounted () { setTimeout(() => { this.$refs.GaugeChartBox.changeCpu() this.$refs.GaugeChartBox.changeMemory() this.$refs.GaugeChartBox.changeStorage() this.$refs.IPSECSessions.sessionsEcharts() this.$refs.IPSECFlow.flowEcharts() }, 20) },