vue3生成echarts图表溢出

Question

我想生成一个echart图表，让它刚好占满整个屏幕。调整了一下午，它都是会溢出屏幕 生成滚动条，有没有办法让它刚好占满屏幕不溢出？

代码如下

<template>
  <div ref="chartContainer" class="chart-container"></div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, nextTick } from 'vue';
import * as echarts from 'echarts';

const chartContainer = ref(null);
let chartInstance = null;

// 初始化ECharts实例
const initChart = async () => {


  await nextTick(); // 确保DOM已渲染
  chartInstance = echarts.init(chartContainer.value);

  // 设置ECharts选项
  const option = {
    title: {
      text: '全屏折线图'
    },
    tooltip: {},
    xAxis: {
      data: ["类别1", "类别2", "类别3", "类别4", "类别5"]
    },
    yAxis: {},
    series: [{
      type: 'line',
      data: [120, 200, 150, 80, 70]
    }]
  };

  chartInstance.setOption(option);


};

onMounted(()=>{
  // 监听窗口大小变化并调整图表大小
  window.addEventListener('resize', () => {
    if (chartInstance) {
      chartInstance.resize();
    }
  });
  initChart();

})
// 组件销毁时清理
onUnmounted(() => {
  if (chartInstance) {
    chartInstance.dispose();
    window.removeEventListener('resize', () => chartInstance.resize());
  }
});
</script>

<style scoped>


.chart-container {
  width: 100vw;
  height: 100vh;


}
</style>

Answer 1

是不是计算屏幕的分辨率的时候没正确获取，可以获取屏幕分辨率来设置高和宽。