vue-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>