Echarts图表公共封装组件

新建了一个公共的子组件，将echarts的渲染封装起来,都需要依赖option,让父组件给这个公共组件传递option数据:

import React from 'react'
import * as echarts from 'echarts';
import { useRef ,useEffect} from 'react';

// 定义组件
const Options = (props) => {
  // 定义要获取标签的变量
  let wrap = useRef(null)

  useEffect(() => {
    // 初始化echarts
    let myChart = echarts.init(wrap.current);

    // 设置option
    myChart.setOption(props.option);

    // 图表适配
    window.addEventListener('resize', function () {
    myChart.resize();
    });

  }, [props.option])
  return (
    // 盒子设置宽高
    <div style={{ width: "100%", height: "100%" }} ref={wrap}>

    </div>
  )
}
// 导出组件
export default Options

其他组件需要使用图表的时候，导入子组件，传入不同的option就可以渲染。

页面图表的宽高盒子里调用组件 并将此页面option数据传到另一个公共页面

然后主页面 只需要有响应式的option数据 （接口调用渲染需要就写 不需要就不写）

在父组件中发请求获取数据，修改option,希望子组件能重新渲染，此时，必须修改后的option和原option不一样。