perf: 优化热力图展示，新增全局映射配置

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

@@ -1,55 +1,48 @@
 import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
 import { HeatmapConfig } from './index'
 import { CreateComponentType } from '@/packages/index.d'
-import {cloneDeep} from 'lodash'
+import { cloneDeep } from 'lodash'
 import dataJson from './data.json'
 
-export const includes = ['legend']
+export const includes = ['xAxis', 'yAxis']
 
 export const option = {
-  tooltip: {},
-  legend: {},
+  dataset: { ...dataJson },
+  tooltip: {
+    position: 'top'
+  },
   xAxis: {
-    show:false,
-    type: 'category',
     data: dataJson.xAxis
   },
   yAxis: {
-    show:false,
-    type: 'category',
     data: dataJson.yAxis
   },
-  dataset: { ...dataJson },
   visualMap: {
+    show: true,
     min: 0,
-    max: 1,
+    max: 10,
+    itemWidth: 20,
+    itemHeight: 140,
     calculable: true,
-    realtime: false,
+    orient: 'horizontal',
     inRange: {
-      color: [
-        '#313695',
-        '#4575b4',
-        '#74add1',
-        '#abd9e9',
-        '#e0f3f8',
-        '#ffffbf',
-        '#fee090',
-        '#fdae61',
-        '#f46d43',
-        '#d73027',
-        '#a50026'
-      ]
+      color: ['#4661c2', '#263253']
     }
   },
-  series:[
+  series: [
     {
       name: '',
       type: 'heatmap',
       data: dataJson.seriesData,
+      label: {
+        show: true
+      },
       emphasis: {
         itemStyle: {
           borderColor: '#333',
-          borderWidth: 1
+          borderWidth: 1,
+          shadowBlur: 10,
+          shadowColor: 'rgba(0, 0, 0, 0.5)'
         }
       },
       progressive: 1000,
@@ -64,4 +57,4 @@ export default class Config extends PublicConfigClass implements CreateComponent
 
   // 图表配置项
   public option = echartOptionProfixHandle(option, includes)
-}
+}

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

@@ -1,16 +1,6 @@
 <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>
+    <global-setting :optionData="optionData"></global-setting>
   </div>
 </template>
 

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

@@ -1,5 +1,5 @@
 import image from '@/assets/images/chart/charts/heatmap.png'
-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const HeatmapConfig: ConfigType = {
@@ -10,5 +10,6 @@ export const HeatmapConfig: ConfigType = {
   category: ChatCategoryEnum.MORE,
   categoryName: ChatCategoryEnumName.MORE,
   package: PackagesCategoryEnum.CHARTS,
+  chartFrame: ChartFrameEnum.COMMON,
   image
 }