mirror of
https://gitee.com/dromara/go-view.git
synced 2025-04-25 19:06:35 +08:00
feat: 优化监听vCharts配置的写法
This commit is contained in:
parent
a698191873
commit
5b37edc558
@ -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 = (
|
||||||
|
@ -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,
|
||||||
|
Loading…
x
Reference in New Issue
Block a user