feat: 优化监听vCharts配置的写法

This commit is contained in:
奔跑的面条 2024-12-24 17:35:53 +08:00
parent a698191873
commit 5b37edc558
2 changed files with 18 additions and 7 deletions

View File

@ -8,7 +8,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, PropType, watch, onBeforeUnmount, nextTick, toRaw } from 'vue' import { ref, PropType, watch, onBeforeUnmount, nextTick, toRaw, toRefs } from 'vue'
import { VChart, type IVChart, type IInitOption, type ISpec } from '@visactor/vchart' import { VChart, type IVChart, type IInitOption, type ISpec } from '@visactor/vchart'
import { transformHandler } from './transformProps' import { transformHandler } from './transformProps'
import { IOption } from '@/packages/components/VChart/index.d' import { IOption } from '@/packages/components/VChart/index.d'
@ -156,11 +156,13 @@ const props = defineProps({
const vChartRef = ref() const vChartRef = ref()
let chart: IVChart let chart: IVChart
// props.option dataset
const { dataset, ...restOfOption } = toRefs(props.option)
// data // data
watch( watch(
() => ({ () => ({
...props.option, ...restOfOption
dataset: undefined
}), }),
() => { () => {
nextTick(() => { nextTick(() => {
@ -172,6 +174,17 @@ watch(
immediate: true immediate: true
} }
) )
watch(
() => dataset.value,
() => {
nextTick(() => {
createOrUpdateChart(props.option)
})
},
{
deep: false
}
)
// //
const createOrUpdateChart = ( const createOrUpdateChart = (

View File

@ -221,13 +221,11 @@ const dimensionsAndSourceHandle = () => {
const initFieldListHandle = () => { const initFieldListHandle = () => {
if (targetData.value?.option) { if (targetData.value?.option) {
fieldList.value = [] fieldList.value = []
// Field key // Field key
for (const key in targetData.value.option) { for (const key in targetData.value.option) {
if (key.endsWith('Field')) { if (key.endsWith('Field')) {
const value = targetData.value.option[key] const value = targetData.value.option[key]
if (!isArray(value)) { targetData.value.option[key] = value
targetData.value.option[key] = [value]
}
const item = { const item = {
field: key, field: key,
mapping: value, mapping: value,