Commit 8689f32b56261fe228b6b89965b1ca5537e50465
1 parent
078c671e
perf(src/packages/external/Decorates): 修改动画装饰16~26,ws值未动态更新
Showing
9 changed files
with
67 additions
and
2 deletions
| @@ -80,7 +80,7 @@ | @@ -80,7 +80,7 @@ | ||
| 80 | stroke-dasharray="5, 1" | 80 | stroke-dasharray="5, 1" | 
| 81 | /> | 81 | /> | 
| 82 | <text x="50" y="55" text-anchor="middle" :style="{ fill: textColor, opacity: 1 }" font-size="14"> | 82 | <text x="50" y="55" text-anchor="middle" :style="{ fill: textColor, opacity: 1 }" font-size="14"> | 
| 83 | - {{ dataset + unit }} | 83 | + {{ dataset }}{{ unit }} | 
| 84 | </text> | 84 | </text> | 
| 85 | </g> | 85 | </g> | 
| 86 | </svg> | 86 | </svg> | 
| @@ -90,6 +90,9 @@ | @@ -90,6 +90,9 @@ | ||
| 90 | import { PropType, toRefs, ref } from 'vue' | 90 | import { PropType, toRefs, ref } from 'vue' | 
| 91 | import { CreateComponentType } from '@/packages/index.d' | 91 | import { CreateComponentType } from '@/packages/index.d' | 
| 92 | import { option } from './config' | 92 | import { option } from './config' | 
| 93 | +import { useChartDataFetch } from '@/hooks' | ||
| 94 | +import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' | ||
| 95 | + | ||
| 93 | 96 | ||
| 94 | const props = defineProps({ | 97 | const props = defineProps({ | 
| 95 | chartConfig: { | 98 | chartConfig: { | 
| @@ -99,7 +102,7 @@ const props = defineProps({ | @@ -99,7 +102,7 @@ const props = defineProps({ | ||
| 99 | }) | 102 | }) | 
| 100 | const { w, h } = toRefs(props.chartConfig.attr) | 103 | const { w, h } = toRefs(props.chartConfig.attr) | 
| 101 | 104 | ||
| 102 | -const { mainCicleColor, subCicleColor, dataset, unit, textColor } = toRefs(props.chartConfig.option) | 105 | +const { mainCicleColor, subCicleColor, dataset, unit, textColor } = toRefs(props.chartConfig.option as typeof option ) | 
| 103 | 106 | ||
| 104 | const id = Number(Math.random().toString().substring(2, 10) + Date.now()).toString(36) | 107 | const id = Number(Math.random().toString().substring(2, 10) + Date.now()).toString(36) | 
| 105 | 108 | ||
| @@ -108,6 +111,11 @@ const dur = ref(3) | @@ -108,6 +111,11 @@ const dur = ref(3) | ||
| 108 | const polygonId = ref(`decoration-9-polygon-${id}`) | 111 | const polygonId = ref(`decoration-9-polygon-${id}`) | 
| 109 | 112 | ||
| 110 | const defaultColor = ref(['rgba(3, 166, 224, 0.8)', 'rgba(3, 166, 224, 0.5)']) | 113 | const defaultColor = ref(['rgba(3, 166, 224, 0.8)', 'rgba(3, 166, 224, 0.5)']) | 
| 114 | + | ||
| 115 | +// 预览更新 | ||
| 116 | +useChartDataFetch(props.chartConfig, useChartEditStore, (newData: number) => { | ||
| 117 | + dataset.value = newData | ||
| 118 | +}) | ||
| 111 | </script> | 119 | </script> | 
| 112 | 120 | ||
| 113 | <style lang="scss" scoped> | 121 | <style lang="scss" scoped> | 
| @@ -659,6 +659,8 @@ | @@ -659,6 +659,8 @@ | ||
| 659 | import { PropType, toRefs } from 'vue' | 659 | import { PropType, toRefs } from 'vue' | 
| 660 | import { CreateComponentType } from '@/packages/index.d' | 660 | import { CreateComponentType } from '@/packages/index.d' | 
| 661 | import { option } from './config' | 661 | import { option } from './config' | 
| 662 | +import { useChartDataFetch } from '@/hooks' | ||
| 663 | +import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' | ||
| 662 | 664 | ||
| 663 | const props = defineProps({ | 665 | const props = defineProps({ | 
| 664 | chartConfig: { | 666 | chartConfig: { | 
| @@ -672,6 +674,11 @@ const { w, h } = toRefs(props.chartConfig.attr) | @@ -672,6 +674,11 @@ const { w, h } = toRefs(props.chartConfig.attr) | ||
| 672 | const { dataset, unitStr, colorConfig, openAnim, duration, fontConfig } = toRefs( | 674 | const { dataset, unitStr, colorConfig, openAnim, duration, fontConfig } = toRefs( | 
| 673 | props.chartConfig.option as typeof option | 675 | props.chartConfig.option as typeof option | 
| 674 | ) | 676 | ) | 
| 677 | + | ||
| 678 | +// 预览更新 | ||
| 679 | +useChartDataFetch(props.chartConfig, useChartEditStore, (newData: number) => { | ||
| 680 | + dataset.value = newData | ||
| 681 | +}) | ||
| 675 | </script> | 682 | </script> | 
| 676 | 683 | ||
| 677 | <style lang="scss" scoped> | 684 | <style lang="scss" scoped> | 
| @@ -449,6 +449,8 @@ | @@ -449,6 +449,8 @@ | ||
| 449 | import { PropType, toRefs } from 'vue' | 449 | import { PropType, toRefs } from 'vue' | 
| 450 | import { CreateComponentType } from '@/packages/index.d' | 450 | import { CreateComponentType } from '@/packages/index.d' | 
| 451 | import { option } from './config' | 451 | import { option } from './config' | 
| 452 | +import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' | ||
| 453 | +import { useChartDataFetch } from '@/hooks' | ||
| 452 | 454 | ||
| 453 | const props = defineProps({ | 455 | const props = defineProps({ | 
| 454 | chartConfig: { | 456 | chartConfig: { | 
| @@ -462,6 +464,11 @@ const { w, h } = toRefs(props.chartConfig.attr) | @@ -462,6 +464,11 @@ const { w, h } = toRefs(props.chartConfig.attr) | ||
| 462 | const { colorConfig, openAnim, duration, dataset, unitStr, fontConfig } = toRefs( | 464 | const { colorConfig, openAnim, duration, dataset, unitStr, fontConfig } = toRefs( | 
| 463 | props.chartConfig.option as typeof option | 465 | props.chartConfig.option as typeof option | 
| 464 | ) | 466 | ) | 
| 467 | + | ||
| 468 | +// 预览更新 | ||
| 469 | +useChartDataFetch(props.chartConfig, useChartEditStore, (newData: number) => { | ||
| 470 | + dataset.value = newData | ||
| 471 | +}) | ||
| 465 | </script> | 472 | </script> | 
| 466 | 473 | ||
| 467 | <style lang="scss" scoped> | 474 | <style lang="scss" scoped> | 
| @@ -235,6 +235,8 @@ | @@ -235,6 +235,8 @@ | ||
| 235 | import { PropType, toRefs } from 'vue' | 235 | import { PropType, toRefs } from 'vue' | 
| 236 | import { CreateComponentType } from '@/packages/index.d' | 236 | import { CreateComponentType } from '@/packages/index.d' | 
| 237 | import { option } from './config' | 237 | import { option } from './config' | 
| 238 | +import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' | ||
| 239 | +import { useChartDataFetch } from '@/hooks' | ||
| 238 | 240 | ||
| 239 | const props = defineProps({ | 241 | const props = defineProps({ | 
| 240 | chartConfig: { | 242 | chartConfig: { | 
| @@ -248,6 +250,11 @@ const { w, h } = toRefs(props.chartConfig.attr) | @@ -248,6 +250,11 @@ const { w, h } = toRefs(props.chartConfig.attr) | ||
| 248 | const { colorConfig, openAnim, duration, dataset, unitStr, fontConfig } = toRefs( | 250 | const { colorConfig, openAnim, duration, dataset, unitStr, fontConfig } = toRefs( | 
| 249 | props.chartConfig.option as typeof option | 251 | props.chartConfig.option as typeof option | 
| 250 | ) | 252 | ) | 
| 253 | + | ||
| 254 | +// 预览更新 | ||
| 255 | +useChartDataFetch(props.chartConfig, useChartEditStore, (newData: number) => { | ||
| 256 | + dataset.value = newData | ||
| 257 | +}) | ||
| 251 | </script> | 258 | </script> | 
| 252 | 259 | ||
| 253 | <style lang="scss" scoped> | 260 | <style lang="scss" scoped> | 
| @@ -2566,6 +2566,8 @@ | @@ -2566,6 +2566,8 @@ | ||
| 2566 | import { PropType, toRefs } from 'vue' | 2566 | import { PropType, toRefs } from 'vue' | 
| 2567 | import { CreateComponentType } from '@/packages/index.d' | 2567 | import { CreateComponentType } from '@/packages/index.d' | 
| 2568 | import { option } from './config' | 2568 | import { option } from './config' | 
| 2569 | +import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' | ||
| 2570 | +import { useChartDataFetch } from '@/hooks' | ||
| 2569 | 2571 | ||
| 2570 | const props = defineProps({ | 2572 | const props = defineProps({ | 
| 2571 | chartConfig: { | 2573 | chartConfig: { | 
| @@ -2579,6 +2581,11 @@ const { w, h } = toRefs(props.chartConfig.attr) | @@ -2579,6 +2581,11 @@ const { w, h } = toRefs(props.chartConfig.attr) | ||
| 2579 | const { colorConfig, openAnim, duration, dataset, unitStr, fontConfig } = toRefs( | 2581 | const { colorConfig, openAnim, duration, dataset, unitStr, fontConfig } = toRefs( | 
| 2580 | props.chartConfig.option as typeof option | 2582 | props.chartConfig.option as typeof option | 
| 2581 | ) | 2583 | ) | 
| 2584 | + | ||
| 2585 | +// 预览更新 | ||
| 2586 | +useChartDataFetch(props.chartConfig, useChartEditStore, (newData: number) => { | ||
| 2587 | + dataset.value = newData | ||
| 2588 | +}) | ||
| 2582 | </script> | 2589 | </script> | 
| 2583 | 2590 | ||
| 2584 | <style lang="scss" scoped> | 2591 | <style lang="scss" scoped> | 
| @@ -1796,6 +1796,9 @@ | @@ -1796,6 +1796,9 @@ | ||
| 1796 | import { PropType, toRefs } from 'vue' | 1796 | import { PropType, toRefs } from 'vue' | 
| 1797 | import { CreateComponentType } from '@/packages/index.d' | 1797 | import { CreateComponentType } from '@/packages/index.d' | 
| 1798 | import { option } from './config' | 1798 | import { option } from './config' | 
| 1799 | +import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' | ||
| 1800 | +import { useChartDataFetch } from '@/hooks' | ||
| 1801 | + | ||
| 1799 | 1802 | ||
| 1800 | const props = defineProps({ | 1803 | const props = defineProps({ | 
| 1801 | chartConfig: { | 1804 | chartConfig: { | 
| @@ -1809,6 +1812,11 @@ const { w, h } = toRefs(props.chartConfig.attr) | @@ -1809,6 +1812,11 @@ const { w, h } = toRefs(props.chartConfig.attr) | ||
| 1809 | const { colorConfig, openAnim, duration, dataset, unitStr, fontConfig } = toRefs( | 1812 | const { colorConfig, openAnim, duration, dataset, unitStr, fontConfig } = toRefs( | 
| 1810 | props.chartConfig.option as typeof option | 1813 | props.chartConfig.option as typeof option | 
| 1811 | ) | 1814 | ) | 
| 1815 | + | ||
| 1816 | +// 预览更新 | ||
| 1817 | +useChartDataFetch(props.chartConfig, useChartEditStore, (newData: number) => { | ||
| 1818 | + dataset.value = newData | ||
| 1819 | +}) | ||
| 1812 | </script> | 1820 | </script> | 
| 1813 | 1821 | ||
| 1814 | <style lang="scss" scoped> | 1822 | <style lang="scss" scoped> | 
| @@ -267,6 +267,8 @@ | @@ -267,6 +267,8 @@ | ||
| 267 | import { PropType, toRefs } from 'vue' | 267 | import { PropType, toRefs } from 'vue' | 
| 268 | import { CreateComponentType } from '@/packages/index.d' | 268 | import { CreateComponentType } from '@/packages/index.d' | 
| 269 | import { option } from './config' | 269 | import { option } from './config' | 
| 270 | +import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' | ||
| 271 | +import { useChartDataFetch } from '@/hooks' | ||
| 270 | 272 | ||
| 271 | const props = defineProps({ | 273 | const props = defineProps({ | 
| 272 | chartConfig: { | 274 | chartConfig: { | 
| @@ -280,6 +282,11 @@ const { w, h } = toRefs(props.chartConfig.attr) | @@ -280,6 +282,11 @@ const { w, h } = toRefs(props.chartConfig.attr) | ||
| 280 | const { colorConfig, openAnim, duration, dataset, unitStr, fontConfig } = toRefs( | 282 | const { colorConfig, openAnim, duration, dataset, unitStr, fontConfig } = toRefs( | 
| 281 | props.chartConfig.option as typeof option | 283 | props.chartConfig.option as typeof option | 
| 282 | ) | 284 | ) | 
| 285 | + | ||
| 286 | +// 预览更新 | ||
| 287 | +useChartDataFetch(props.chartConfig, useChartEditStore, (newData: number) => { | ||
| 288 | + dataset.value = newData | ||
| 289 | +}) | ||
| 283 | </script> | 290 | </script> | 
| 284 | 291 | ||
| 285 | <style lang="scss" scoped> | 292 | <style lang="scss" scoped> | 
| @@ -595,6 +595,8 @@ | @@ -595,6 +595,8 @@ | ||
| 595 | import { PropType, toRefs } from 'vue' | 595 | import { PropType, toRefs } from 'vue' | 
| 596 | import { CreateComponentType } from '@/packages/index.d' | 596 | import { CreateComponentType } from '@/packages/index.d' | 
| 597 | import { option } from './config' | 597 | import { option } from './config' | 
| 598 | +import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' | ||
| 599 | +import { useChartDataFetch } from '@/hooks' | ||
| 598 | 600 | ||
| 599 | const props = defineProps({ | 601 | const props = defineProps({ | 
| 600 | chartConfig: { | 602 | chartConfig: { | 
| @@ -608,6 +610,11 @@ const { w, h } = toRefs(props.chartConfig.attr) | @@ -608,6 +610,11 @@ const { w, h } = toRefs(props.chartConfig.attr) | ||
| 608 | const { colorConfig, openAnim, duration, dataset, unitStr, fontConfig } = toRefs( | 610 | const { colorConfig, openAnim, duration, dataset, unitStr, fontConfig } = toRefs( | 
| 609 | props.chartConfig.option as typeof option | 611 | props.chartConfig.option as typeof option | 
| 610 | ) | 612 | ) | 
| 613 | + | ||
| 614 | +// 预览更新 | ||
| 615 | +useChartDataFetch(props.chartConfig, useChartEditStore, (newData: number) => { | ||
| 616 | + dataset.value = newData | ||
| 617 | +}) | ||
| 611 | </script> | 618 | </script> | 
| 612 | 619 | ||
| 613 | <style lang="scss" scoped> | 620 | <style lang="scss" scoped> | 
| @@ -290,6 +290,8 @@ | @@ -290,6 +290,8 @@ | ||
| 290 | import { PropType, toRefs } from 'vue' | 290 | import { PropType, toRefs } from 'vue' | 
| 291 | import { CreateComponentType } from '@/packages/index.d' | 291 | import { CreateComponentType } from '@/packages/index.d' | 
| 292 | import { option } from './config' | 292 | import { option } from './config' | 
| 293 | +import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' | ||
| 294 | +import { useChartDataFetch } from '@/hooks' | ||
| 293 | 295 | ||
| 294 | const props = defineProps({ | 296 | const props = defineProps({ | 
| 295 | chartConfig: { | 297 | chartConfig: { | 
| @@ -303,6 +305,11 @@ const { w, h } = toRefs(props.chartConfig.attr) | @@ -303,6 +305,11 @@ const { w, h } = toRefs(props.chartConfig.attr) | ||
| 303 | const { colorConfig, openAnim, duration, dataset, unitStr, fontConfig } = toRefs( | 305 | const { colorConfig, openAnim, duration, dataset, unitStr, fontConfig } = toRefs( | 
| 304 | props.chartConfig.option as typeof option | 306 | props.chartConfig.option as typeof option | 
| 305 | ) | 307 | ) | 
| 308 | + | ||
| 309 | +// 预览更新 | ||
| 310 | +useChartDataFetch(props.chartConfig, useChartEditStore, (newData: number) => { | ||
| 311 | + dataset.value = newData | ||
| 312 | +}) | ||
| 306 | </script> | 313 | </script> | 
| 307 | 314 | ||
| 308 | <style lang="scss" scoped> | 315 | <style lang="scss" scoped> |