移动端Echarts高度自适应
最近做一个h5页面,需要嵌入app进行使用;用到echarts绘制图像,同时页面底部有操作按钮对图像进行控制。产品希望所有内容在一个页面内完整显示,而不需要滑动。。
根据echarts文档,图像容器需要具有固定的宽高才可以进行显示,但是在移动端,屏幕大小不尽相同,需要动态宽高解决适配问题。
1. 图像根据窗口大小自适应
利用 echarts中的resize()方法。这种方式很常见,下面是自己vue项目中的一段:
const myChartId = document.getElementById('chart')
const myChart = echarts.init(myChartId)
myChart.clear()
myChart.setOption(option)
window.addEventListener('resize', () => {
myChart.resize()
})
这个方法能在一定程度上实现移动端的自适应,但是当屏幕分辨率低时(比如5.1英寸的屏幕),resize不能让图像自适应到合适的大小,在我的项目中主要是高度不合适。具体原因我没有仔细研究过,猜测是这个方法本身有限制。于是想到应该自适应高度。
2. 图像高度根据窗口大小自适应
echarts绘图的时候需要一个有具体宽高的容器,但是容器外部可以有父级容器包裹。于是想到利用父级容器的高度来计算echarts的高度,实现自适应。
- HTML结构
<div id="pChart" class="cont">
<div id="chart" ref="kChart" />
</div>
- 父级容器的样式
.cont {
width: 95%;
height: 54vh;
margin: 0 .1rem;
}
- 计算高度
chartSize(container, charts) {
function getStyle(el, name) {
if (window.getComputedStyle) {
return window.getComputedStyle(el, null)
} else {
return el.currentStyle
}
}
const hi = getStyle(container, 'height').height
charts.style.height = hi
},
- echarts设置
const myChartId = document.getElementById('chart')
this.chartSize(document.getElementById('pChart'), myChartId)
const myChart = echarts.init(myChartId)
myChart.clear()
myChart.setOption(option)
window.addEventListener('resize', () => {
myChart.resize()
})
注意:
1. 以上是在Vue项目中实现的
2. 父容器div的高度本来是想设置成百分比,但是发现window.getComputedStyle()方法好像获取不到百分比的值,
于是就换成了vh单位,也就是相对于视口的高度,视口被均分为100单位的vh,54vh也就相当于视口的54%。