踩坑日记--在react&ts项目中插入echarts时报的错

报错：Type ‘HTMLElement | null‘ is not assignable to type ‘HTMLElement‘
https://blog.csdn.net/moxiaomomo/article/details/107536070

报错：Error: Initialize failed: invalid dom.
 

import * as echarts from 'echarts'

    //原因出在这里
    const myChart = echarts.init(document.getElementById('main') as HTMLElement)
    document.getElementById('main')//返回值为null,表示元素还没渲染出来，因为返回值是null，所以后续就没办法执行了
    myChart.setOption({
      title: {
        text: 'ECharts 入门示例'
      },
      tooltip: {},
      xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
      },
      yAxis: {},
      series: [
        {
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }
      ]
    })

<div id="main" style={{ width: 400, height: 400 }}></div>

解决办法也很简单，在外面套个定时器，等元素加载完成就可以获取到了
 

setTimeout(() => {
    console.log(document.getElementById('main'))
    const myChart = echarts.init(document.getElementById('main') as HTMLElement)
    myChart.setOption({
      title: {
        text: 'ECharts 入门示例'
      },
      tooltip: {},
      xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
      },
      yAxis: {},
      series: [
        {
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }
      ]
    })
  }, 1)