react函数组件中使用echarts以及echarts设置了不显示，没有高度的原因

1. 首先按需引入模块

// 引入 ECharts 主模块
import echarts from 'echarts/lib/echarts';
// // 引入提示框和标题组件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/legend'
import 'echarts/lib/chart/pie';

2. 设置echarts

const Model_echarts = (props) => {
     
    let [main , setMain] = useState('')
    const handleOk = () => {
     
        props.dispatch({
      type: 'CHANGE_MODEL_VISIBLE', payload: [] })
    };
    const option = {
     
        title: {
     
            text: '某站点用户访问来源',
            subtext: '纯属虚构',
            left: 'center'
        },
        tooltip: {
     
            trigger: 'item',
            formatter: '{a} 
{b} : {c} ({d}%)'
        },
        legend: {
     
            orient: 'vertical',
            left: 'left',
            data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
        },
        series: [
            {
     
                name: '访问来源',
                type: 'pie',
                radius: '55%',
                center: ['50%', '60%'],
                data: [
                    {
      value: 335, name: '直接访问' },
                    {
      value: 310, name: '邮件营销' },
                    {
      value: 234, name: '联盟广告' },
                    {
      value: 135, name: '视频广告' },
                    {
      value: 1548, name: '搜索引擎' }
                ],
                emphasis: {
     
                    itemStyle: {
     
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    useEffect(()=>{
     
        var node = document.getElementById('main')
        setMain(node)
    } , [])
    // 基于准备好的dom，初始化echarts实例
    if(main !== ""){
     
        var myChart = echarts.init(main);
        myChart.resize({
      height: '400px' })
        myChart.setOption(option);
    }
    // 绘制图表
    return (
        <Modal
            title={
     props.model_payload.title1}
            visible={
     props.model_visible}
            onCancel = {
     handleOk}
            width = {
     800}
            footer = {
     <Button type = {
     "primary"} onClick = {
     handleOk}>确定</Button>}
        >
            <div id="main"></div>
        </Modal>
    )
}

因为是在函数式组件中，并没有生命周期函数，所以我用了useEffect钩子函数来获取元素节点，在这里要注意，一开始是并不能获取到节点的，所以在这里要设置判断条件。但是最后我遇到了一个问题，在检查元素中能查看到元素节点，但是并没有高度，这里要设置一个属性 myChart.resize({ height: '400px' })。这样就能正常显示了