feat: 矩形树图

frontend/src/lang/en.js

@@ -837,7 +837,10 @@ export default {
     drill: 'Drill',
     drag_block_treemap_label: 'Color Label',
     drag_block_treemap_size: 'Color Size',
-    bubble_symbol: 'Shape'
+    bubble_symbol: 'Shape',
+    gap_width: 'Gap Width',
+    width: 'Width',
+    height: 'Height'
   },
   dataset: {
     sheet_warn: 'There are multiple sheet pages, and the first one is extracted by default',

frontend/src/lang/tw.js

@@ -837,7 +837,10 @@ export default {
     drill: '鉆取',
     drag_block_treemap_label: '色塊標簽',
     drag_block_treemap_size: '色塊大小',
-    bubble_symbol: '圖形'
+    bubble_symbol: '圖形',
+    gap_width: '間隔',
+    width: '寬度',
+    height: '高度'
   },
   dataset: {
     sheet_warn: '有多個sheet頁面，默認抽取第一個',

frontend/src/lang/zh.js

@@ -837,7 +837,10 @@ export default {
     drill: '钻取',
     drag_block_treemap_label: '色块标签',
     drag_block_treemap_size: '色块大小',
-    bubble_symbol: '图形'
+    bubble_symbol: '图形',
+    gap_width: '间隔',
+    width: '宽度',
+    height: '高度'
   },
   dataset: {
     sheet_warn: '有多个 Sheet 页，默认抽取第一个',

frontend/src/views/chart/chart/chart.js

@@ -39,7 +39,9 @@ export const DEFAULT_SIZE = {
   dimensionShow: true,
   quotaShow: true,
   scatterSymbol: 'circle',
-  scatterSymbolSize: 20
+  scatterSymbolSize: 20,
+  treemapWidth: 80,
+  treemapHeight: 80
 }
 export const DEFAULT_LABEL = {
   show: false,

frontend/src/views/chart/chart/treemap/treemap.js

@@ -24,12 +24,13 @@ export function baseTreemapOption(chart_option, chart) {
       // chart_option.series[0].name = chart.data.series[0].name
       // size
       if (customAttr.size) {
-        // chart_option.series[0].radius = [customAttr.size.pieInnerRadius + '%', customAttr.size.pieOuterRadius + '%']
+        chart_option.series[0].width = (customAttr.size.treemapWidth ? customAttr.size.treemapWidth : 80) + '%'
+        chart_option.series[0].height = (customAttr.size.treemapHeight ? customAttr.size.treemapHeight : 80) + '%'
       }
       // label
-      if (customAttr.label) {
+      // if (customAttr.label) {
-        // chart_option.series[0].label = customAttr.label
+      // chart_option.series[0].label = customAttr.label
-      }
+      // }
       const valueArr = chart.data.series[0].data
       for (let i = 0; i < valueArr.length; i++) {
         // const y = {

frontend/src/views/chart/components/shape-attr/SizeSelector.vue

@@ -151,6 +151,15 @@
           <el-slider v-model="sizeForm.scatterSymbolSize" show-input :show-input-controls="false" input-size="mini" :min="1" :max="20" @change="changeBarSizeCase" />
         </el-form-item>
       </el-form>
+
+      <el-form v-show="chart.type && chart.type === 'treemap'" ref="sizeFormLine" :disabled="param && !hasDataPermission('manage',param.privileges)" :model="sizeForm" label-width="80px" size="mini">
+        <el-form-item :label="$t('chart.width')" class="form-item form-item-slider">
+          <el-slider v-model="sizeForm.treemapWidth" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase" />
+        </el-form-item>
+        <el-form-item :label="$t('chart.height')" class="form-item form-item-slider">
+          <el-slider v-model="sizeForm.treemapHeight" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase" />
+        </el-form-item>
+      </el-form>
     </el-col>
     <!--      <el-popover-->
     <!--        placement="right"-->
@@ -353,6 +362,8 @@ export default {
         }
         if (customAttr.size) {
           this.sizeForm = customAttr.size
+          this.sizeForm.treemapWidth = this.sizeForm.treemapWidth ? this.sizeForm.treemapWidth : 80
+          this.sizeForm.treemapHeight = this.sizeForm.treemapHeight ? this.sizeForm.treemapHeight : 80
         }
       }
     },

frontend/src/views/chart/view/ChartEdit.vue

@@ -427,7 +427,7 @@
                   <el-collapse-item name="color" :title="$t('chart.color')">
                     <color-selector :param="param" class="attr-selector" :chart="chart" @onColorChange="onColorChange" />
                   </el-collapse-item>
-                  <el-collapse-item v-show="chart.type !== 'map' && chart.type !== 'treemap'" name="size" :title="$t('chart.size')">
+                  <el-collapse-item v-show="chart.type !== 'map'" name="size" :title="$t('chart.size')">
                     <size-selector :param="param" class="attr-selector" :chart="chart" @onSizeChange="onSizeChange" />
                   </el-collapse-item>
                   <el-collapse-item v-show="!view.type.includes('table') && !view.type.includes('text') && view.type !== 'treemap'" name="label" :title="$t('chart.label')">