面积图绘制偶尔出现直线 #3024

• G2 Version: 4.0.15
• Platform: Mac

正常的图表

页面上有一些时间间隔切换的交互然后根据选中的时间间隔去请求 API 但是偶尔图表绘制的时候就会出现以下情况：

我请求回来的数据是这样的：

[{"date":1605789000000,"high":"14961.06","low":"14945.55","open":"14949.07","close":"14957.26","vol":"239430.4543178","rece":"14957.26","price":"14957.26"}, ......]

我的代码：

import React, { useEffect, useState } from 'react'
import { Chart } from '@antv/g2'
import dayjs from 'dayjs'

export default function KLine ({posCoinDetail, defaultTime}) {
  const [loading, setLoading] = useState(false)

  useEffect(() => {
    setLoading(true)
    let dom = document.getElementById('kline-container')
    dom.innerHTML = null
    fetch(`API_URL`)
    .then(res => res.json())
    .then(r => {
      setLoading(false)
      const chart = new Chart({
        container: 'kline-container',
        autoFit: true,
        height: 380,
        padding: [50, 20, 25, 0]
      });

      let data = r.data.reverse()

      chart.changeData(data);

      chart.tooltip({
        showCrosshairs: true, // 展示 Tooltip 辅助线
        showMarkers: false,
        shared: true,
        showTitle: false,
        itemTpl: "<li><span style='line-height: 16px; font-size: 16px; display: inline-block; margin-bottom: 10px;'>{price}</span><br/><span>{date}</span></li>",
        domStyles: {
          'g2-tooltip': {
            background: "rgba(0, 0, 0, 0.705064)",
            borderRadius: 4,
            color: "#fff"
          },
          'g2-tooltip-list-item': {
            fontSize: "20px"
          }
        }
      });

      chart.legend({
        position: 'top'
      })

      chart.axis(false)

      chart.line().position('date*price').color("#225cff").tooltip('date*price', (date, price) => {
        return {
          date: dayjs(date).format('MMM DD, YYYY'),
          price: `€${Number(price).toFixed(2)}`
        }
      })

      chart.area().position('date*price').color("l(90) .1:#225cff 1:#fff")

      chart.render();
    })

  }, [defaultTime, posCoinDetail])

  const Loading = () => (
    <div className='loading'>
      <img 
        src={loading_gif} 
        alt="loading"
      />
    </div>
  )

  return (
    <div>
      {loading && <Loading/>}
      <div id="kline-container"></div>
    </div>
  )
}