react+hook+ts echarts柱状图无法显示？

Question

const index: React.FC = () => {
  const [form] = Form.useForm();
  let [resCost, setresCost] = useState({
    xData: [] as any,
    seriesData: {} as any
  })

  //搜索按钮事件
  const onFinish = (values: any) => {
    const startDate = _.cloneDeep(values.password[0])
    const endDate = _.cloneDeep(values.password[1])
    const allYearMonth: any = []; // 接收所有年份和月份的数组
    while (endDate > startDate || startDate.format('M') === endDate.format('M')) {
      allYearMonth.push(startDate.format('YYYYMM'));
      startDate.add(1, 'month');
    }
    let allDateData: any = {}
    values.username.forEach((one, oneIndex) => {
      let prmList: any = []
      let singProData: any = []
      allYearMonth.forEach((two, twoIndex) => {
        prmList.push(new Promise((res, rej) => {
          GetSource({ typenum: `${one}${two}` }).then((data) => {
            res(data)
          })
        }))
      })
      Promise.all(prmList).then((res: any) => {
        res.forEach(ite => {
          let Cost: any = 0
          if (ite.data.length > 0) {
            ite.data.forEach(p => {
              Cost = Cost + p[26]
            })
          }
          singProData.push(parseInt(Cost))
        })
      })
      allDateData[one] = singProData
    })
    let aData: any = []
    Object.keys(allDateData).forEach((item) => {
      aData.push({
        name: item,
        type: 'bar',
        label: {
          show: true,
          position: 'top'
        },
        data: allDateData[item]
      })
    })
    setresCost({
      xData: allYearMonth,
      seriesData: aData
    })
  };

  const lineOption = () => {
    let option: any = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      dataZoom: [
        {
          show: true,
          xAxisIndex: [0],
          type: 'slider',
          bottom: '4%',
          start: 0,
          end: 100
        }],
      legend: {},
      grid: {
        top: '10%',
        left: '5%',
        width: '92%',
        height: '78%',
        // containLabel: true
      },
      xAxis: {
        type: 'category',
        data: resCost.xData
      },
      yAxis: {
        type: 'value'
      },
      // dataset: {
      //   source: resCost.seriesData
      // },
      series: resCost.seriesData
    }
    return { ...option }
  }

  // To disable submit button at the beginning.
  useEffect(() => {
    // forceUpdate({});
    lineOption()
  }, [resCost]);

  //选择框数据
  const products = ['rds', 'redis', 'cdn', 'eip']

  let options: SelectProps<any>['options'] = [];
  products.filter((el, index) => {
    options?.push({
      label: el,
      value: el
    })
  })

  //判断搜索按钮是否禁用
  const onValuesChange = () => {
    state.isDisable = !((form.getFieldsValue().password && form.getFieldsValue().password.length > 1) && (form.getFieldsValue().username && form.getFieldsValue().username.length > 0))
  }

  return (
    <PageLayout icon={<DatabaseOutlined />} title={t('资源费用')} hideCluster>
      <div className='source-main'>
        <div className=''>
          <div className='chart-search'>
            <Form form={form} name="horizontal_login" layout="inline" onFinish={onFinish} onValuesChange={onValuesChange}>
              <Form.Item
                name="username"
              >
                <Select
                  mode="multiple"
                  allowClear
                  style={{ width: '300px' }}
                  placeholder="请选择云产品"
                  options={options}
                  maxTagCount='responsive'
                />
                {/* <AutoComplete
                  style={{ width: 200 }}
                  options={autoInputValue}
                  placeholder="云产品"
                  filterOption={(inputValue, option) =>
                    option!.value.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1
                  }
                /> */}
              </Form.Item>
              <Form.Item
                name="password"
              >
                <RangePicker picker="month" />
              </Form.Item>
              <Form.Item shouldUpdate>
                {() => (
                  <Button
                    type="primary"
                    htmlType="submit"
                    disabled={state.isDisable}
                  >
                    搜索
                  </Button>
                )}
              </Form.Item>
            </Form>
          </div>
          <div className='charts-content'>
            <ReactEcharts
              style={{ background: "#fff", height: "100%" }}
              option={lineOption()}
              // onEvents={{ click: handleChartClickEvents }}
              notMerge={true}
              lazyUpdate={true}
            />
          </div>
        </div>
      </div>
    </PageLayout>
  );
}

export default index;

目前功能是点击搜索获取异步数据，动态展示echarts,但是无法显示柱状图，尝试过组件在子组件页面刷新一次能展示出来就，大神们咋回事呢？
初始截图

搜索后，还有option