如何在Vue-Chart.js固定尺寸容器中动态调整所有图表大小？

核心问题分析 #

你的代码存在几个导致图表适配异常的关键点：

• 容器高度单位不统一（40vh vs 40%），引发高度计算混乱
• Flex布局下高度未正确传递至图表容器
• 图表响应式更新逻辑不完整

具体修改步骤 #

1. 调整CSS布局（最关键）

修改样式确保高度从父容器到图表canvas的正确传递，同时适配flex布局：

#main {
  width: 1000px;
  height: 1000px;
  position: absolute;
  top: 0;
  bottom: 0; /* 修正原代码的bottom:100，确保垂直居中 */
  left: 0;
  right: 0;
  margin: auto;
  display: flex;
  flex-direction: column; /* 让子元素垂直排列，确保图表容器占满可用高度 */
}
.chart-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  flex: 1; /* 占满main容器除滑块、按钮外的所有空间 */
  gap: 20px;
  padding: 20px;
  overflow-y: auto; /* 图表过多时允许垂直滚动，避免溢出 */
}
.chart-container .chart-wrapper {
  flex: 1 1 calc(50% - 20px); /* 减去gap的20px，确保两个图表刚好占满一行 */
  max-width: calc(50% - 20px);
  min-width: 300px;
  height: 45%; /* 每行两个图表，高度占容器的45%，留出gap空间 */
  position: relative;
}
.canvas-container {
  width: 100%;
  height: 100%; /* 完全继承chart-wrapper的高度 */
  position: relative;
}
canvas {
  width: 100% !important;
  height: 100% !important; /* 强制canvas填满容器 */
}
/* 其他样式保持不变 */

2. 优化Chart.js配置

调整图表options，确保响应式和尺寸适配：

<Doughnut
  :data="{ labels: ['Male', 'Female', 'NB'], datasets: [{ data: chartData.data, backgroundColor: chartData.colors }] }"
  :options="{
    responsive: true,
    maintainAspectRatio: false,
    resize: true, /* 开启自动监听容器大小变化 */
    animation: { animateRotate: true, animateScale: true },
    plugins: { tooltip: { enabled: true } }
  }"
/>

3. 修复响应式数据更新

updateCharts方法中直接修改chartData.data不会触发Vue响应式更新，调整为：

function updateCharts() {
  charts.value.forEach(chartItem => {
    // chartItem.data是ref对象，需修改value属性
    chartItem.data.value = data1[currentYear.value];
    // 图表实例存在时手动更新
    if (chartItem.chart) {
      chartItem.chart.update();
    }
  });
}

4. 保存图表实例（可选但推荐）

添加图表时保存实例，方便后续手动更新：
首先在script中定义ref数组保存实例：

const chartRefs = ref([]);

模板中绑定ref：

<div v-for="(chartData, index) in charts" :key="index" class="chart-wrapper">
  <div class="canvas-container">
    <Doughnut
      :ref="el => chartRefs[index] = el"
      :data="{ labels: ['Male', 'Female', 'NB'], datasets: [{ data: chartData.data.value, backgroundColor: chartData.colors }] }"
      :options="..."
    />
  </div>
</div>

监听charts变化保存实例：

watch(charts, () => {
  nextTick(() => {
    charts.value.forEach((chartItem, index) => {
      chartItem.chart = chartRefs.value[index]?.chart;
    });
  });
}, { deep: true });

效果说明 #

• 图表自动填充父容器，宽度足够时每行显示2个，不足时自动换行
• 高度根据chart-wrapper的45%设置自动调整，不会溢出
• 添加新图表时自动适配布局，超出高度时显示滚动条
• 年份滑块切换时图表数据正确更新

内容的提问来源于stack exchange，提问作者dreanor