From 20fc994cacf166cd2f65f3ceeeceb0e23ee0eb61 Mon Sep 17 00:00:00 2001
From: junjie <junjie.xia@fit2cloud.com>
Date: Tue, 10 Aug 2021 11:00:38 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=9F=A9=E5=BD=A2=E6=A0=91=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/lang/en.js                               |  5 ++++-
 frontend/src/lang/tw.js                               |  5 ++++-
 frontend/src/lang/zh.js                               |  5 ++++-
 frontend/src/views/chart/chart/chart.js               |  4 +++-
 frontend/src/views/chart/chart/treemap/treemap.js     |  9 +++++----
 .../chart/components/shape-attr/SizeSelector.vue      | 11 +++++++++++
 frontend/src/views/chart/view/ChartEdit.vue           |  2 +-
 7 files changed, 32 insertions(+), 9 deletions(-)

diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js
index 8cf635faf5..2e66018e6b 100644
--- a/frontend/src/lang/en.js
+++ b/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',
diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js
index b0a38fd1b0..12c3625fee 100644
--- a/frontend/src/lang/tw.js
+++ b/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頁面，默認抽取第一個',
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index ba630a4bd8..503a0c9c6c 100644
--- a/frontend/src/lang/zh.js
+++ b/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 页，默认抽取第一个',
diff --git a/frontend/src/views/chart/chart/chart.js b/frontend/src/views/chart/chart/chart.js
index 90e7c5134f..cdce29e33d 100644
--- a/frontend/src/views/chart/chart/chart.js
+++ b/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,
diff --git a/frontend/src/views/chart/chart/treemap/treemap.js b/frontend/src/views/chart/chart/treemap/treemap.js
index 5ecca3ca82..de7c07eb49 100644
--- a/frontend/src/views/chart/chart/treemap/treemap.js
+++ b/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) {
-        // chart_option.series[0].label = customAttr.label
-      }
+      // if (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 = {
diff --git a/frontend/src/views/chart/components/shape-attr/SizeSelector.vue b/frontend/src/views/chart/components/shape-attr/SizeSelector.vue
index 906a1eb79f..0295369719 100644
--- a/frontend/src/views/chart/components/shape-attr/SizeSelector.vue
+++ b/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
         }
       }
     },
diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue
index 6d48edba2e..d4d89818d5 100644
--- a/frontend/src/views/chart/view/ChartEdit.vue
+++ b/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')">