feat: 提交热力图

src/packages/components/Charts/Mores/Heatmap/config.ts

@@ -0,0 +1,65 @@
+import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
+import { HeatmapConfig } from './index'
+import { CreateComponentType } from '@/packages/index.d'
+import {cloneDeep} from 'lodash'
+import dataJson from './data.json'
+
+export const includes = ['legend']
+
+export const option = {
+  tooltip: {},
+  legend: {},
+  xAxis: {
+    type: 'category',
+    data: dataJson.xAxis
+  },
+  yAxis: {
+    type: 'category',
+    data: dataJson.yAxis
+  },
+  dataset: { ...dataJson },
+  visualMap: {
+    min: 0,
+    max: 1,
+    calculable: true,
+    realtime: false,
+    inRange: {
+      color: [
+        '#313695',
+        '#4575b4',
+        '#74add1',
+        '#abd9e9',
+        '#e0f3f8',
+        '#ffffbf',
+        '#fee090',
+        '#fdae61',
+        '#f46d43',
+        '#d73027',
+        '#a50026'
+      ]
+    }
+  },
+  series:[
+    {
+      name: '',
+      type: 'heatmap',
+      data: dataJson.seriesData,
+      emphasis: {
+        itemStyle: {
+          borderColor: '#333',
+          borderWidth: 1
+        }
+      },
+      progressive: 1000,
+      animation: false
+    }
+  ]
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key: string = HeatmapConfig.key
+  public chartConfig = cloneDeep(HeatmapConfig)
+
+  // 图表配置项
+  public option = echartOptionProfixHandle(option, includes)
+}

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

@@ -1,6 +1,34 @@
 <template>
+  <div>
+    <global-setting :optionData="optionData" :in-chart="true"></global-setting>
+    <CollapseItem name="热力图" :expanded="true">
+      <SettingItemBox name="拖拽手柄" :alone="true">
+        <SettingItem name="">
+          <n-switch v-model:value="heatMapConfig.visualMap.calculable" size="small" />
+        </SettingItem>
+      </SettingItemBox>
+      <SettingItemBox name="实时更新" :alone="true">
+        <n-switch v-model:value="heatMapConfig.visualMap.realtime" size="small" />
+      </SettingItemBox>
+    </CollapseItem>
+  </div>
 </template>
 
 <script setup lang="ts">
+  import { PropType, computed } from 'vue'
+import { GlobalSetting, CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import { option } from './config'
+import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option & GlobalThemeJsonType>,
+      required: true
+  }
+})
+
+const heatMapConfig = computed<typeof option>(() => {
+  return props.optionData
+})
 
 </script>

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

@@ -1,13 +1,42 @@
 <template>
-  <div>
+  <v-chart ref="vChartRef" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart>
-    水波
-  </div>
 </template>
 
 <script setup lang="ts">
+import { computed, PropType } from 'vue'
+import VChart from 'vue-echarts'
+import { use } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+import { HeatmapChart } from 'echarts/charts'
+import { includes } from './config'
+import { mergeTheme } from '@/packages/public/chart'
+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'
 
-</script>
+const props = defineProps({
+  themeSetting: {
+    type: Object,
+    required: true
+  },
+  themeColor: {
+    type: Object,
+    required: true
+  },
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
 
-<style lang="scss" scoped>
+use([DatasetComponent, CanvasRenderer, HeatmapChart, GridComponent, TooltipComponent, LegendComponent, VisualMapComponent])
 
-</style>
+const option = computed(() => {
+  return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+})
+
+const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
+
+</script>