feat: 新增热力图mock，解决热力图无法响应式更新的问题

src/packages/components/Charts/Mores/Heatmap/index.vue

@@ -3,8 +3,9 @@
 </template>
 
 <script setup lang="ts">
-import { computed, PropType } from 'vue'
+import { ref, watch, computed, PropType } from 'vue'
 import VChart from 'vue-echarts'
+import dataJson from './data.json'
 import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import { HeatmapChart } from 'echarts/charts'
@@ -14,7 +15,13 @@ import { useChartDataFetch } from '@/hooks'
 import { CreateComponentType } from '@/packages/index.d'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { isPreview } from '@/utils'
-import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent, VisualMapComponent } from 'echarts/components'
+import {
+  DatasetComponent,
+  GridComponent,
+  TooltipComponent,
+  LegendComponent,
+  VisualMapComponent
+} from 'echarts/components'
 
 const props = defineProps({
   themeSetting: {
@@ -31,12 +38,51 @@ const props = defineProps({
   }
 })
 
-use([DatasetComponent, CanvasRenderer, HeatmapChart, GridComponent, TooltipComponent, LegendComponent, VisualMapComponent])
+use([
+  DatasetComponent,
+  CanvasRenderer,
+  HeatmapChart,
+  GridComponent,
+  TooltipComponent,
+  LegendComponent,
+  VisualMapComponent
+])
 
 const option = computed(() => {
   return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
 })
 
-const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
+const vChartRef = ref<typeof VChart>()
 
-</script>
+const dataSetHandle = (dataset: typeof dataJson) => {
+  const { seriesData, xAxis, yAxis } = dataset
+  if (xAxis) {
+    // @ts-ignore
+    props.chartConfig.option.xAxis.data = xAxis
+  }
+  if (yAxis) {
+    // @ts-ignore
+    props.chartConfig.option.yAxis.data = yAxis
+  }
+  if (seriesData) {
+    props.chartConfig.option.series[0].data = seriesData
+  }
+  if (vChartRef.value && isPreview()) {
+    vChartRef.value.setOption(props.chartConfig.option)
+  }
+}
+
+watch(
+  () => props.chartConfig.option.dataset,
+  newData => {
+    dataSetHandle(newData)
+  },
+  {
+    deep: false
+  }
+)
+
+useChartDataFetch(props.chartConfig, useChartEditStore, (newData: typeof dataJson) => {
+  dataSetHandle(newData)
+})
+</script>

src/packages/components/Charts/Mores/Radar/index.vue

@@ -5,6 +5,7 @@
 <script setup lang="ts">
 import { ref, computed, PropType, watch } from 'vue'
 import VChart from 'vue-echarts'
+import dataJson from './data.json'
 import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import { RadarChart } from 'echarts/charts'
@@ -39,7 +40,7 @@ const option = computed(() => {
   return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
 })
 
-const dataSetHandle = (dataset: any) => {
+const dataSetHandle = (dataset: typeof dataJson) => {
   if (dataset.seriesData) {
     props.chartConfig.option.series[0].data = dataset.seriesData
     // @ts-ignore
@@ -63,7 +64,7 @@ watch(
   }
 )
 
-useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
+useChartDataFetch(props.chartConfig, useChartEditStore, (newData: typeof dataJson) => {
   dataSetHandle(newData)
 })
 </script>