我已经尝试了几乎所有的方法，但不能让我的图表的高度响应。
宽度工作完美，它是响应和相应的调整，但由于某种原因，高度停留在400px锁定？
在我的主Vue应用程序中，我调用我的组件（传入图表数据）：
第一个月
组件ProjectedCumulativeSavings.vue的代码是：

<template>
    <div class="chart-container" >
        <bar-chart
            :chart-data="datacollection"
            :options="options"
            chart-id="projectedCumulativeSavings"
        />
    </div>
</template>

<script>
import BarChart from '../mixins/BarChart.js'

export default {
    components: {
        BarChart
    },
    props: {
        datacollection: ''
    },
    data() {
        return {
            options: {
                maintainAspectRatio: false,
                responsive: true,
                title: {
                    display: true,
                    text: 'Projected Cumulative Savings',
                    fontSize: 18
                },
                legend: {
                    display: false
                },
                scales: {
                    yAxes: [{
                        ticks: {
                            // Include a dollar sign in the ticks
                            callback: function (value, index, values) {
                                return 'R' + value.toLocaleString('en')
                            }
                        }
                    }]
                }
            }
        }
    },
    created() {
    },
    computed: {
    }
}
</script>

<style >
.chart-container {
    min-width: 375px;
    max-width: 1024px;
    /* margin: 30px; */
    position: relative;
    width: 100%;
    height: 40vw;
}
</style>

字符串
BarChart.js代码是：

import { Bar, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins

export default {
    extends: Bar,
    mixins: [reactiveProp],
    props: ['options'],
    mounted() {
        // this.chartData is created in the mixin.
        // If you want to pass options please create a local options object

        this.renderChart(this.chartData, this.options)
    },
    watch: {
        chartData() {
            this.$data._chart.update()
        }
    }
}

型