[Bug] 使用updateData更新数据后area chat 不显示
Open
Nobody has claimed this yet.
bug
- Dominant language
- TypeScript
- Stars
- 1.8k
- Forks
- 221
- Avg merge
- 1d 6h
- Merged PRs (30d)
- 26
Description
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
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Reproduce the area-chart example from the issue with the VChart constructor, renderSync(), and updateData('monitor-chart', data) entry points. Trace how updateData handles the named data set for area charts and verify the chart displays the supplied values after the update; no project file or test is named in the report.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- data-visualization
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100