xiug

src/lang/en.js

@@ -1369,6 +1369,7 @@ export default {
     table_column_adapt: 'Adapt',
     table_column_custom: 'Custom',
     chart_table_pivot: 'Pivot Table',
+    chart_heat_map: 'Heat Map',
     table_pivot_row: 'Data Row',
     field_error_tips: 'This field is changed(Include dimension、quota，field type，deleted),please edit again.',
     mark_field_error: 'The current field does not exist, please select again',

src/lang/tw.js

@@ -1368,6 +1368,7 @@ export default {
     table_column_adapt: '自適應',
     table_column_custom: '自定義',
     chart_table_pivot: '透視表',
+    chart_heat_map: '热力图',
     table_pivot_row: '數據行',
     field_error_tips: '該字段所對應的數據集原始字段發生變更（包括維度、指標，字段類型，字段被刪除等），建議重新編輯',
     mark_field_error: '數據集變更，當前字段不存在，請重新選擇',

src/lang/zh.js

@@ -1367,6 +1367,7 @@ export default {
     table_column_adapt: '自适应',
     table_column_custom: '自定义',
     chart_table_pivot: '透视表',
+    chart_heat_map: '热力图',
     table_pivot_row: '数据行',
     field_error_tips: '该字段所对应的数据集原始字段发生变更（包括维度、指标，字段类型，字段被删除等），建议重新编辑',
     mark_field_error: '数据集变更，当前字段不存在，请重新选择',

src/views/chart/chart/heatMap/heat_map.js

+import {
+  getPadding,
+  getTheme,
+  getTooltip
+} from '@/views/chart/chart/common/common_antv'
+import { Scene, HeatmapLayer } from '@antv/l7'
+import { GaodeMap } from '@antv/l7-maps'
+import { getLanguage } from '@/lang'
+
+export function baseHeatMapOptionAntV(chartDom, chartId, chart, action) {
+  console.log('baseHeatMapOptionAntV', chartDom)
+  const xAxis = JSON.parse(chart.xaxis)
+  const xAxisExt = JSON.parse(chart.xaxisExt)
+  let customAttr
+  if (chart.customAttr) {
+    customAttr = JSON.parse(chart.customAttr)
+  }
+  const size = customAttr.size
+  const color = customAttr.color
+  const mapStyle = `amap://styles/${color.mapStyle ? color.mapStyle : 'normal'}`
+  const lang = getLanguage().includes('zh') ? 'zh' : 'en'
+  let init = false
+  if (!chartDom?.map) {
+    try {
+      chartDom.destroy()
+    } catch (e) {
+    //   ignore
+    }
+    chartDom = new Scene({
+      id: chartId,
+      map: new GaodeMap({
+        lang: lang,
+        pitch: size.mapPitch,
+        style: mapStyle
+      }),
+      logoVisible: false
+    })
+    init = true
+  } else {
+    if (chartDom.map) {
+      chartDom.setPitch(size.mapPitch)
+      chartDom.setMapStyle(mapStyle)
+    }
+  }
+  if (xAxis?.length < 2 || xAxisExt?.length < 2) {
+    chartDom.removeAllLayer()
+    return chartDom
+  }
+  chartDom.removeAllLayer()
+    .then(() => {
+      const layer = new HeatmapLayer({})
+        .source(chart.data.tableRow, {
+          parser: {
+            type: 'json',
+            x: xAxis[0].dataeaseName,
+            y: xAxis[1].dataeaseName,
+            x1: xAxisExt[0].dataeaseName,
+            y1: xAxisExt[1].dataeaseName
+          }
+        })
+        .size(size.mapLineWidth)
+        .shape('heatmap')
+        .animate({
+          enable: size.mapLineAnimate,
+          duration: size.mapLineAnimateDuration,
+          interval: 1,
+          trailLength: 1
+        }).style({
+          intensity: 2,
+          radius: 20,
+          rampColors: {
+            colors: [
+              '#206C7C',
+              '#2EA9A1',
+              '#91EABC',
+              '#FFF598',
+              '#F7B74A',
+              '#FF4818'
+            ].reverse(),
+            positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0]
+          }
+        })
+      if (color.mapLineGradient) {
+        layer.style({
+          sourceColor: color.mapLineSourceColor,
+          targetColor: color.mapLineTargetColor,
+          opacity: color.alpha / 100
+        })
+      } else {
+        layer.style({
+          opacity: color.alpha / 100
+        })
+          .color(color.mapLineSourceColor)
+      }
+      if (!init) {
+        chartDom.addLayer(layer)
+      }
+      chartDom.on('loaded', () => {
+        chartDom.addLayer(layer)
+      })
+    })
+  return chartDom
+}
+

src/views/chart/chart/util.js

@@ -3144,6 +3144,39 @@ export const TYPE_CONFIGS = [
       ]
     }
   },
+  {
+    render: 'antv',
+    category: 'chart.chart_type_distribute',
+    value: 'heat-map',
+    title: 'chart.chart_heat_map',
+    icon: 'heat-map',
+    properties: [
+      'color-selector',
+      'size-selector-ant-v',
+      'title-selector-ant-v'
+    ],
+    propertyInner: {
+      'color-selector': [
+        'mapStyle'
+      ],
+      'size-selector-ant-v': [
+        'mapPitch'
+      ],
+      'title-selector-ant-v': [
+        'show',
+        'title',
+        'fontSize',
+        'color',
+        'hPosition',
+        'isItalic',
+        'isBolder',
+        'remarkShow',
+        'fontFamily',
+        'letterSpace',
+        'fontShadow'
+      ]
+    }
+  },
 
   {
     render: 'echarts',

src/views/chart/components/ChartComponentG2.vue

@@ -54,6 +54,7 @@ import { baseTreemapOptionAntV } from '@/views/chart/chart/treemap/treemap_antv'
 import { baseRadarOptionAntV } from '@/views/chart/chart/radar/radar_antv'
 import { baseWaterfallOptionAntV } from '@/views/chart/chart/waterfall/waterfall'
 import { baseWordCloudOptionAntV } from '@/views/chart/chart/wordCloud/word_cloud'
+import { baseHeatMapOptionAntV } from '@/views/chart/chart/heatMap/heat_map'
 import TitleRemark from '@/views/chart/view/TitleRemark'
 import { DEFAULT_TITLE_STYLE } from '@/views/chart/chart/chart'
 import { baseMixOptionAntV } from '@/views/chart/chart/mix/mix_antv'
@@ -301,6 +302,8 @@ export default {
         this.myChart = baseFlowMapOption(this.myChart, this.chartId, chart, this.antVAction)
       } else if (chart.type === 'bidirectional-bar') {
         this.myChart = baseBidirectionalBarOptionAntV(this.myChart, this.chartId, chart, this.antVAction)
+      } else if (chart.type === 'heat-map') {
+        this.myChart = baseHeatMapOptionAntV(this.myChart, this.chartId, chart, this.antVAction)
       } else {
         if (this.myChart) {
           this.antVRenderStatus = false
@@ -437,7 +440,7 @@ export default {
           this.title_class.background = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)
           this.borderRadius = (customStyle.background.borderRadius || 0) + 'px'
         }
-        if (this.chart.type === 'flow-map') {
+        if (this.chart.type === 'flow-map' || this.chart.type === 'heat-map') {
           this.title_class.zIndex = 4
           this.title_class.position = 'absolute'
         }