react 自适应 树状图echars

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

export default function BallOption(props) {
    const chartDom = useRef(null);
    const myChart = useRef(null);
    let { data = {} } = props;

    useEffect(() => {
        if (!myChart.current) {
            myChart.current = echarts.init(chartDom.current);
        }
        optionFun()
    }, [data])

    const optionFun = () => {
        var returnData = function (data, name) {
            for (var a = 0; a < data.length; a++) {
               if (data[a].name == name) {
                  return data[a].value;
               }
            }
         };
        let option = {
            title: {
             text:'工单\n分布情况比',
             textStyle:{
               color:'#fff',
               fontSize:12,
               lineHeight:20,
             },
             textAlign:"center",
             top:'center',
             left:'center',
           },
            tooltip: {
                show:false,
               trigger: 'item',
               formatter: function (rsp) {
                  if (rsp.name != "") {
                     return rsp.name + "<br/>" + rsp.marker + " " + rsp.value + " （" + rsp.percent + "）";
                  }
               }
            },
            legend: {
                show:false,
               orient: 'vertical',
               right: 40,
               y: "center",
               textStyle: {
                  color: '#4A9AE4',
               },
               itemHeight: 8,
               itemWidth: 8,
               data: data,
               formatter: function (name) {
                  return "{title|" + name + "}  {value|" + returnData(data, name) + "个}"
               },
               textStyle: {
                  rich: {
                     title: {
                        color: "#fff"
                     },
                     value: {
                        color: "#00D5F6"
                     }
                  }
               },
            },
            color: ["#FF6A4D", "#ffdb49", "#00ffff", "#01A8FB"],
            series: [
               {
                  name: data[0].name,
                  type: 'pie',
                  clockWise: true, //顺时加载
                  radius: ['40%', '35%'],
                  center: ["40%", "50%"],
                  label: {
                     normal: {
                        show: false
                     }
                  },
                  labelLine: {
                     show: false
                  },
                  itemStyle: {
                     emphasis: {
                        show: false
                     }
                  },
                  data: [
                     {
                        value: data[0].value,
                        name: data[0].name,
                     },
                     {
                        value: data[0].full,
                        itemStyle: {
                           normal: {
                              color: "rgba(0,68,103,0.9)"
                           }
                        }
                     }
                  ]
               },
               {
                  name: data[1].name,
                  type: 'pie',
                  clockWise: true, //顺时加载
                  radius: ['40%', '50%'],
                  center: ["40%", "50%"],
                  label: {
                     normal: {
                        show: false
                     }
                  },
                  labelLine: {
                     show: false
                  },
                  itemStyle: {
                     emphasis: {
                        show: false
                     }
                  },
                  data: [
                     {
                        value: data[1].value,
                        name: data[1].name,
                     },
                     {
                        value: data[1].full,
                        itemStyle: {
                           normal: {
                            color: "rgba(0,68,103,0.9)"
                           }
                        }
                     }
                  ]
               },
               {
                  name: data[2].name,
                  type: 'pie',
                  clockWise: true, //顺时加载
                  radius: ['55%', '65%'],
                  center: ["40%", "50%"],
                  label: {
                     normal: {
                        show: false
                     }
                  },
                  labelLine: {
                     show: false
                  },
                  itemStyle: {
                     emphasis: {
                        show: false
                     }
                  },
                  data: [
                     {
                        value: data[2].value,
                        name: data[2].name,
                     },
                     {
                        value: data[2].full,
                        itemStyle: {
                           normal: {
                            color: "rgba(0,68,103,0.9)"
                           }
                        }
                     }
                  ]
               },
               {
                  name: data[3].name,
                  type: 'pie',
                  clockWise: true, //顺时加载
                  radius: ['70%', '80%'],
                  center: ["40%", "50%"],
                  label: {
                     normal: {
                        show: false
                     }
                  },
                  labelLine: {
                     show: false
                  },
                  itemStyle: {
                     emphasis: {
                        show: false
                     }
                  },
                  data: [
                     {
                        value: data[3].value,
                        name: data[3].name,
                     },
                     {
                        value: data[3].full,
                        itemStyle: {
                           normal: {
                            color: "rgba(0,68,103,0.9)"
                           }
                        }
                     }
                  ]
               }
            ]
         }
        myChart.current.setOption(option)
    }

    /**
     * 注册父级大小变化事件，在宽高发生变化的时候重新绘制canvas
     */
    useEffect(() => {
        const eventBus = props.parent;
        eventBus && eventBus.bind('resized', ({ width, height }) => {
            myChart.current.resize({ width, height });
        });
        return () => {
            chartDom.current && echarts.init(chartDom.current).dispose()
        }
    }, [])

    return (
        <div style={{ width: '146px', height: '146px' }}>
            <div style={{ width: '100%', height: '100%' }} ref={chartDom} />
        </div>
    )
}