[echarts]echarts的canvas画布大小与容器大小不一致的解决方案

原创已于 2022-11-25 16:59:53 修改 · 1w 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #echarts

于 2022-11-14 14:21:03 首次发布

echarts 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了如何使Echarts图表在页面中全屏显示并动态适应容器大小。通过设置图表容器的宽高为百分比，并在渲染图表时利用resize方法结合DOM元素的实际宽度和高度来确保图表完全填充wrap盒子。此外，还提到了在el-collapse组件中使用v-if处理图表显示的问题，确保在切换时正确渲染。

<div class="wrap" style="width:300px;height:300px;">
	<!-- echarts容器 -->
	<div id="echarts" style="width: 100%;height:100%;"></div>
</div>

场景描述：如上所示布局，我的echarts容器大小设置的宽高都是100%，为了让他占满整个wrap盒子;
解决方法1：所以设置echarts宽高为100%

设置宽高百分比之后如果canvas依然是100px或者没有占满图表容器:
解决方案2：利用resize设置width、height

// 获取wrap盒子的宽高
let width = document.getElementById('wrap').clientWidth()
let height= document.getElementById('wrap').clientHeight()
// 渲染echart图表的方法
drawchart() {
	let charts = echarts.init(document.getElementById('chart'))
	// 每次渲染之前都要clear一下，因为图表数据不是一成不变的，当重新调接口获取数据后就要重新渲染，如果不clear，有可能造成图表不变或图表叠加渲染等情况
	charts.clear()	
	let option = {
		...
	}
	// 一般这一步是写charts.resize()，让图表根据当前屏幕尺寸自适应，但是当前canvas画布大小与容器大小不一致，而容器大小已经设置了百分比，所以可以在resize里面手动设置宽高，使其占满整个wrap盒子
	charts.resize({
		//width: width,
		//height: height,
		// es6解构
		width,
		height
	})
	// 渲染图表
	charts.setOption(option)
}

解决方案3：利用v-if，这种情况多发在el-tab el-collapse

<el-collapse v-model="activeName" accordion>
	<el-collapse-item name="1">
		<ZLine
		  :chart="'cpuUse'+index"
		  :title="item?.metricName"
		  :data="item?.metricPoints"
		  :zoom="zoom"
		  :ref="setItemRef"
		  v-if="activeName === '1'"
		/>
	</el-collapse-item>
</el-collapse>