合并分支 'feature/branch_yx' 到 'develop'

Feature/branch yx

查看合并请求 !16

src/lang/en.js

@@ -1371,6 +1371,7 @@ export default {
     table_column_custom: 'Custom',
     chart_table_pivot: 'Pivot Table',
     chart_heat_map: 'Heat Map',
+    chart_3d_column_chart_map: '3D Column Chart 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

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

src/lang/zh.js

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

src/views/chart/chart/threeDColumnChartMap/threeDColumn_antv.js

+import { Scene, PointLayer } from '@antv/l7'
+import { GaodeMap } from '@antv/l7-maps'
+import { getLanguage } from '@/lang'
+
+export function base3DColumnOptionAntV(chartDom, chartId, chart, action) {
+  console.log('base3DColumnOptionAntV', chart)
+  const xAxis = JSON.parse(chart.xaxis)
+  const yAxis = JSON.parse(chart.yaxis)
+  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,
+        center: [104.288144, 31.239692],
+        style: mapStyle,
+        zoom: 4
+      }),
+      logoVisible: false
+    })
+    init = true
+  } else {
+    if (chartDom.map) {
+      chartDom.setPitch(size.mapPitch)
+      chartDom.setMapStyle(mapStyle)
+    }
+  }
+  // if (xAxis?.length < 1 || yAxis?.length < 1) {
+  //   chartDom.removeAllLayer()
+  //   return chartDom
+  // }
+  chartDom.removeAllLayer()
+    .then(() => {
+      const layer = new PointLayer({})
+        .source(chart.data.tableRow, {
+          parser: {
+            type: 'json',
+            x: xAxis[0].dataeaseName, // 经度
+            y: xAxis[1].dataeaseName // 纬度
+          }
+        })
+        .shape('cylinder')
+        .size(yAxis[0].dataeaseName, function(level) {
+          return [2, 2, level]
+        })
+        .animate(true)
+        .active(true)
+        .color(yAxis[0].dataeaseName, [
+          '#094D4A',
+          '#146968',
+          '#1D7F7E',
+          '#289899',
+          '#34B6B7',
+          '#4AC5AF',
+          '#5FD3A6',
+          '#7BE39E',
+          '#A1EDB8',
+          '#CEF8D6'
+        ])
+      if (!init) {
+        chartDom.addLayer(layer)
+      }
+      chartDom.on('loaded', () => {
+        chartDom.addLayer(layer)
+      })
+    })
+  return chartDom
+}
+

src/views/chart/chart/util.js

@@ -1992,6 +1992,40 @@ export const TYPE_CONFIGS = [
       ]
     }
   },
+  {
+    render: 'antv',
+    category: 'chart.chart_type_space',
+    value: 'threeDColumn',
+    title: 'chart.chart_3d_column_chart_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: 'antv',

src/views/chart/components/ChartComponentG2.vue

@@ -55,6 +55,7 @@ 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 { base3DColumnOptionAntV } from '@/views/chart/chart/threeDColumnChartMap/threeDColumn_antv'
 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'
@@ -310,6 +311,8 @@ export default {
         this.myChart = baseBubbleMapOption(this.myChart, this.chartId, chart, this.antVAction)
       } else if (chart.type === 'city-brightness') {
         this.myChart = baseCityBrightnessMapOptionAntV(this.myChart, this.chartId, chart, this.antVAction)
+      } else if (chart.type === 'threeDColumn') {
+        this.myChart = base3DColumnOptionAntV(this.myChart, this.chartId, chart, this.antVAction)
       } else {
         if (this.myChart) {
           this.antVRenderStatus = false