feat: 新增预览接口数据动态获取功能

src/packages/components/Charts/Bars/BarCommon/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-chart :theme="themeColor" :option="option" autoresize></v-chart>
+  <v-chart ref="vChartRef" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart>
 </template>
 
 <script setup lang="ts">
@@ -12,6 +12,7 @@ import { includes } from './config'
 import { mergeTheme } from '@/packages/public/chart'
 import { useChartDataFetch } from '@/hooks/useChartDataFetch.hook'
 import { CreateComponentType } from '@/packages/index.d'
+import { isPreview } from '@/utils'
 import {
   DatasetComponent,
   GridComponent,
@@ -47,5 +48,5 @@ const option = computed(() => {
   return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
 })
 
-useChartDataFetch(props.chartConfig)
+const { vChartRef } = useChartDataFetch(props.chartConfig)
 </script>

src/packages/components/Charts/Bars/BarCrossrange/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-chart :theme="themeColor" :option="option" autoresize></v-chart>
+  <v-chart ref="vChartRef" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart>
 </template>
 
 <script setup lang="ts">
@@ -11,6 +11,7 @@ import { BarChart } from 'echarts/charts'
 import { mergeTheme } from '@/packages/public/chart'
 import config, { includes } from './config'
 import { useChartDataFetch } from '@/hooks/useChartDataFetch.hook'
+import { isPreview } from '@/utils'
 import {
   DatasetComponent,
   GridComponent,
@@ -46,5 +47,5 @@ const option = computed(() => {
   return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
 })
 
-useChartDataFetch(props.chartConfig)
+const { vChartRef } = useChartDataFetch(props.chartConfig)
 </script>

src/packages/components/Charts/Lines/LineCommon/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-chart :theme="themeColor" :option="option.options" autoresize></v-chart>
+  <v-chart ref="vChartRef" :theme="themeColor" :option="option.options" :manual-update="isPreview()" autoresize></v-chart>
 </template>
 
 <script setup lang="ts">
@@ -13,6 +13,8 @@ import { mergeTheme } from '@/packages/public/chart'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index'
 import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
+import { useChartDataFetch } from '@/hooks/useChartDataFetch.hook'
+import { isPreview } from '@/utils'
 
 const props = defineProps({
   themeSetting: {
@@ -45,7 +47,7 @@ const option = reactive({
 
 // 初始化与渐变色处理
 watch(() => chartEditStore.getEditCanvasConfig.chartThemeColor, (newColor: keyof typeof chartColorsSearch) => {
-  if (!document.location.hash.includes('preview')) {
+  if (!isPreview()) {
     const themeColor = chartColorsSearch[newColor] || chartColorsSearch[defaultTheme]
     props.chartConfig.option.series.forEach((value: any) => {
       value.lineStyle.shadowColor = themeColor[2]
@@ -64,4 +66,6 @@ watch(() => props.chartConfig.option.dataset, () => {
 }, {
   deep: true
 })
+
+const { vChartRef } = useChartDataFetch(props.chartConfig)
 </script>

src/packages/components/Charts/Lines/LineGradientSingle/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-chart :theme="themeColor" :option="option.options" autoresize></v-chart>
+  <v-chart ref="vChartRef" :theme="themeColor" :option="option.options" :manual-update="isPreview()" autoresize></v-chart>
 </template>
 
 <script setup lang="ts">
@@ -13,6 +13,8 @@ import { mergeTheme } from '@/packages/public/chart'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index'
 import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
+import { useChartDataFetch } from '@/hooks/useChartDataFetch.hook'
+import { isPreview } from '@/utils'
 
 const props = defineProps({
   themeSetting: {
@@ -45,7 +47,7 @@ const option = reactive({
 
 // 渐变色处理
 watch(() => chartEditStore.getEditCanvasConfig.chartThemeColor, (newColor: keyof typeof chartColorsSearch) => {
-  if (!document.location.hash.includes('preview')) {
+  if (!isPreview()) {
     const themeColor = chartColorsSearch[newColor] || chartColorsSearch[defaultTheme]
     props.chartConfig.option.series.forEach((value: any, index: number) => {
       value.areaStyle.color = new graphic.LinearGradient(0, 0, 0, 1, [
@@ -71,4 +73,6 @@ watch(() => props.chartConfig.option.dataset, () => {
 }, {
   deep: true
 })
+
+const { vChartRef } = useChartDataFetch(props.chartConfig)
 </script>

src/packages/components/Charts/Lines/LineGradients/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-chart :theme="themeColor" :option="option.options" autoresize></v-chart>
+  <v-chart ref="vChartRef" :theme="themeColor" :option="option.options" :manual-update="isPreview()" autoresize></v-chart>
 </template>
 
 <script setup lang="ts">
@@ -13,6 +13,8 @@ import { mergeTheme } from '@/packages/public/chart'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index'
 import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
+import { useChartDataFetch } from '@/hooks/useChartDataFetch.hook'
+import { isPreview } from '@/utils'
 
 const props = defineProps({
   themeSetting: {
@@ -45,7 +47,7 @@ const option = reactive({
 
 // 渐变色处理
 watch(() => chartEditStore.getEditCanvasConfig.chartThemeColor, (newColor: keyof typeof chartColorsSearch) => {
-  if (!document.location.hash.includes('preview')) {
+  if (!isPreview()) {
     const themeColor = chartColorsSearch[newColor] || chartColorsSearch[defaultTheme]
     props.chartConfig.option.series.forEach((value: any, index: number) => {
       value.areaStyle.color = new graphic.LinearGradient(0, 0, 0, 1, [
@@ -70,4 +72,6 @@ watch(() => props.chartConfig.option.dataset, () => {
 }, {
   deep: true
 })
+
+const { vChartRef } = useChartDataFetch(props.chartConfig)
 </script>

src/packages/components/Charts/Pies/PieCommon/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-chart :theme="themeColor" :option="option" autoresize></v-chart>
+  <v-chart ref="vChartRef" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart>
 </template>
 
 <script setup lang="ts">
@@ -10,6 +10,8 @@ import { CanvasRenderer } from 'echarts/renderers'
 import { PieChart } from 'echarts/charts'
 import { mergeTheme } from '@/packages/public/chart'
 import config, { includes } from './config'
+import { useChartDataFetch } from '@/hooks/useChartDataFetch.hook'
+import { isPreview } from '@/utils'
 import {
   DatasetComponent,
   GridComponent,
@@ -45,4 +47,6 @@ use([
 const option = computed(() => {
   return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
 })
+
+const { vChartRef } = useChartDataFetch(props.chartConfig)
 </script>