Vue3 echarts 图表跟随窗口自适应大小

原创

于 2022-02-23 21:08:36 发布 · 4.4k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #vue.js

本文介绍了在 Vue3 中如何使 Echarts 图表根据窗口大小进行自适应。通过给图表盒子配置 ref，声明盒子，在 setup 中初始化数据，并在页面挂载后监听 window 的 onresize 事件，利用防抖函数优化性能，调用 echarts 的 resize 方法进行自适应调整。在离开页面时，还需记得销毁 window.onresize 事件监听。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
 <div class="box">
     <Breadcrumb name="数据统计"/>
     <el-card>
        <div ref="echartsRef" id="main" :style="`height:${$attrs.height || 400}px;width:${$attrs.width + 'px' || '70%'} 800px; `"></div>
     </el-card>
 </div>
</template>

<script>
import Breadcrumb from '@/components/breadcrumb.vue';
import { ref ,onMounted, onBeforeUnmount} from 'vue'
import {_getData} from '@/network/reports.js'
import {debounce} from '@/utils/debounce.js'
import { getCurrentInstance } from 'vue'

// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core';
// 引入柱状图图表，图表后缀都为 Chart
import { BarChart,LineChart } from 'echarts/charts';
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  LegendComponent,
//    ,
} from 'echarts/components';
// 标签自动布局，全局过渡动画等特性
import {