echarts随着窗口缩放自适应【react】

/** @format */

import React, { useState, useEffect, useRef } from ‘react’;

// 引入Echarts主模块
import echarts from ‘echarts/lib/echarts’;

//引入柱状图
import ‘echarts/lib/chart/bar’;

//引入折线图
import ‘echarts/lib/chart/line’;

//引入饼状图
import ‘echarts/lib/chart/pie’;

//引入提示框和标题组件
import ‘echarts/lib/component/tooltip’;
import ‘echarts/lib/component/title’;
import ‘echarts/lib/component/grid’;
import ‘echarts/lib/component/legend’;
import ‘echarts/lib/component/graphic’;

const CategoryChart = () => {
const boxNumCategory = useRef(null);

useEffect(() => {
const chart = echarts.init(boxNumCategory.current);

const option = {

。。。
};

chart.setOption(option);
var windowWidth =
  window.innerWidth ||
  document.documentElement.clientWidth ||
  document.body.clientWidth;

// 设置Echart容器宽度为窗口宽度
boxNumCategory.current.style.width = `${windowWidth / 2.8}px`;

// 调用Echart的resize方法
chart.resize();

}, []);
useEffect(() => {
const chart = echarts.init(boxNumCategory.current);

// 初始化Echart图表
chart.setOption({
  // Echart图表配置
});

// 监听窗口大小变化事件
window.addEventListener('resize', () => {
  // 重新设置Echart容器的宽度和高度
  boxNumCategory.current.style.width = '100%';
  //   boxNumPie.current.style.height = '100%';

  // 调用Echart的resize方法
  chart.resize();
});

return () => {
  // 移除窗口大小变化事件监听
  window.removeEventListener('resize');
};

}, []);
return (

  <div
    ref={boxNumCategory}
    style={{
      width: '588px',
      height: '290px',
      background: '#FFFFFF',
      boxShadow: '0px 2px 4px 0px rgba(0,0,0,0.05)',
      borderRadius: '4px',
      opacity: 1,
    }}
    className="DashboardChart-chart"
  ></div>

);
};