[Bug] 使用updateData更新数据后area chat 不显示

[yibird]

Version

2.0.0

Link to Minimal Reproduction

[Bug] 使用updateData更新数据后area chat 不显示

Steps to Reproduce

<template>
  <a-card title="系统监控" :body-style="{ padding: '20px 10px' }">
    <template #extra>
      <div class="flex items-center gap-10">
        <a-select :options="timeOptions" class="w-180" />
        <a-segmented v-model:value="value" :options="itemOptions" />
      </div>
    </template>
    <div ref="elRef"></div>
  </a-card>
</template>
<script lang="ts" setup>
  import { defineProps, ref, onMounted, watchEffect, onBeforeUnmount } from 'vue'
  import { VChart, type ISpec } from '@visactor/vchart'
  import type { SysMonitorProps } from './types'

  const { data = [] } = defineProps<SysMonitorProps>()
  const chartInstance = ref<VChart>()
  const elRef = ref<HTMLDivElement>()
  const value = ref(1)

  const spec: ISpec = {
    type: 'area',
    data: {
      id: 'monitor-chart',
      values: []
    },
    xField: 'time',
    yField: 'value',
    series: [
      {
        type: 'area'
      }
    ]
  }
  const timeOptions = [
    {
      label: '1小时',
      value: 0
    },
    {
      label: '2小时',
      value: 1
    },
    {
      label: '24小时',
      value: 2
    }
  ]
  const itemOptions = [
    {
      label: 'CPU',
      value: 1
    },
    {
      label: '磁盘IO',
      value: 2
    }
  ]

  onMounted(() => {
    const el = elRef.value
    if (!el) return
    chartInstance.value = new VChart(spec, { dom: el })
    chartInstance.value.renderSync()
  })

  watchEffect(() => {
    setTimeout(() => {
      chartInstance.value?.updateData('monitor-chart', data)
    }, 1000)
  })

  onBeforeUnmount(() => {
    chartInstance.value?.release()
  })
</script>

预览效果:

Current Behavior

<template>
  <a-card title="系统监控" :body-style="{ padding: '20px 10px' }">
    <template #extra>
      <div class="flex items-center gap-10">
        <a-select :options="timeOptions" class="w-180" />
        <a-segmented v-model:value="value" :options="itemOptions" />
      </div>
    </template>
    <div ref="elRef"></div>
  </a-card>
</template>
<script lang="ts" setup>
  import { defineProps, ref, onMounted, watchEffect, onBeforeUnmount } from 'vue'
  import { VChart, type ISpec } from '@visactor/vchart'
  import type { SysMonitorProps } from './types'

  const { data = [] } = defineProps<SysMonitorProps>()
  const chartInstance = ref<VChart>()
  const elRef = ref<HTMLDivElement>()
  const value = ref(1)

  const spec: ISpec = {
    type: 'area',
    data: {
      id: 'monitor-chart',
      values: []
    },
    xField: 'time',
    yField: 'value',
    series: [
      {
        type: 'area'
      }
    ]
  }
  const timeOptions = [
    {
      label: '1小时',
      value: 0
    },
    {
      label: '2小时',
      value: 1
    },
    {
      label: '24小时',
      value: 2
    }
  ]
  const itemOptions = [
    {
      label: 'CPU',
      value: 1
    },
    {
      label: '磁盘IO',
      value: 2
    }
  ]

  onMounted(() => {
    const el = elRef.value
    if (!el) return
    chartInstance.value = new VChart(spec, { dom: el })
    chartInstance.value.renderSync()
  })

  watchEffect(() => {
    setTimeout(() => {
      chartInstance.value?.updateData('monitor-chart', data)
    }, 1000)
  })

  onBeforeUnmount(() => {
    chartInstance.value?.release()
  })
</script>

预览效果:

Expected Behavior

希望能正常显示

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response

[xuefei1313]

@yibird 我在官网试了下，应该是可以的，你可以尝试debug一下，先确定更新的数据是否正确