From 432ebf627ae14ee5f95fb1f4725f78ebbf620c32 Mon Sep 17 00:00:00 2001
From: jianneng-fit2cloud <jianneng.pan@fit2cloud.com>
Date: Wed, 21 Aug 2024 20:19:41 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E5=9B=BE=E8=A1=A8):=20=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E7=9F=A9=E9=98=B5=E7=83=AD=E5=8A=9B=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/assets/svg/t-heatmap-dark.svg         |  18 +
 .../src/assets/svg/t-heatmap-origin.svg       |  18 +
 .../src/assets/svg/t-heatmap.svg              |  18 +
 .../data-visualization/canvas/Shape.vue       |   3 +-
 .../src/components/icon-custom/src/Icon.vue   |   8 +-
 core/core-frontend/src/locales/zh-CN.ts       |   1 +
 .../core-frontend/src/models/chart/chart.d.ts |   2 +
 .../src/models/chart/editor.d.ts              |   2 +-
 .../editor/filter/auth-tree/RowAuth.vue       |   2 +-
 .../views/chart/components/editor/index.vue   |  85 ++++-
 .../chart/components/editor/util/chart.ts     |   7 +
 .../js/panel/charts/table/t-heatmap.ts        | 316 ++++++++++++++++++
 .../extensions/view/dto/ChartAxis.java        |   1 +
 .../extensions/view/dto/ChartViewBaseDTO.java |   2 +
 14 files changed, 478 insertions(+), 5 deletions(-)
 create mode 100644 core/core-frontend/src/assets/svg/t-heatmap-dark.svg
 create mode 100644 core/core-frontend/src/assets/svg/t-heatmap-origin.svg
 create mode 100644 core/core-frontend/src/assets/svg/t-heatmap.svg
 create mode 100644 core/core-frontend/src/views/chart/components/js/panel/charts/table/t-heatmap.ts

diff --git a/core/core-frontend/src/assets/svg/t-heatmap-dark.svg b/core/core-frontend/src/assets/svg/t-heatmap-dark.svg
new file mode 100644
index 0000000000..0e550c0c4b
--- /dev/null
+++ b/core/core-frontend/src/assets/svg/t-heatmap-dark.svg
@@ -0,0 +1,18 @@
+<svg width="80" height="56" viewBox="0 0 80 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M13 6C13 5.44772 13.4477 5 14 5H24C24.5523 5 25 5.44772 25 6V14C25 14.5523 24.5523 15 24 15H14C13.4477 15 13 14.5523 13 14V6Z" fill="#244EB3"/>
+  <path d="M13 18C13 17.4477 13.4477 17 14 17H24C24.5523 17 25 17.4477 25 18V26C25 26.5523 24.5523 27 24 27H14C13.4477 27 13 26.5523 13 26V18Z" fill="#3370FF"/>
+  <path d="M13 30C13 29.4477 13.4477 29 14 29H24C24.5523 29 25 29.4477 25 30V38C25 38.5523 24.5523 39 24 39H14C13.4477 39 13 38.5523 13 38V30Z" fill="#244EB3"/>
+  <path d="M13 42C13 41.4477 13.4477 41 14 41H24C24.5523 41 25 41.4477 25 42V50C25 50.5523 24.5523 51 24 51H14C13.4477 51 13 50.5523 13 50V42Z" fill="#244EB3"/>
+  <path d="M27 6C27 5.44772 27.4477 5 28 5H38C38.5523 5 39 5.44772 39 6V14C39 14.5523 38.5523 15 38 15H28C27.4477 15 27 14.5523 27 14V6Z" fill="#142D66"/>
+  <path d="M27 18C27 17.4477 27.4477 17 28 17H38C38.5523 17 39 17.4477 39 18V26C39 26.5523 38.5523 27 38 27H28C27.4477 27 27 26.5523 27 26V18Z" fill="#244EB3"/>
+  <path d="M27 30C27 29.4477 27.4477 29 28 29H38C38.5523 29 39 29.4477 39 30V38C39 38.5523 38.5523 39 38 39H28C27.4477 39 27 38.5523 27 38V30Z" fill="#142D66"/>
+  <path d="M27 42C27 41.4477 27.4477 41 28 41H38C38.5523 41 39 41.4477 39 42V50C39 50.5523 38.5523 51 38 51H28C27.4477 51 27 50.5523 27 50V42Z" fill="#3370FF"/>
+  <path d="M41 6C41 5.44772 41.4477 5 42 5H52C52.5523 5 53 5.44772 53 6V14C53 14.5523 52.5523 15 52 15H42C41.4477 15 41 14.5523 41 14V6Z" fill="#244EB3"/>
+  <path d="M41 18C41 17.4477 41.4477 17 42 17H52C52.5523 17 53 17.4477 53 18V26C53 26.5523 52.5523 27 52 27H42C41.4477 27 41 26.5523 41 26V18Z" fill="#3370FF"/>
+  <path d="M41 30C41 29.4477 41.4477 29 42 29H52C52.5523 29 53 29.4477 53 30V38C53 38.5523 52.5523 39 52 39H42C41.4477 39 41 38.5523 41 38V30Z" fill="#244EB3"/>
+  <path d="M41 42C41 41.4477 41.4477 41 42 41H52C52.5523 41 53 41.4477 53 42V50C53 50.5523 52.5523 51 52 51H42C41.4477 51 41 50.5523 41 50V42Z" fill="#142D66"/>
+  <path d="M55 6C55 5.44772 55.4477 5 56 5H66C66.5523 5 67 5.44772 67 6V14C67 14.5523 66.5523 15 66 15H56C55.4477 15 55 14.5523 55 14V6Z" fill="#244EB3"/>
+  <path d="M55 18C55 17.4477 55.4477 17 56 17H66C66.5523 17 67 17.4477 67 18V26C67 26.5523 66.5523 27 66 27H56C55.4477 27 55 26.5523 55 26V18Z" fill="#142D66"/>
+  <path d="M55 30C55 29.4477 55.4477 29 56 29H66C66.5523 29 67 29.4477 67 30V38C67 38.5523 66.5523 39 66 39H56C55.4477 39 55 38.5523 55 38V30Z" fill="#244EB3"/>
+  <path d="M55 42C55 41.4477 55.4477 41 56 41H66C66.5523 41 67 41.4477 67 42V50C67 50.5523 66.5523 51 66 51H56C55.4477 51 55 50.5523 55 50V42Z" fill="#244EB3"/>
+</svg>
diff --git a/core/core-frontend/src/assets/svg/t-heatmap-origin.svg b/core/core-frontend/src/assets/svg/t-heatmap-origin.svg
new file mode 100644
index 0000000000..a19b1d00ed
--- /dev/null
+++ b/core/core-frontend/src/assets/svg/t-heatmap-origin.svg
@@ -0,0 +1,18 @@
+<svg width="80" height="56" viewBox="0 0 80 56" xmlns="http://www.w3.org/2000/svg">
+  <path d="M13 6C13 5.44772 13.4477 5 14 5H24C24.5523 5 25 5.44772 25 6V14C25 14.5523 24.5523 15 24 15H14C13.4477 15 13 14.5523 13 14V6Z"/>
+  <path d="M13 18C13 17.4477 13.4477 17 14 17H24C24.5523 17 25 17.4477 25 18V26C25 26.5523 24.5523 27 24 27H14C13.4477 27 13 26.5523 13 26V18Z"/>
+  <path d="M13 30C13 29.4477 13.4477 29 14 29H24C24.5523 29 25 29.4477 25 30V38C25 38.5523 24.5523 39 24 39H14C13.4477 39 13 38.5523 13 38V30Z"/>
+  <path d="M13 42C13 41.4477 13.4477 41 14 41H24C24.5523 41 25 41.4477 25 42V50C25 50.5523 24.5523 51 24 51H14C13.4477 51 13 50.5523 13 50V42Z"/>
+  <path d="M27 6C27 5.44772 27.4477 5 28 5H38C38.5523 5 39 5.44772 39 6V14C39 14.5523 38.5523 15 38 15H28C27.4477 15 27 14.5523 27 14V6Z"/>
+  <path d="M27 18C27 17.4477 27.4477 17 28 17H38C38.5523 17 39 17.4477 39 18V26C39 26.5523 38.5523 27 38 27H28C27.4477 27 27 26.5523 27 26V18Z"/>
+  <path d="M27 30C27 29.4477 27.4477 29 28 29H38C38.5523 29 39 29.4477 39 30V38C39 38.5523 38.5523 39 38 39H28C27.4477 39 27 38.5523 27 38V30Z"/>
+  <path d="M27 42C27 41.4477 27.4477 41 28 41H38C38.5523 41 39 41.4477 39 42V50C39 50.5523 38.5523 51 38 51H28C27.4477 51 27 50.5523 27 50V42Z"/>
+  <path d="M41 6C41 5.44772 41.4477 5 42 5H52C52.5523 5 53 5.44772 53 6V14C53 14.5523 52.5523 15 52 15H42C41.4477 15 41 14.5523 41 14V6Z"/>
+  <path d="M41 18C41 17.4477 41.4477 17 42 17H52C52.5523 17 53 17.4477 53 18V26C53 26.5523 52.5523 27 52 27H42C41.4477 27 41 26.5523 41 26V18Z"/>
+  <path d="M41 30C41 29.4477 41.4477 29 42 29H52C52.5523 29 53 29.4477 53 30V38C53 38.5523 52.5523 39 52 39H42C41.4477 39 41 38.5523 41 38V30Z"/>
+  <path d="M41 42C41 41.4477 41.4477 41 42 41H52C52.5523 41 53 41.4477 53 42V50C53 50.5523 52.5523 51 52 51H42C41.4477 51 41 50.5523 41 50V42Z"/>
+  <path d="M55 6C55 5.44772 55.4477 5 56 5H66C66.5523 5 67 5.44772 67 6V14C67 14.5523 66.5523 15 66 15H56C55.4477 15 55 14.5523 55 14V6Z"/>
+  <path d="M55 18C55 17.4477 55.4477 17 56 17H66C66.5523 17 67 17.4477 67 18V26C67 26.5523 66.5523 27 66 27H56C55.4477 27 55 26.5523 55 26V18Z"/>
+  <path d="M55 30C55 29.4477 55.4477 29 56 29H66C66.5523 29 67 29.4477 67 30V38C67 38.5523 66.5523 39 66 39H56C55.4477 39 55 38.5523 55 38V30Z"/>
+  <path d="M55 42C55 41.4477 55.4477 41 56 41H66C66.5523 41 67 41.4477 67 42V50C67 50.5523 66.5523 51 66 51H56C55.4477 51 55 50.5523 55 50V42Z"/>
+</svg>
diff --git a/core/core-frontend/src/assets/svg/t-heatmap.svg b/core/core-frontend/src/assets/svg/t-heatmap.svg
new file mode 100644
index 0000000000..b6c865615f
--- /dev/null
+++ b/core/core-frontend/src/assets/svg/t-heatmap.svg
@@ -0,0 +1,18 @@
+<svg width="80" height="56" viewBox="0 0 80 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M13 6C13 5.44772 13.4477 5 14 5H24C24.5523 5 25 5.44772 25 6V14C25 14.5523 24.5523 15 24 15H14C13.4477 15 13 14.5523 13 14V6Z" fill="#85A9FF"/>
+  <path d="M13 18C13 17.4477 13.4477 17 14 17H24C24.5523 17 25 17.4477 25 18V26C25 26.5523 24.5523 27 24 27H14C13.4477 27 13 26.5523 13 26V18Z" fill="#3370FF"/>
+  <path d="M13 30C13 29.4477 13.4477 29 14 29H24C24.5523 29 25 29.4477 25 30V38C25 38.5523 24.5523 39 24 39H14C13.4477 39 13 38.5523 13 38V30Z" fill="#85A9FF"/>
+  <path d="M13 42C13 41.4477 13.4477 41 14 41H24C24.5523 41 25 41.4477 25 42V50C25 50.5523 24.5523 51 24 51H14C13.4477 51 13 50.5523 13 50V42Z" fill="#85A9FF"/>
+  <path d="M27 6C27 5.44772 27.4477 5 28 5H38C38.5523 5 39 5.44772 39 6V14C39 14.5523 38.5523 15 38 15H28C27.4477 15 27 14.5523 27 14V6Z" fill="#D6E2FF"/>
+  <path d="M27 18C27 17.4477 27.4477 17 28 17H38C38.5523 17 39 17.4477 39 18V26C39 26.5523 38.5523 27 38 27H28C27.4477 27 27 26.5523 27 26V18Z" fill="#85A9FF"/>
+  <path d="M27 30C27 29.4477 27.4477 29 28 29H38C38.5523 29 39 29.4477 39 30V38C39 38.5523 38.5523 39 38 39H28C27.4477 39 27 38.5523 27 38V30Z" fill="#D6E2FF"/>
+  <path d="M27 42C27 41.4477 27.4477 41 28 41H38C38.5523 41 39 41.4477 39 42V50C39 50.5523 38.5523 51 38 51H28C27.4477 51 27 50.5523 27 50V42Z" fill="#3370FF"/>
+  <path d="M41 6C41 5.44772 41.4477 5 42 5H52C52.5523 5 53 5.44772 53 6V14C53 14.5523 52.5523 15 52 15H42C41.4477 15 41 14.5523 41 14V6Z" fill="#85A9FF"/>
+  <path d="M41 18C41 17.4477 41.4477 17 42 17H52C52.5523 17 53 17.4477 53 18V26C53 26.5523 52.5523 27 52 27H42C41.4477 27 41 26.5523 41 26V18Z" fill="#3370FF"/>
+  <path d="M41 30C41 29.4477 41.4477 29 42 29H52C52.5523 29 53 29.4477 53 30V38C53 38.5523 52.5523 39 52 39H42C41.4477 39 41 38.5523 41 38V30Z" fill="#85A9FF"/>
+  <path d="M41 42C41 41.4477 41.4477 41 42 41H52C52.5523 41 53 41.4477 53 42V50C53 50.5523 52.5523 51 52 51H42C41.4477 51 41 50.5523 41 50V42Z" fill="#D6E2FF"/>
+  <path d="M55 6C55 5.44772 55.4477 5 56 5H66C66.5523 5 67 5.44772 67 6V14C67 14.5523 66.5523 15 66 15H56C55.4477 15 55 14.5523 55 14V6Z" fill="#85A9FF"/>
+  <path d="M55 18C55 17.4477 55.4477 17 56 17H66C66.5523 17 67 17.4477 67 18V26C67 26.5523 66.5523 27 66 27H56C55.4477 27 55 26.5523 55 26V18Z" fill="#D6E2FF"/>
+  <path d="M55 30C55 29.4477 55.4477 29 56 29H66C66.5523 29 67 29.4477 67 30V38C67 38.5523 66.5523 39 66 39H56C55.4477 39 55 38.5523 55 38V30Z" fill="#85A9FF"/>
+  <path d="M55 42C55 41.4477 55.4477 41 56 41H66C66.5523 41 67 41.4477 67 42V50C67 50.5523 66.5523 51 66 51H56C55.4477 51 55 50.5523 55 50V42Z" fill="#85A9FF"/>
+</svg>
diff --git a/core/core-frontend/src/components/data-visualization/canvas/Shape.vue b/core/core-frontend/src/components/data-visualization/canvas/Shape.vue
index 6d41a1aa60..436510023e 100644
--- a/core/core-frontend/src/components/data-visualization/canvas/Shape.vue
+++ b/core/core-frontend/src/components/data-visualization/canvas/Shape.vue
@@ -316,7 +316,8 @@ const boardMoveActive = computed(() => {
     'table-normal',
     'table-pivot',
     'symbolic-map',
-    'heat-map'
+    'heat-map',
+    't-heatmap'
   ]
   return element.value.isPlugin || CHARTS.includes(element.value.innerType)
 })
diff --git a/core/core-frontend/src/components/icon-custom/src/Icon.vue b/core/core-frontend/src/components/icon-custom/src/Icon.vue
index c476fd042e..9558839098 100644
--- a/core/core-frontend/src/components/icon-custom/src/Icon.vue
+++ b/core/core-frontend/src/components/icon-custom/src/Icon.vue
@@ -679,6 +679,9 @@ import icon_single_line_outlined from '@/assets/svg/icon_single-line_outlined.sv
 import icon_todo_outlined from '@/assets/svg/icon_todo_outlined.svg'
 import icon_file_doc_colorful from '@/assets/svg/icon_file-doc_colorful.svg'
 import icon_font from '@/assets/svg/icon_font.svg'
+import tHeatmap from '@/assets/svg/t-heatmap.svg'
+import tHeatmapDark from '@/assets/svg/t-heatmap-dark.svg'
+import tHeatmapOrigin from '@/assets/svg/t-heatmap-origin.svg'
 const iconMap = {
   '401': _401,
   icon_adjustment_outlined,
@@ -1356,7 +1359,10 @@ const iconMap = {
   calculate,
   'icon_file-doc_colorful': icon_file_doc_colorful,
   icon_font,
-  clock
+  clock,
+  't-heatmap': tHeatmap,
+  't-heatmap-dark': tHeatmapDark,
+  't-heatmap-origin': tHeatmapOrigin
 }
 
 const props = defineProps({
diff --git a/core/core-frontend/src/locales/zh-CN.ts b/core/core-frontend/src/locales/zh-CN.ts
index a00d722c6a..449b1651e9 100644
--- a/core/core-frontend/src/locales/zh-CN.ts
+++ b/core/core-frontend/src/locales/zh-CN.ts
@@ -1116,6 +1116,7 @@ export default {
     table_column_fixed: '固定列宽',
     table_column_custom: '自定义',
     chart_table_pivot: '透视表',
+    chart_table_heatmap: '热力图',
     table_pivot_row: '数据行',
     field_error_tips:
       '该字段所对应的数据集原始字段发生变更（包括维度、指标，字段类型，字段被删除等），建议重新编辑',
diff --git a/core/core-frontend/src/models/chart/chart.d.ts b/core/core-frontend/src/models/chart/chart.d.ts
index 2dff80aff4..0365d5f5f0 100644
--- a/core/core-frontend/src/models/chart/chart.d.ts
+++ b/core/core-frontend/src/models/chart/chart.d.ts
@@ -68,6 +68,8 @@ declare interface Chart {
   flowMapStartName?: Axis[]
   flowMapEndName?: Axis[]
   showPosition: string
+
+  extColor: Axis[]
 }
 declare type CustomAttr = DeepPartial<ChartAttr> | JSONString<DeepPartial<ChartAttr>>
 declare type CustomStyle = DeepPartial<ChartStyle> | JSONString<DeepPartial<ChartStyle>>
diff --git a/core/core-frontend/src/models/chart/editor.d.ts b/core/core-frontend/src/models/chart/editor.d.ts
index 72186e22dc..b2e21a1170 100644
--- a/core/core-frontend/src/models/chart/editor.d.ts
+++ b/core/core-frontend/src/models/chart/editor.d.ts
@@ -57,7 +57,7 @@ declare type AxisType =
   | 'area'
   | 'flowMapStartName'
   | 'flowMapEndName'
-  | 'flowMapColor'
+  | 'extColor'
 /**
  * 轴配置
  */
diff --git a/core/core-frontend/src/views/chart/components/editor/filter/auth-tree/RowAuth.vue b/core/core-frontend/src/views/chart/components/editor/filter/auth-tree/RowAuth.vue
index d969d385d4..62b70de1f6 100644
--- a/core/core-frontend/src/views/chart/components/editor/filter/auth-tree/RowAuth.vue
+++ b/core/core-frontend/src/views/chart/components/editor/filter/auth-tree/RowAuth.vue
@@ -144,7 +144,7 @@ const getTimeValue = dynamicTimeSetting => {
         label: '年初',
         value: 'yearBeginning'
       }
-    ].find(ele => ele.value === relativeToCurrent).label
+    ].find(ele => ele.value === relativeToCurrent)?.label
     return timeValue
   }
   timeValue = `${timeNum}${relativeToCurrentTypeMap[relativeToCurrentType]}${
diff --git a/core/core-frontend/src/views/chart/components/editor/index.vue b/core/core-frontend/src/views/chart/components/editor/index.vue
index e1e958e836..b88c890b5c 100644
--- a/core/core-frontend/src/views/chart/components/editor/index.vue
+++ b/core/core-frontend/src/views/chart/components/editor/index.vue
@@ -413,6 +413,8 @@ const dimensionItemRemove = item => {
     view.value.flowMapStartName.splice(item.index, 1)
   } else if (item.removeType === 'flowMapEndName') {
     view.value.flowMapEndName.splice(item.index, 1)
+  } else if (item.removeType === 'extColor') {
+    view.value.extColor.splice(item.index, 1)
   }
 }
 
@@ -524,7 +526,12 @@ const onCustomFlowMapEndNameSort = item => {
   customSortAxis.value = 'flowMapEndName'
   customSort()
 }
-
+const onCustomExtColorSort = item => {
+  recordSnapshotInfo('render')
+  state.customSortField = view.value.extColor[item.index]
+  customSortAxis.value = 'extColor'
+  customSort()
+}
 const onMove = e => {
   recordSnapshotInfo('calcData')
   state.moveId = e.draggedContext.element.id
@@ -798,6 +805,10 @@ const addFlowMapEndName = e => {
   addAxis(e, 'flowMapEndName')
 }
 
+const addExtColor = e => {
+  addAxis(e, 'extColor')
+}
+
 const onAxisChange = (e, axis: AxisType) => {
   if (e.removed) {
     const { element } = e.removed
@@ -1110,6 +1121,11 @@ const onChangeFlowMapPointForm = val => {
   renderChart(view.value)
 }
 
+const onChangExtColorForm = val => {
+  view.value.extColor = val
+  renderChart(view.value)
+}
+
 const showRename = val => {
   recordSnapshotInfo('render')
   state.itemForm = JSON.parse(JSON.stringify(val))
@@ -1135,6 +1151,7 @@ const removeItems = (
     | 'drillFields'
     | 'flowMapStartName'
     | 'flowMapEndName'
+    | 'extColor'
 ) => {
   recordSnapshotInfo('calcData')
   let axis = []
@@ -1170,6 +1187,9 @@ const removeItems = (
     case 'flowMapEndName':
       axis = view.value.flowMapEndName?.splice(0)
       break
+    case 'extColor':
+      axis = view.value.extColor?.splice(0)
+      break
   }
   axis?.length && emitter.emit('removeAxis', { axisType: _type, axis, editType: 'remove' })
 }
@@ -1223,6 +1243,11 @@ const saveRename = ref => {
           axis = view.value.flowMapEndName[index]
           view.value.flowMapEndName[index].chartShowName = chartShowName
           break
+        case 'extColor':
+          axisType = 'extColor'
+          axis = view.value.extColor[index]
+          view.value.extColor[index].chartShowName = chartShowName
+          break
         default:
           break
       }
@@ -2131,6 +2156,64 @@ const deleteChartFieldItem = id => {
                         </div>
                       </el-row>
 
+                      <el-row v-if="showAxis('extColor')" class="padding-lr drag-data">
+                        <div class="form-draggable-title">
+                          <span>
+                            {{ chartViewInstance.axisConfig.extColor.name }}
+                          </span>
+                          <el-tooltip
+                            :effect="toolTip"
+                            placement="top"
+                            :content="t('common.delete')"
+                          >
+                            <el-icon
+                              class="remove-icon"
+                              :class="{ 'remove-icon--dark': themes === 'dark' }"
+                              size="14px"
+                              @click="removeItems('extColor')"
+                            >
+                              <Icon class-name="inner-class" name="icon_delete-trash_outlined" />
+                            </el-icon>
+                          </el-tooltip>
+                        </div>
+                        <div
+                          class="qw"
+                          @drop="$event => drop($event, 'extColor')"
+                          @dragenter="dragEnter"
+                          @dragover="$event => dragOver($event)"
+                        >
+                          <draggable
+                            :list="view.extColor"
+                            :move="onMove"
+                            item-key="id"
+                            group="drag"
+                            animation="300"
+                            class="drag-block-style"
+                            :class="{ dark: themes === 'dark' }"
+                            @add="addExtColor"
+                            @change="e => onAxisChange(e, 'extColor')"
+                          >
+                            <template #item="{ element, index }">
+                              <dimension-item
+                                :dimension-data="state.dimension"
+                                :quota-data="state.quota"
+                                :chart="view"
+                                :item="element"
+                                :index="index"
+                                :themes="props.themes"
+                                type="extColor"
+                                @onDimensionItemChange="dimensionItemChange"
+                                @onDimensionItemRemove="dimensionItemRemove"
+                                @onNameEdit="showRename"
+                                @onCustomSort="onCustomExtColorSort"
+                                @valueFormatter="valueFormatter"
+                              />
+                            </template>
+                          </draggable>
+                          <drag-placeholder :themes="themes" :drag-list="view.extColor" />
+                        </div>
+                      </el-row>
+
                       <template v-if="view.type !== 'bar-range'">
                         <!--yAxis-->
                         <el-row v-if="showAxis('yAxis')" class="padding-lr drag-data">
diff --git a/core/core-frontend/src/views/chart/components/editor/util/chart.ts b/core/core-frontend/src/views/chart/components/editor/util/chart.ts
index 48fe4ebaad..2d62e71245 100644
--- a/core/core-frontend/src/views/chart/components/editor/util/chart.ts
+++ b/core/core-frontend/src/views/chart/components/editor/util/chart.ts
@@ -1183,6 +1183,13 @@ export const CHART_TYPE_CONFIGS = [
         value: 'table-pivot',
         title: t('chart.chart_table_pivot'),
         icon: 'table-pivot'
+      },
+      {
+        render: 'antv',
+        category: 'table',
+        value: 't-heatmap',
+        title: t('chart.chart_table_heatmap'),
+        icon: 't-heatmap'
       }
     ]
   },
diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/table/t-heatmap.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/table/t-heatmap.ts
new file mode 100644
index 0000000000..32942ca190
--- /dev/null
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/table/t-heatmap.ts
@@ -0,0 +1,316 @@
+import {
+  G2PlotChartView,
+  G2PlotDrawOptions
+} from '@/views/chart/components/js/panel/types/impl/g2plot'
+import type { Heatmap, HeatmapOptions } from '@antv/g2plot/esm/plots/heatmap'
+import { flow, hexColorToRGBA, parseJson } from '@/views/chart/components/js/util'
+import { useI18n } from '@/hooks/web/useI18n'
+import { deepCopy } from '@/utils/utils'
+import { cloneDeep } from 'lodash-es'
+import {
+  getLegend,
+  getPadding,
+  getXAxis,
+  getYAxis
+} from '@/views/chart/components/js/panel/common/common_antv'
+import { valueFormatter } from '@/views/chart/components/js/formatter'
+import { Datum } from '@antv/g2plot/esm/types/common'
+
+const { t } = useI18n()
+const DEFAULT_DATA = []
+/**
+ * 热力图
+ */
+export class TableHeatmap extends G2PlotChartView<HeatmapOptions, Heatmap> {
+  properties: EditorProperty[] = [
+    'basic-style-selector',
+    'background-overall-component',
+    'label-selector',
+    'legend-selector',
+    'x-axis-selector',
+    'y-axis-selector',
+    'title-selector',
+    'tooltip-selector',
+    'jump-set',
+    'linkage'
+  ]
+  propertyInner: EditorPropertyInner = {
+    'background-overall-component': ['all'],
+    'basic-style-selector': ['colors'],
+    'label-selector': ['fontSize', 'color'],
+    'x-axis-selector': ['name', 'color', 'fontSize', 'position', 'axisLabel', 'axisLine'],
+    'y-axis-selector': ['name', 'color', 'fontSize', 'position', 'axisLabel', 'axisLine'],
+    'title-selector': [
+      'title',
+      'fontSize',
+      'color',
+      'hPosition',
+      'isItalic',
+      'isBolder',
+      'remarkShow',
+      'fontFamily',
+      'letterSpace',
+      'fontShadow'
+    ],
+    'legend-selector': ['orient', 'color', 'fontSize', 'hPosition', 'vPosition'],
+    'tooltip-selector': ['color', 'fontSize', 'backgroundColor']
+  }
+  axis: AxisType[] = ['xAxis', 'xAxisExt', 'extColor', 'filter']
+  axisConfig: AxisConfig = {
+    xAxis: {
+      name: `横轴 / ${t('chart.dimension')}`,
+      type: 'd',
+      limit: 1
+    },
+    xAxisExt: {
+      name: `纵轴 / ${t('chart.dimension')}`,
+      type: 'd',
+      limit: 1
+    },
+    extColor: {
+      name: `${t('chart.color')} / ${t('chart.dimension_or_quota')}`,
+      limit: 1
+    }
+  }
+
+  async drawChart(drawOptions: G2PlotDrawOptions<Heatmap>): Promise<Heatmap> {
+    const { chart, container, action } = drawOptions
+    const xAxis = deepCopy(chart.xAxis)
+    const xAxisExt = deepCopy(chart.xAxisExt)
+    const extColor = deepCopy(chart.extColor)
+    if (!xAxis?.length || !xAxisExt?.length || !extColor?.length) {
+      return
+    }
+    const xField = xAxis[0].dataeaseName
+    const xFieldExt = xAxisExt[0].dataeaseName
+    const extColorField = extColor[0].dataeaseName
+    const containerDom = document.getElementById(container)
+    const containerHeight = containerDom?.clientHeight || 100
+    // data
+    const data = cloneDeep(chart.data.tableRow)
+    data.forEach(i => {
+      Object.keys(i).forEach(key => {
+        if (key === '*') {
+          i['@'] = i[key]
+        }
+      })
+    })
+    // options
+    const initOptions: HeatmapOptions = {
+      data: data,
+      xField: xField,
+      yField: xFieldExt,
+      colorField: extColorField === '*' ? '@' : extColorField,
+      appendPadding: getPadding(chart),
+      meta: {
+        [xField]: {
+          type: 'cat'
+        },
+        [xFieldExt]: {
+          type: 'cat'
+        }
+      },
+      legend: {
+        layout: 'vertical',
+        position: 'right',
+        slidable: true,
+        maxHeight: containerHeight - containerHeight * 0.2,
+        label: {
+          align: 'left',
+          spacing: 10
+        }
+      }
+    }
+    const options = this.setupOptions(chart, initOptions)
+    const { Heatmap } = await import('@antv/g2plot/esm/plots/heatmap')
+    const newChart = new Heatmap(container, options)
+    newChart.on('plot:click', param => {
+      if (!param.data?.data) {
+        return
+      }
+      const pointData = param.data.data
+      const dimensionList = []
+      const quotaList = []
+      chart.data.fields.forEach((item, index) => {
+        Object.keys(pointData).forEach(key => {
+          if (key.startsWith('f_') && item.dataeaseName === key) {
+            dimensionList.push({
+              id: item.id,
+              dataeaseName: item.dataeaseName,
+              value: pointData[key]
+            })
+          }
+          if (!key.startsWith('f_')) {
+            quotaList.push({
+              id: item.id,
+              dataeaseName: item.dataeaseName,
+              value: pointData[key]
+            })
+          }
+        })
+      })
+      action({
+        x: param.data.x,
+        y: param.data.y,
+        data: {
+          data: {
+            ...param.data.data,
+            value: quotaList[0].value,
+            name: dimensionList[0].id,
+            dimensionList: dimensionList,
+            quotaList: quotaList
+          }
+        }
+      })
+    })
+    newChart.on('afterrender', ev => {
+      const l = JSON.parse(JSON.stringify(parseJson(chart.customStyle).legend))
+      if (l.show) {
+        const extColor = deepCopy(chart.extColor)
+        const containerDom = document.getElementById(container)
+        const containerHeight = containerDom?.clientHeight || 100
+        const containerWidth = containerDom?.clientWidth || 100
+        let defaultLength = getLegend(chart)
+        if (l.orient === 'vertical') {
+          defaultLength = containerHeight - containerHeight * 0.5
+        } else {
+          defaultLength = containerWidth - containerWidth * 0.5
+        }
+        ev.view.getController('legend').option[extColor[0].dataeaseName]['rail'].defaultLength =
+          defaultLength
+      }
+    })
+    return newChart
+  }
+
+  protected configBasicStyle(chart: Chart, options: HeatmapOptions): HeatmapOptions {
+    const basicStyle = parseJson(chart.customAttr).basicStyle
+    const color = basicStyle.colors?.map((ele, index) => {
+      return hexColorToRGBA(ele, basicStyle.alpha)
+    })
+    return {
+      ...options,
+      color
+    }
+  }
+  protected configTooltip(chart: Chart, options: HeatmapOptions): HeatmapOptions {
+    let tooltip
+    let customAttr: DeepPartial<ChartAttr>
+    if (chart.customAttr) {
+      customAttr = parseJson(chart.customAttr)
+      // tooltip
+      if (customAttr.tooltip) {
+        const extColor = deepCopy(chart.extColor)
+        const t = JSON.parse(JSON.stringify(customAttr.tooltip))
+        if (t.show) {
+          tooltip = {
+            showTitle: true,
+            customItems(originalItems) {
+              const name = extColor[0]?.chartShowName
+                ? extColor[0]?.chartShowName
+                : extColor[0]?.name
+              let value = originalItems[0].value
+              if (!isNaN(Number(value))) {
+                value = valueFormatter(originalItems[0].value, extColor[0]?.formatterCfg)
+              }
+              const newItems = {
+                ...originalItems[0],
+                name: name,
+                value: value
+              }
+              return [newItems]
+            }
+          }
+        } else {
+          tooltip = false
+        }
+      }
+    }
+    return {
+      ...options,
+      tooltip
+    }
+  }
+
+  protected configXAxis(chart: Chart, options: HeatmapOptions): HeatmapOptions {
+    const xAxis = getXAxis(chart, options)
+    return { ...options, xAxis: { ...xAxis, grid: null } }
+  }
+
+  protected configYAxis(chart: Chart, options: HeatmapOptions): HeatmapOptions {
+    const yAxis = getYAxis(chart)
+    return { ...options, yAxis: { ...yAxis, grid: null } }
+  }
+
+  protected configLegend(chart: Chart, options: HeatmapOptions): HeatmapOptions {
+    const tmpOptions = super.configLegend(chart, options)
+    if (tmpOptions.legend) {
+      const l = JSON.parse(JSON.stringify(parseJson(chart.customStyle).legend))
+      tmpOptions.legend.slidable = true
+      tmpOptions.legend.minHeight = 10
+      tmpOptions.legend.minWidth = 10
+      tmpOptions.legend.maxHeight = 600
+      tmpOptions.legend.maxWidth = 600
+      if (l.orient === 'vertical') {
+        tmpOptions.legend.offsetY = -5
+      }
+      tmpOptions.legend.rail = {
+        defaultLength: 100
+      }
+      tmpOptions.legend.label = {
+        spacing: 10,
+        style: {
+          fill: l.color,
+          fontSize: l.fontSize
+        }
+      }
+    }
+    return tmpOptions
+  }
+
+  setupDefaultOptions(chart: ChartObj): ChartObj {
+    chart.customStyle.legend.orient = 'vertical'
+    chart.customStyle.legend.vPosition = 'center'
+    chart.customStyle.legend.hPosition = 'right'
+    return chart
+  }
+
+  protected configLabel(chart: Chart, options: HeatmapOptions): HeatmapOptions {
+    const tmpOptions = super.configLabel(chart, options)
+    if (tmpOptions.label) {
+      const extColor = deepCopy(chart.extColor)
+      const label = {
+        ...tmpOptions.label,
+        position: 'middle',
+        layout: [{ type: 'hide-overlap' }, { type: 'limit-in-canvas' }],
+        formatter: data => {
+          const value = data[extColor[0]?.dataeaseName]
+          if (!isNaN(Number(value))) {
+            return valueFormatter(value, extColor[0]?.formatterCfg)
+          }
+          return value
+        }
+      }
+      return {
+        ...tmpOptions,
+        label
+      }
+    }
+    return tmpOptions
+  }
+
+  protected setupOptions(chart: Chart, options: HeatmapOptions): HeatmapOptions {
+    return flow(
+      this.configXAxis,
+      this.configYAxis,
+      this.configBasicStyle,
+      this.configLegend,
+      this.configTooltip,
+      this.configLabel
+    )(chart, options)
+  }
+
+  constructor() {
+    super('t-heatmap', DEFAULT_DATA)
+  }
+}
diff --git a/sdk/extensions/extensions-view/src/main/java/io/dataease/extensions/view/dto/ChartAxis.java b/sdk/extensions/extensions-view/src/main/java/io/dataease/extensions/view/dto/ChartAxis.java
index 1ad9a6d3b3..fe76307324 100644
--- a/sdk/extensions/extensions-view/src/main/java/io/dataease/extensions/view/dto/ChartAxis.java
+++ b/sdk/extensions/extensions-view/src/main/java/io/dataease/extensions/view/dto/ChartAxis.java
@@ -9,5 +9,6 @@ public enum ChartAxis {
     yAxis,
     yAxisExt,
     drill,
+    extColor,
     extBubble;
 }
diff --git a/sdk/extensions/extensions-view/src/main/java/io/dataease/extensions/view/dto/ChartViewBaseDTO.java b/sdk/extensions/extensions-view/src/main/java/io/dataease/extensions/view/dto/ChartViewBaseDTO.java
index f72c935b13..62112aeccc 100644
--- a/sdk/extensions/extensions-view/src/main/java/io/dataease/extensions/view/dto/ChartViewBaseDTO.java
+++ b/sdk/extensions/extensions-view/src/main/java/io/dataease/extensions/view/dto/ChartViewBaseDTO.java
@@ -224,4 +224,6 @@ public class ChartViewBaseDTO implements Serializable {
      */
     private List<CalParam> calParams;
 
+    private List<ChartViewFieldDTO> extColor;
+
 }