在Vue3中使 echarts 图表宽度自适应变化的操作方法

<template>
  <div ref="chartRef" style="width: 600px; height: 400px;"></div>
</template>
<script setup>
import {getCurrentInstance, onMounted, onUnmounted, ref} from 'vue';
const chartRef = ref(null);
let chartInstance = null;
// 通过 getCurrentInstance 访问全局属性
const {proxy} = getCurrentInstance();
onMounted(() => {
  chartInstance = proxy.$echarts.init(chartRef.value);
  chartInstance.setOption({
    title: {text: '柱状图示例'},
    tooltip: {},
    xAxis: {data: ['A', 'B', 'C', 'D', 'E']},
    yAxis: {},
    series: [{type: 'bar', data: [10, 20, 30, 40, 50]}]
  });
});
onUnmounted(() => {
  chartInstance?.dispose(); // 销毁实例
});
</script>

<template>
  <!-- 外层容器用于控制图表宽度，高度可根据需求调整 -->
  <div class="chart-container">
    <div ref="chartRef" class="chart"></div>
  </div>
</template>
<script setup>
import { getCurrentInstance, onMounted, onUnmounted, ref } from 'vue';
const chartRef = ref(null);
let chartInstance = null;
const { proxy } = getCurrentInstance();
// 处理窗口缩放
const handleResize = () => {
  if (chartInstance) {
    // 添加防抖优化性能（可选）
    chartInstance.resize();
  }
};
onMounted(() => {
  // 初始化图表
  chartInstance = proxy.$echarts.init(chartRef.value);
  chartInstance.setOption({
    title: { text: '响应式柱状图' },
    tooltip: {},
    xAxis: { data: ['A', 'B', 'C', 'D', 'E'] },
    yAxis: {},
    series: [{ type: 'bar', data: [10, 20, 30, 40, 50] }]
  });
  // 监听窗口变化
  window.addEventListener('resize', handleResize);
  // 初始执行一次确保尺寸正确
  setTimeout(handleResize, 0);
});
onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
  chartInstance?.dispose();
});
</script>
<style scoped>
.chart-container {
  width: 100%;
  padding: 20px; /* 可根据需求调整 */
}
.chart {
  width: 100%;
  height: 200px; /* 固定高度，可改为 min-height 或使用 calc 动态计算 */
  /* 可选：添加最大宽度限制 */
  max-width: 1200px;
  margin: 0 auto;
}
/* 移动端适配 */
@media (max-width: 768px) {
  .chart {
    height: 300px;
  }
}
</style>

window.addEventListener('resize', handleResize);

const handleResize = () => {
  chartInstance?.resize();
};

// 在 handleResize 中动态计算高度
const containerWidth = chartRef.value.offsetWidth;
const aspectRatio = 9 / 16; // 16:9 比例
chartRef.value.style.height = `${containerWidth * aspectRatio}px`;
chartInstance.resize();

/* 在样式中添加更多断点 */
@media (max-width: 480px) {
  .chart {
    height: 250px;
  }
}

/* 在父组件中 */
.parent-container {
  width: 100%;
  display: flex;
  justify-content: center;
}

// 防抖版 resize（在 handleResize 顶部添加）
let resizeTimer;
clearTimeout(resizeTimer);
resizeTimer = setTimeout(() => {
  chartInstance.resize();
}, 200);

<template>
  <!-- 使用 Flex 布局容器 -->
  <div class="charts-container">
    <!-- 单个图表容器 -->
    <div class="chart-wrapper">
      <div ref="chartRef1" class="chart"></div>
    </div>
    <!-- 第二个图表容器 -->
    <div class="chart-wrapper">
      <div ref="chartRef2" class="chart"></div>
    </div>
  </div>
</template>
<script setup>
import { getCurrentInstance, onMounted, onUnmounted, ref } from 'vue';
const chartRef1 = ref(null);
const chartRef2 = ref(null);
let chartInstance1 = null;
let chartInstance2 = null;
const { proxy } = getCurrentInstance();
// 公共配置项
const baseOption = {
  tooltip: {},
  xAxis: { data: ['A', 'B', 'C', 'D', 'E'] },
  yAxis: {},
};
// 初始化图表
const initChart = (ref, option) => {
  const chart = proxy.$echarts.init(ref.value);
  chart.setOption(option);
  return chart;
};
// 带防抖的 resize 处理
let resizeTimer;
const handleResize = () => {
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(() => {
    chartInstance1?.resize();
    chartInstance2?.resize();
  }, 200);
};
onMounted(() => {
  // 初始化两个图表
  chartInstance1 = initChart(chartRef1, {
    ...baseOption,
    title: { text: '图表1' },
    series: [{ type: 'bar', data: [10, 20, 30, 40, 50] }]
  });
  chartInstance2 = initChart(chartRef2, {
    ...baseOption,
    title: { text: '图表2' },
    series: [{ type: 'bar', data: [50, 40, 30, 20, 10] }]
  });
  // 监听窗口变化
  window.addEventListener('resize', handleResize);
  // 初始调整
  handleResize();
});
onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
  chartInstance1?.dispose();
  chartInstance2?.dispose();
});
</script>
<style scoped>
/* 主容器：Flex 布局 */
.charts-container {
  display: flex;
  gap: 20px; /* 图表间距 */
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
}
/* 单个图表容器 */
.chart-wrapper {
  flex: 1; /* 平分剩余空间 */
  min-width: 0; /* 解决 flex 容器溢出问题 */
}
.chart {
  width: 100%;
  height: 400px; /* 统一高度 */
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}
/* 移动端响应式 */
@media (max-width: 768px) {
  .charts-container {
    flex-direction: column; /* 垂直排列 */
  }
  .chart {
    height: 300px;
  }
}
</style>