vue-echarts自适应大小的实现

最新推荐文章于 2025-01-06 15:07:17 发布

原创最新推荐文章于 2025-01-06 15:07:17 发布 · 759 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#echarts #vue.js

收录于

echarts以及vue-echarts 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何在Vue项目中实现Echarts图表的自适应。通过使用vue-resize插件，结合ResizeObserver组件，确保图表在窗口尺寸变化时能够自动调整大小。首先通过npm安装vue-resize，然后在main.js中引入并注册组件。接着，在具体页面中，将ResizeObserver作为父元素的子组件，并在notify事件中调用$refs.echarts.resize()方法来触发Echarts的重绘，确保图表始终保持正确布局。

vue-echarts图表自适应用到了vue-resize

完整流程为：

1、下载vue-resize

npm i vue-resize -S

2、main.js中引入

import { ResizeObserver } from 'vue-resize';
import 'vue-resize/dist/vue-resize.css';

Vue.component('resize-observer', ResizeObserver);

3、在页面调用

在页面调用时，ResizeObserver组件的父元素定位不可以是static
在notify中利用ref拿到echarts执行resize方法

<template>
  <div class="charts-pie">
    <v-chart
      :options="options"
      ref="echarts"
      />

    <resize-observer @notify="() => $refs.echarts.resize()" />
  </div>
</template>