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 的高度,将其赋值给图表