vue中 eCharts 自适应容器
在 vue 脚手架开发中，echarts图表自适应容器的方法：
父组件：
<template>
<div class="statistics_wrap">
<v-fir-grade ref="first"></v-fir-grade>
</div>
</template>
<script>
import vFirGrade from "./FirstGrade/index"
export default{
components: {
vFirGrade
},
data() {
return {
}
},
mounted() {
// 监听窗口的变化，实时调用 echarts的 resize事件
window.onresize = () =>{
this.$refs.first.myChart.resize();
}
},
}
</script>
子组件：
<template>
<div class="_statistics_echarts_wrap">
<div id="echartCont"></div>
</div>
</template>
<script>
export default{
data() {
return {
myChart: null,
}
},
mounted() {
this.firstGrade();
},
methods: {
firstGrade() {
this.myChart = echarts.init(document.getElementById('echartCont'));
// ...
this.myChart.setOption(option);
}
}
}
</script>
