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>