vue项目使用vue-echart图表，实现根据页面高度自动计算图表高度

1.html代码

<div class="widget-index">
	<div ref="vueLine" class="vue-line">
	   <ve-line
	     ref="lineChart"
	     :data="chartData"
	     :height="height"
	   ></ve-line>
 	</div>
</div>

2.js代码

<script>
export default {
   data() {
    return {
      chartData:[],
      height: '400px'
    }
  },
  mounted() {
    // 重置图表
    this.$refs[`lineChart`].echarts.resize()
    // 获取内存 div 的高度，将其赋值给图表
    this.height = this.$refs.vueLine.clientHeight + 'px'
  }
</script>

3.css

<style lang="scss" scoped>
// 设置外层 div 的 padding-top
.widget-index {
  width: 100%;
  padding-top: 64.808%;
  position: relative;
  // 设置内层 div 设置成固定定位
	.vue-line {
	  position: absolute;
	  width: 100%;
	  height: 100%;
	  left: 0;
	  top: 0;
  	}
}
</style>

4.实现思路

• 首先在外层 div 上设置 padding-top 且相对定位，
• 在把内层 div 设置为 固定定位
• 然后获取内层 div 的高度，将其赋值给图表