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

src/api/mock/heatMapData.json

@@ -0,0 +1,199 @@
+{
+  "xAxis": [
+    "12a",
+    "1a",
+    "2a",
+    "3a",
+    "4a",
+    "5a",
+    "6a",
+    "7a",
+    "8a",
+    "9a",
+    "10a",
+    "11a",
+    "12p",
+    "1p",
+    "2p",
+    "3p",
+    "4p",
+    "5p",
+    "6p",
+    "7p",
+    "8p",
+    "9p",
+    "10p",
+    "11p"
+  ],
+  "yAxis": ["Saturday", "Friday", "Thursday", "Wednesday", "Tuesday", "Monday", "Sunday"],
+  "seriesData": [
+    [0, 0, "@integer(0, 10)"],
+    [1, 0, "@integer(0, 10)"],
+    [2, 0, "-"],
+    [3, 0, "-"],
+    [4, 0, "-"],
+    [5, 0, "-"],
+    [6, 0, "-"],
+    [7, 0, "-"],
+    [8, 0, "-"],
+    [9, 0, "-"],
+    [10, 0, "-"],
+    [11, 0, "@integer(0, 10)"],
+    [12, 0, "@integer(0, 10)"],
+    [13, 0, "@integer(0, 10)"],
+    [14, 0, "@integer(0, 10)"],
+    [15, 0, "@integer(0, 10)"],
+    [16, 0, "@integer(0, 10)"],
+    [17, 0, "@integer(0, 10)"],
+    [18, 0, "@integer(0, 10)"],
+    [19, 0, "@integer(0, 10)"],
+    [20, 0, "@integer(0, 10)"],
+    [21, 0, "@integer(0, 10)"],
+    [22, 0, "@integer(0, 10)"],
+    [23, 0, "@integer(0, 10)"],
+    [0, 1, 7],
+    [1, 1, "-"],
+    [2, 1, "-"],
+    [3, 1, "-"],
+    [4, 1, "-"],
+    [5, 1, "-"],
+    [6, 1, "-"],
+    [7, 1, "-"],
+    [8, 1, "-"],
+    [9, 1, "-"],
+    [10, 1, "@integer(0, 10)"],
+    [11, 1, "@integer(0, 10)"],
+    [12, 1, "@integer(0, 10)"],
+    [13, 1, "@integer(0, 10)"],
+    [14, 1, "@integer(0, 10)"],
+    [15, 1, "@integer(0, 10)"],
+    [16, 1, "@integer(0, 10)"],
+    [17, 1, "@integer(0, 10)"],
+    [18, 1, "@integer(0, 10)"],
+    [19, 1, "@integer(0, 10)"],
+    [20, 1, "@integer(0, 10)"],
+    [21, 1, "@integer(0, 10)"],
+    [22, 1, "@integer(0, 10)"],
+    [23, 1, "@integer(0, 10)"],
+    [0, 2, 1],
+    [1, 2, 1],
+    [2, 2, "-"],
+    [3, 2, "-"],
+    [4, 2, "-"],
+    [5, 2, "-"],
+    [6, 2, "-"],
+    [7, 2, "-"],
+    [8, 2, "-"],
+    [9, 2, "-"],
+    [10, 2, "@integer(0, 10)"],
+    [11, 2, "@integer(0, 10)"],
+    [12, 2, "@integer(0, 10)"],
+    [13, 2, "@integer(0, 10)"],
+    [14, 2, "@integer(0, 10)"],
+    [15, 2, "@integer(0, 10)"],
+    [16, 2, "@integer(0, 10)"],
+    [17, 2, "@integer(0, 10)"],
+    [18, 2, "@integer(0, 10)"],
+    [19, 2, "@integer(0, 10)"],
+    [20, 2, "@integer(0, 10)"],
+    [21, 2, "@integer(0, 10)"],
+    [22, 2, "@integer(0, 10)"],
+    [23, 2, "@integer(0, 10)"],
+    [0, 3, 7],
+    [1, 3, 3],
+    [2, 3, "-"],
+    [3, 3, "-"],
+    [4, 3, "-"],
+    [5, 3, "-"],
+    [6, 3, "-"],
+    [7, 3, "-"],
+    [8, 3, 1],
+    [9, 3, "-"],
+    [10, 3, "@integer(0, 10)"],
+    [11, 3, "@integer(0, 10)"],
+    [12, 3, "@integer(0, 10)"],
+    [13, 3, "@integer(0, 10)"],
+    [14, 3, "@integer(0, 10)"],
+    [15, 3, "@integer(0, 10)"],
+    [16, 3, "@integer(0, 10)"],
+    [17, 3, "@integer(0, 10)"],
+    [18, 3, "@integer(0, 10)"],
+    [19, 3, "@integer(0, 10)"],
+    [20, 3, "@integer(0, 10)"],
+    [21, 3, "@integer(0, 10)"],
+    [22, 3, "@integer(0, 10)"],
+    [23, 3, "@integer(0, 10)"],
+    [0, 4, "@integer(0, 10)"],
+    [1, 4, "@integer(0, 10)"],
+    [2, 4, "-"],
+    [3, 4, "-"],
+    [4, 4, "-"],
+    [5, 4, "@integer(0, 10)"],
+    [6, 4, "-"],
+    [7, 4, "-"],
+    [8, 4, "-"],
+    [9, 4, "@integer(0, 10)"],
+    [10, 4, "@integer(0, 10)"],
+    [11, 4, "@integer(0, 10)"],
+    [12, 4, "@integer(0, 10)"],
+    [13, 4, "@integer(0, 10)"],
+    [14, 4, "@integer(0, 10)"],
+    [15, 4, "@integer(0, 10)"],
+    [16, 4, "@integer(0, 10)"],
+    [17, 4, "@integer(0, 10)"],
+    [18, 4, "@integer(0, 10)"],
+    [19, 4, "@integer(0, 10)"],
+    [20, 4, "@integer(0, 10)"],
+    [21, 4, "@integer(0, 10)"],
+    [22, 4, "@integer(0, 10)"],
+    [23, 4, "-"],
+    [0, 5, "@integer(0, 10)"],
+    [1, 5, "@integer(0, 10)"],
+    [2, 5, "-"],
+    [3, 5, "@integer(0, 10)"],
+    [4, 5, "-"],
+    [5, 5, "-"],
+    [6, 5, "-"],
+    [7, 5, "-"],
+    [8, 5, "@integer(0, 10)"],
+    [9, 5, "-"],
+    [10, 5, "@integer(0, 10)"],
+    [11, 5, "@integer(0, 10)"],
+    [12, 5, "@integer(0, 10)"],
+    [13, 5, "@integer(0, 10)"],
+    [14, 5, "@integer(0, 10)"],
+    [15, 5, "@integer(0, 10)"],
+    [16, 5, "@integer(0, 10)"],
+    [17, 5, "@integer(0, 10)"],
+    [18, 5, "-"],
+    [19, 5, "@integer(0, 10)"],
+    [20, 5, "@integer(0, 10)"],
+    [21, 5, "@integer(0, 10)"],
+    [22, 5, "@integer(0, 10)"],
+    [23, 5, "-"],
+    [0, 6, "@integer(0, 10)"],
+    [1, 6, "-"],
+    [2, 6, "-"],
+    [3, 6, "-"],
+    [4, 6, "-"],
+    [5, 6, "-"],
+    [6, 6, "-"],
+    [7, 6, "-"],
+    [8, 6, "-"],
+    [9, 6, "-"],
+    [10, 6, "@integer(0, 10)"],
+    [11, 6, "-"],
+    [12, 6, "@integer(0, 10)"],
+    [13, 6, "@integer(0, 10)"],
+    [14, 6, "@integer(0, 10)"],
+    [15, 6, "@integer(0, 10)"],
+    [16, 6, "-"],
+    [17, 6, "-"],
+    [18, 6, "-"],
+    [19, 6, "-"],
+    [20, 6, "@integer(0, 10)"],
+    [21, 6, "@integer(0, 10)"],
+    [22, 6, "@integer(0, 10)"],
+    [23, 6, "@integer(0, 10)"]
+  ]
+}

src/api/mock/index.ts

@@ -12,6 +12,7 @@ export const imageUrl = '/mock/image'
 export const rankListUrl = '/mock/rankList'
 export const scrollBoardUrl = '/mock/scrollBoard'
 export const radarUrl = '/mock/radarData'
+export const heatMapUrl = '/mock/heatMapData'
 
 const mockObject: MockMethod[] = [
   {
@@ -61,6 +62,11 @@ const mockObject: MockMethod[] = [
     method: RequestHttpEnum.GET,
     response: () => test.fetchRadar
   },
+  {
+    url: heatMapUrl,
+    method: RequestHttpEnum.GET,
+    response: () => test.fetchHeatmap
+  }
 ]
 
 export default mockObject

src/api/mock/test.mock.ts

@@ -1,3 +1,5 @@
+import heatmapJson from './heatMapData.json'
+
 export default {
   // 单图表
   fetchMockSingleData: {
@@ -181,5 +183,12 @@ export default {
         }
       ]
     }
+  },
+  // 热力图
+  fetchHeatmap: {
+    code: 0,
+    status: 200,
+    msg: '请求成功',
+    data: heatmapJson
   }
 }

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>()
 
+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>

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/components/RequestTargetConfig/index.vue

@@ -71,7 +71,8 @@ import {
   numberIntUrl,
   textUrl,
   imageUrl,
-  radarUrl
+  radarUrl,
+  heatMapUrl
 } from '@/api/mock'
 
 const { HelpOutlineIcon } = icon.ionicons5
@@ -106,6 +107,9 @@ const apiList = [
   },
   {
     value: `【雷达】${radarUrl}`
+  },
+  {
+    value: `【热力图】${heatMapUrl}`
   }
 ]
 </script>