Echarts中的高度自适应

移动端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%。