在vue中使用echarts根据父级div大小自动适应大小

您可以使用echarts自带的resize方法实现自适应大小。当父级div大小改变时，调用resize方法重新渲染图表即可。具体用法如下：

在mounted生命周期里初始化echarts

mounted() {
    // 初始化echarts
    this.initEcharts();
    // 监听窗口大小改变，重新渲染echarts
    window.addEventListener('resize', () => {
        this.echarts.resize();
    });
},

初始化echarts方法如下

methods: {
    initEcharts() {
        // 获取父级div的DOM节点
        var chartDOM = this.$refs.chart;
        // 初始化echarts
        var echarts = require('echarts');
        this.echarts = echarts.init(chartDOM);
        // 设置echarts参数
        this.setOption();
    },
    // 设置echarts参数
    setOption() {
        var option = {
            ...
        };
        this.echarts.setOption(option);
    }
}

在父级div上设置样式，让echarts的大小自适应父级div

<div ref="chart" style="width: 100%; height: 100%;"></div>