From f2ac1b6a6c95723d8a361bb7447b2e8a1d793461 Mon Sep 17 00:00:00 2001
From: junjie <junjie.xia@fit2cloud.com>
Date: Thu, 22 Jul 2021 18:20:44 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E8=A7=86=E5=9B=BE=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E7=95=8C=E9=9D=A2=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../BackgroundColorSelector.vue               |  54 ++-
 .../component-style/LegendSelector.vue        | 181 +++++---
 .../component-style/SplitSelector.vue         | 151 ++++---
 .../component-style/TitleSelector.vue         | 175 +++++---
 .../component-style/XAxisSelector.vue         | 226 ++++++----
 .../component-style/YAxisSelector.vue         | 226 ++++++----
 .../components/shape-attr/ColorSelector.vue   | 146 ++++---
 .../components/shape-attr/LabelSelector.vue   | 219 ++++++----
 .../components/shape-attr/SizeSelector.vue    | 410 ++++++++++++------
 .../components/shape-attr/TooltipSelector.vue | 185 +++++---
 frontend/src/views/chart/view/ChartEdit.vue   | 107 +++--
 11 files changed, 1363 insertions(+), 717 deletions(-)

diff --git a/frontend/src/views/chart/components/component-style/BackgroundColorSelector.vue b/frontend/src/views/chart/components/component-style/BackgroundColorSelector.vue
index 92bb45d204..7e76673d54 100644
--- a/frontend/src/views/chart/components/component-style/BackgroundColorSelector.vue
+++ b/frontend/src/views/chart/components/component-style/BackgroundColorSelector.vue
@@ -1,25 +1,35 @@
 <template>
-  <div>
-    <div style="width: 100%">
-      <el-popover
-        placement="right"
-        width="400"
-        trigger="click"
-      >
-        <el-col>
-          <el-form ref="colorForm" :model="colorForm" label-width="80px" size="mini">
-            <el-form-item :label="$t('chart.color')" class="form-item">
-              <colorPicker v-model="colorForm.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeBackgroundStyle" />
-            </el-form-item>
-            <el-form-item :label="$t('chart.not_alpha')" class="form-item form-item-slider">
-              <el-slider v-model="colorForm.alpha" show-input :show-input-controls="false" input-size="mini" @change="changeBackgroundStyle" />
-            </el-form-item>
-          </el-form>
-        </el-col>
+  <div style="width: 100%">
+    <el-col>
+      <el-form ref="colorForm" :model="colorForm" label-width="80px" size="mini" :disabled="param && !hasDataPermission('manage',param.privileges)">
+        <el-form-item :label="$t('chart.color')" class="form-item">
+          <el-color-picker v-model="colorForm.color" class="color-picker-style" @change="changeBackgroundStyle" />
+        </el-form-item>
+        <el-form-item :label="$t('chart.not_alpha')" class="form-item form-item-slider">
+          <el-slider v-model="colorForm.alpha" show-input :show-input-controls="false" input-size="mini" @change="changeBackgroundStyle" />
+        </el-form-item>
+      </el-form>
+    </el-col>
+    <!--    <div style="width: 100%">-->
+    <!--      <el-popover-->
+    <!--        placement="right"-->
+    <!--        width="400"-->
+    <!--        trigger="click"-->
+    <!--      >-->
+    <!--        <el-col>-->
+    <!--          <el-form ref="colorForm" :model="colorForm" label-width="80px" size="mini">-->
+    <!--            <el-form-item :label="$t('chart.color')" class="form-item">-->
+    <!--              <colorPicker v-model="colorForm.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeBackgroundStyle" />-->
+    <!--            </el-form-item>-->
+    <!--            <el-form-item :label="$t('chart.not_alpha')" class="form-item form-item-slider">-->
+    <!--              <el-slider v-model="colorForm.alpha" show-input :show-input-controls="false" input-size="mini" @change="changeBackgroundStyle" />-->
+    <!--            </el-form-item>-->
+    <!--          </el-form>-->
+    <!--        </el-col>-->
 
-        <el-button slot="reference" :disabled="param && !hasDataPermission('manage',param.privileges)" size="mini" class="shape-item">{{ $t('chart.background') }}<i class="el-icon-setting el-icon--right" /></el-button>
-      </el-popover>
-    </div>
+    <!--        <el-button slot="reference" :disabled="param && !hasDataPermission('manage',param.privileges)" size="mini" class="shape-item">{{ $t('chart.background') }}<i class="el-icon-setting el-icon&#45;&#45;right" /></el-button>-->
+    <!--      </el-popover>-->
+    <!--    </div>-->
   </div>
 </template>
 
@@ -100,4 +110,8 @@ export default {
   .el-form-item{
     margin-bottom: 6px;
   }
+.color-picker-style{
+  cursor: pointer;
+  z-index: 1003;
+}
 </style>
diff --git a/frontend/src/views/chart/components/component-style/LegendSelector.vue b/frontend/src/views/chart/components/component-style/LegendSelector.vue
index d515035912..0146a20c2f 100644
--- a/frontend/src/views/chart/components/component-style/LegendSelector.vue
+++ b/frontend/src/views/chart/components/component-style/LegendSelector.vue
@@ -1,70 +1,117 @@
 <template>
-  <div>
-    <div style="width: 100%">
-      <el-popover
-        v-model="isSetting"
-        placement="right"
-        width="400"
-        trigger="click"
-      >
-        <el-col>
-          <el-form ref="legendForm" :model="legendForm" label-width="80px" size="mini">
-            <!--            <el-form-item :label="$t('chart.show')" class="form-item">-->
-            <!--              <el-checkbox v-model="legendForm.show" @change="changeLegendStyle">{{ $t('chart.show') }}</el-checkbox>-->
-            <!--            </el-form-item>-->
-            <el-form-item :label="$t('chart.icon')" class="form-item">
-              <el-select v-model="legendForm.icon" :placeholder="$t('chart.icon')" @change="changeLegendStyle">
-                <el-option
-                  v-for="item in iconSymbolOptions"
-                  :key="item.value"
-                  :label="item.name"
-                  :value="item.value"
-                />
-              </el-select>
-            </el-form-item>
-            <el-form-item :label="$t('chart.orient')" class="form-item">
-              <el-radio-group v-model="legendForm.orient" size="mini" @change="changeLegendStyle">
-                <el-radio-button label="horizontal">{{ $t('chart.horizontal') }}</el-radio-button>
-                <el-radio-button label="vertical">{{ $t('chart.vertical') }}</el-radio-button>
-              </el-radio-group>
-            </el-form-item>
-            <el-form-item :label="$t('chart.text_fontsize')" class="form-item">
-              <el-select v-model="legendForm.textStyle.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeLegendStyle">
-                <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
-              </el-select>
-            </el-form-item>
-            <el-form-item :label="$t('chart.text_color')" class="form-item">
-              <colorPicker v-model="legendForm.textStyle.color" style="margin-top: 6px;cursor: pointer;z-index: 999;border: solid 1px black" @change="changeLegendStyle" />
-            </el-form-item>
-            <el-form-item :label="$t('chart.text_h_position')" class="form-item">
-              <el-radio-group v-model="legendForm.hPosition" size="mini" @change="changeLegendStyle">
-                <el-radio-button label="left">{{ $t('chart.text_pos_left') }}</el-radio-button>
-                <el-radio-button label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>
-                <el-radio-button label="right">{{ $t('chart.text_pos_right') }}</el-radio-button>
-              </el-radio-group>
-            </el-form-item>
-            <el-form-item :label="$t('chart.text_v_position')" class="form-item">
-              <el-radio-group v-model="legendForm.vPosition" size="mini" @change="changeLegendStyle">
-                <el-radio-button label="top">{{ $t('chart.text_pos_top') }}</el-radio-button>
-                <el-radio-button label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>
-                <el-radio-button label="bottom">{{ $t('chart.text_pos_bottom') }}</el-radio-button>
-              </el-radio-group>
-            </el-form-item>
-          </el-form>
-        </el-col>
+  <div style="width: 100%">
+    <el-col>
+      <el-form ref="legendForm" :model="legendForm" label-width="80px" size="mini" :disabled="!hasDataPermission('manage',param.privileges)">
+        <el-form-item :label="$t('chart.show')" class="form-item">
+          <el-checkbox v-model="legendForm.show" @change="changeLegendStyle">{{ $t('chart.show') }}</el-checkbox>
+        </el-form-item>
+        <div v-show="legendForm.show">
+          <el-form-item :label="$t('chart.icon')" class="form-item">
+            <el-select v-model="legendForm.icon" :placeholder="$t('chart.icon')" @change="changeLegendStyle">
+              <el-option
+                v-for="item in iconSymbolOptions"
+                :key="item.value"
+                :label="item.name"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item :label="$t('chart.orient')" class="form-item">
+            <el-radio-group v-model="legendForm.orient" size="mini" @change="changeLegendStyle">
+              <el-radio-button label="horizontal">{{ $t('chart.horizontal') }}</el-radio-button>
+              <el-radio-button label="vertical">{{ $t('chart.vertical') }}</el-radio-button>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item :label="$t('chart.text_fontsize')" class="form-item">
+            <el-select v-model="legendForm.textStyle.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeLegendStyle">
+              <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
+            </el-select>
+          </el-form-item>
+          <el-form-item :label="$t('chart.text_color')" class="form-item">
+            <el-color-picker v-model="legendForm.textStyle.color" class="color-picker-style" @change="changeLegendStyle" />
+          </el-form-item>
+          <el-form-item :label="$t('chart.text_h_position')" class="form-item">
+            <el-radio-group v-model="legendForm.hPosition" size="mini" @change="changeLegendStyle">
+              <el-radio-button label="left">{{ $t('chart.text_pos_left') }}</el-radio-button>
+              <el-radio-button label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>
+              <el-radio-button label="right">{{ $t('chart.text_pos_right') }}</el-radio-button>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item :label="$t('chart.text_v_position')" class="form-item">
+            <el-radio-group v-model="legendForm.vPosition" size="mini" @change="changeLegendStyle">
+              <el-radio-button label="top">{{ $t('chart.text_pos_top') }}</el-radio-button>
+              <el-radio-button label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>
+              <el-radio-button label="bottom">{{ $t('chart.text_pos_bottom') }}</el-radio-button>
+            </el-radio-group>
+          </el-form-item>
+        </div>
+      </el-form>
+    </el-col>
+    <!--    <div style="width: 100%">-->
+    <!--      <el-popover-->
+    <!--        v-model="isSetting"-->
+    <!--        placement="right"-->
+    <!--        width="400"-->
+    <!--        trigger="click"-->
+    <!--      >-->
+    <!--        <el-col>-->
+    <!--          <el-form ref="legendForm" :model="legendForm" label-width="80px" size="mini">-->
+    <!--            &lt;!&ndash;            <el-form-item :label="$t('chart.show')" class="form-item">&ndash;&gt;-->
+    <!--            &lt;!&ndash;              <el-checkbox v-model="legendForm.show" @change="changeLegendStyle">{{ $t('chart.show') }}</el-checkbox>&ndash;&gt;-->
+    <!--            &lt;!&ndash;            </el-form-item>&ndash;&gt;-->
+    <!--            <el-form-item :label="$t('chart.icon')" class="form-item">-->
+    <!--              <el-select v-model="legendForm.icon" :placeholder="$t('chart.icon')" @change="changeLegendStyle">-->
+    <!--                <el-option-->
+    <!--                  v-for="item in iconSymbolOptions"-->
+    <!--                  :key="item.value"-->
+    <!--                  :label="item.name"-->
+    <!--                  :value="item.value"-->
+    <!--                />-->
+    <!--              </el-select>-->
+    <!--            </el-form-item>-->
+    <!--            <el-form-item :label="$t('chart.orient')" class="form-item">-->
+    <!--              <el-radio-group v-model="legendForm.orient" size="mini" @change="changeLegendStyle">-->
+    <!--                <el-radio-button label="horizontal">{{ $t('chart.horizontal') }}</el-radio-button>-->
+    <!--                <el-radio-button label="vertical">{{ $t('chart.vertical') }}</el-radio-button>-->
+    <!--              </el-radio-group>-->
+    <!--            </el-form-item>-->
+    <!--            <el-form-item :label="$t('chart.text_fontsize')" class="form-item">-->
+    <!--              <el-select v-model="legendForm.textStyle.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeLegendStyle">-->
+    <!--                <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />-->
+    <!--              </el-select>-->
+    <!--            </el-form-item>-->
+    <!--            <el-form-item :label="$t('chart.text_color')" class="form-item">-->
+    <!--              <colorPicker v-model="legendForm.textStyle.color" style="margin-top: 6px;cursor: pointer;z-index: 999;border: solid 1px black" @change="changeLegendStyle" />-->
+    <!--            </el-form-item>-->
+    <!--            <el-form-item :label="$t('chart.text_h_position')" class="form-item">-->
+    <!--              <el-radio-group v-model="legendForm.hPosition" size="mini" @change="changeLegendStyle">-->
+    <!--                <el-radio-button label="left">{{ $t('chart.text_pos_left') }}</el-radio-button>-->
+    <!--                <el-radio-button label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>-->
+    <!--                <el-radio-button label="right">{{ $t('chart.text_pos_right') }}</el-radio-button>-->
+    <!--              </el-radio-group>-->
+    <!--            </el-form-item>-->
+    <!--            <el-form-item :label="$t('chart.text_v_position')" class="form-item">-->
+    <!--              <el-radio-group v-model="legendForm.vPosition" size="mini" @change="changeLegendStyle">-->
+    <!--                <el-radio-button label="top">{{ $t('chart.text_pos_top') }}</el-radio-button>-->
+    <!--                <el-radio-button label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>-->
+    <!--                <el-radio-button label="bottom">{{ $t('chart.text_pos_bottom') }}</el-radio-button>-->
+    <!--              </el-radio-group>-->
+    <!--            </el-form-item>-->
+    <!--          </el-form>-->
+    <!--        </el-col>-->
 
-        <el-button slot="reference" size="mini" class="shape-item" :disabled="!legendForm.show || !hasDataPermission('manage',param.privileges)">
-          {{ $t('chart.legend') }}<i class="el-icon-setting el-icon--right" />
-          <el-switch
-            v-model="legendForm.show"
-            :disabled="!hasDataPermission('manage',param.privileges)"
-            class="switch-style"
-            @click.stop.native
-            @change="changeLegendStyle"
-          />
-        </el-button>
-      </el-popover>
-    </div>
+    <!--        <el-button slot="reference" size="mini" class="shape-item" :disabled="!legendForm.show || !hasDataPermission('manage',param.privileges)">-->
+    <!--          {{ $t('chart.legend') }}<i class="el-icon-setting el-icon&#45;&#45;right" />-->
+    <!--          <el-switch-->
+    <!--            v-model="legendForm.show"-->
+    <!--            :disabled="!hasDataPermission('manage',param.privileges)"-->
+    <!--            class="switch-style"-->
+    <!--            @click.stop.native-->
+    <!--            @change="changeLegendStyle"-->
+    <!--          />-->
+    <!--        </el-button>-->
+    <!--      </el-popover>-->
+    <!--    </div>-->
   </div>
 </template>
 
@@ -171,4 +218,8 @@ export default {
   right: 10px;
   margin-top: -4px;
 }
+.color-picker-style{
+  cursor: pointer;
+  z-index: 1003;
+}
 </style>
diff --git a/frontend/src/views/chart/components/component-style/SplitSelector.vue b/frontend/src/views/chart/components/component-style/SplitSelector.vue
index 51cb426320..3c98871534 100644
--- a/frontend/src/views/chart/components/component-style/SplitSelector.vue
+++ b/frontend/src/views/chart/components/component-style/SplitSelector.vue
@@ -1,58 +1,99 @@
 <template>
-  <div>
-    <div style="width: 100%">
-      <el-popover
-        placement="right"
-        width="400"
-        trigger="click"
-      >
-        <el-col>
-          <el-form ref="splitForm" :model="splitForm" label-width="80px" size="mini">
-            <el-form-item :label="$t('chart.name')" class="form-item">
-              <el-checkbox v-model="splitForm.name.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>
-            </el-form-item>
-            <el-form-item :label="$t('chart.color')" class="form-item">
-              <colorPicker v-model="splitForm.name.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeSplitStyle" />
-            </el-form-item>
-            <el-form-item :label="$t('chart.text_fontsize')" class="form-item form-item-slider">
-              <el-select v-model="splitForm.name.fontSize" :placeholder="$t('chart.text_fontsize')" @change="changeSplitStyle">
-                <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
-              </el-select>
-            </el-form-item>
-            <el-form-item :label="$t('chart.axis_line')" class="form-item">
-              <el-checkbox v-model="splitForm.axisLine.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>
-            </el-form-item>
-            <el-form-item :label="$t('chart.axis_color')" class="form-item">
-              <colorPicker v-model="splitForm.axisLine.lineStyle.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeSplitStyle" />
-            </el-form-item>
-            <el-form-item :label="$t('chart.axis_label')" class="form-item">
-              <el-checkbox v-model="splitForm.axisLabel.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>
-            </el-form-item>
-            <el-form-item :label="$t('chart.axis_label_color')" class="form-item">
-              <colorPicker v-model="splitForm.axisLabel.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeSplitStyle" />
-            </el-form-item>
-            <el-form-item :label="$t('chart.label_fontsize')" class="form-item form-item-slider">
-              <el-select v-model="splitForm.axisLabel.fontSize" :placeholder="$t('chart.label_fontsize')" @change="changeSplitStyle">
-                <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
-              </el-select>
-            </el-form-item>
-            <el-form-item :label="$t('chart.split_line')" class="form-item">
-              <el-checkbox v-model="splitForm.splitLine.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>
-            </el-form-item>
-            <el-form-item :label="$t('chart.split_color')" class="form-item">
-              <colorPicker v-model="splitForm.splitLine.lineStyle.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeSplitStyle" />
-            </el-form-item>
-            <el-form-item :label="$t('chart.shadow')" class="form-item">
-              <el-checkbox v-model="splitForm.splitArea.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>
-            </el-form-item>
-          </el-form>
-        </el-col>
+  <div style="width: 100%">
+    <el-col>
+      <el-form ref="splitForm" :model="splitForm" label-width="80px" size="mini" :disabled="!hasDataPermission('manage',param.privileges)">
+        <el-form-item :label="$t('chart.name')" class="form-item">
+          <el-checkbox v-model="splitForm.name.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>
+        </el-form-item>
+        <el-form-item :label="$t('chart.color')" class="form-item">
+          <el-color-picker v-model="splitForm.name.color" class="color-picker-style" @change="changeSplitStyle" />
+        </el-form-item>
+        <el-form-item :label="$t('chart.text_fontsize')" class="form-item form-item-slider">
+          <el-select v-model="splitForm.name.fontSize" :placeholder="$t('chart.text_fontsize')" @change="changeSplitStyle">
+            <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('chart.axis_line')" class="form-item">
+          <el-checkbox v-model="splitForm.axisLine.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>
+        </el-form-item>
+        <el-form-item :label="$t('chart.axis_color')" class="form-item">
+          <el-color-picker v-model="splitForm.axisLine.lineStyle.color" class="color-picker-style" @change="changeSplitStyle" />
+        </el-form-item>
+        <el-form-item :label="$t('chart.axis_label')" class="form-item">
+          <el-checkbox v-model="splitForm.axisLabel.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>
+        </el-form-item>
+        <el-form-item :label="$t('chart.axis_label_color')" class="form-item">
+          <el-color-picker v-model="splitForm.axisLabel.color" class="color-picker-style" @change="changeSplitStyle" />
+        </el-form-item>
+        <el-form-item :label="$t('chart.label_fontsize')" class="form-item form-item-slider">
+          <el-select v-model="splitForm.axisLabel.fontSize" :placeholder="$t('chart.label_fontsize')" @change="changeSplitStyle">
+            <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('chart.split_line')" class="form-item">
+          <el-checkbox v-model="splitForm.splitLine.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>
+        </el-form-item>
+        <el-form-item :label="$t('chart.split_color')" class="form-item">
+          <el-color-picker v-model="splitForm.splitLine.lineStyle.color" class="color-picker-style" @change="changeSplitStyle" />
+        </el-form-item>
+        <el-form-item :label="$t('chart.shadow')" class="form-item">
+          <el-checkbox v-model="splitForm.splitArea.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>
+        </el-form-item>
+      </el-form>
+    </el-col>
+    <!--    <div style="width: 100%">-->
+    <!--      <el-popover-->
+    <!--        placement="right"-->
+    <!--        width="400"-->
+    <!--        trigger="click"-->
+    <!--      >-->
+    <!--        <el-col>-->
+    <!--          <el-form ref="splitForm" :model="splitForm" label-width="80px" size="mini">-->
+    <!--            <el-form-item :label="$t('chart.name')" class="form-item">-->
+    <!--              <el-checkbox v-model="splitForm.name.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>-->
+    <!--            </el-form-item>-->
+    <!--            <el-form-item :label="$t('chart.color')" class="form-item">-->
+    <!--              <colorPicker v-model="splitForm.name.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeSplitStyle" />-->
+    <!--            </el-form-item>-->
+    <!--            <el-form-item :label="$t('chart.text_fontsize')" class="form-item form-item-slider">-->
+    <!--              <el-select v-model="splitForm.name.fontSize" :placeholder="$t('chart.text_fontsize')" @change="changeSplitStyle">-->
+    <!--                <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />-->
+    <!--              </el-select>-->
+    <!--            </el-form-item>-->
+    <!--            <el-form-item :label="$t('chart.axis_line')" class="form-item">-->
+    <!--              <el-checkbox v-model="splitForm.axisLine.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>-->
+    <!--            </el-form-item>-->
+    <!--            <el-form-item :label="$t('chart.axis_color')" class="form-item">-->
+    <!--              <colorPicker v-model="splitForm.axisLine.lineStyle.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeSplitStyle" />-->
+    <!--            </el-form-item>-->
+    <!--            <el-form-item :label="$t('chart.axis_label')" class="form-item">-->
+    <!--              <el-checkbox v-model="splitForm.axisLabel.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>-->
+    <!--            </el-form-item>-->
+    <!--            <el-form-item :label="$t('chart.axis_label_color')" class="form-item">-->
+    <!--              <colorPicker v-model="splitForm.axisLabel.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeSplitStyle" />-->
+    <!--            </el-form-item>-->
+    <!--            <el-form-item :label="$t('chart.label_fontsize')" class="form-item form-item-slider">-->
+    <!--              <el-select v-model="splitForm.axisLabel.fontSize" :placeholder="$t('chart.label_fontsize')" @change="changeSplitStyle">-->
+    <!--                <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />-->
+    <!--              </el-select>-->
+    <!--            </el-form-item>-->
+    <!--            <el-form-item :label="$t('chart.split_line')" class="form-item">-->
+    <!--              <el-checkbox v-model="splitForm.splitLine.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>-->
+    <!--            </el-form-item>-->
+    <!--            <el-form-item :label="$t('chart.split_color')" class="form-item">-->
+    <!--              <colorPicker v-model="splitForm.splitLine.lineStyle.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeSplitStyle" />-->
+    <!--            </el-form-item>-->
+    <!--            <el-form-item :label="$t('chart.shadow')" class="form-item">-->
+    <!--              <el-checkbox v-model="splitForm.splitArea.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>-->
+    <!--            </el-form-item>-->
+    <!--          </el-form>-->
+    <!--        </el-col>-->
 
-        <el-button slot="reference" :disabled="!hasDataPermission('manage',param.privileges)" size="mini" class="shape-item">
-          {{ $t('chart.split') }}<i class="el-icon-setting el-icon--right" />
-        </el-button>
-      </el-popover>
-    </div>
+    <!--        <el-button slot="reference" :disabled="!hasDataPermission('manage',param.privileges)" size="mini" class="shape-item">-->
+    <!--          {{ $t('chart.split') }}<i class="el-icon-setting el-icon&#45;&#45;right" />-->
+    <!--        </el-button>-->
+    <!--      </el-popover>-->
+    <!--    </div>-->
   </div>
 </template>
 
@@ -156,4 +197,8 @@ export default {
   right: 10px;
   margin-top: -4px;
 }
+  .color-picker-style{
+    cursor: pointer;
+    z-index: 1003;
+  }
 </style>
diff --git a/frontend/src/views/chart/components/component-style/TitleSelector.vue b/frontend/src/views/chart/components/component-style/TitleSelector.vue
index 5851a92787..626654f877 100644
--- a/frontend/src/views/chart/components/component-style/TitleSelector.vue
+++ b/frontend/src/views/chart/components/component-style/TitleSelector.vue
@@ -1,68 +1,113 @@
 <template>
-  <div>
-    <div style="width: 100%">
-      <el-popover
-        v-model="isSetting"
-        placement="right"
-        width="400"
-        trigger="click"
-      >
-        <el-col>
-          <el-form ref="titleForm" :model="titleForm" label-width="80px" size="mini">
-            <!--            <el-form-item :label="$t('chart.show')" class="form-item">-->
-            <!--              <el-checkbox v-model="titleForm.show" @change="changeTitleStyle">{{ $t('chart.show') }}</el-checkbox>-->
-            <!--            </el-form-item>-->
-            <el-form-item :label="$t('chart.title')" class="form-item">
-              <el-input
-                v-model="titleForm.title"
-                size="mini"
-                :placeholder="$t('chart.title')"
-                clearable
-                @blur="changeTitleStyle"
-                @input="inputOnInput($event)"
-              />
-            </el-form-item>
-            <el-form-item :label="$t('chart.text_fontsize')" class="form-item">
-              <el-select v-model="titleForm.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeTitleStyle">
-                <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
-              </el-select>
-            </el-form-item>
-            <el-form-item :label="$t('chart.text_color')" class="form-item">
-              <colorPicker v-model="titleForm.color" style="margin-top: 6px;cursor: pointer;z-index: 999;border: solid 1px black" @change="changeTitleStyle" />
-            </el-form-item>
-            <el-form-item :label="$t('chart.text_h_position')" class="form-item">
-              <el-radio-group v-model="titleForm.hPosition" size="mini" @change="changeTitleStyle">
-                <el-radio-button label="left">{{ $t('chart.text_pos_left') }}</el-radio-button>
-                <el-radio-button label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>
-                <el-radio-button label="right">{{ $t('chart.text_pos_right') }}</el-radio-button>
-              </el-radio-group>
-            </el-form-item>
-            <el-form-item v-show="chart.type && !chart.type.includes('table')" :label="$t('chart.text_v_position')" class="form-item">
-              <el-radio-group v-model="titleForm.vPosition" size="mini" @change="changeTitleStyle">
-                <el-radio-button label="top">{{ $t('chart.text_pos_top') }}</el-radio-button>
-                <el-radio-button label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>
-                <el-radio-button label="bottom">{{ $t('chart.text_pos_bottom') }}</el-radio-button>
-              </el-radio-group>
-            </el-form-item>
-            <el-form-item :label="$t('chart.text_style')" class="form-item">
-              <el-checkbox v-model="titleForm.isItalic" @change="changeTitleStyle">{{ $t('chart.italic') }}</el-checkbox>
-              <el-checkbox v-model="titleForm.isBolder" @change="changeTitleStyle">{{ $t('chart.bolder') }}</el-checkbox>
-            </el-form-item>
-          </el-form>
-        </el-col>
+  <div style="width: 100%">
+    <el-col>
+      <el-form ref="titleForm" :model="titleForm" label-width="80px" size="mini" :disabled="!hasDataPermission('manage',param.privileges)">
+        <el-form-item :label="$t('chart.show')" class="form-item">
+          <el-checkbox v-model="titleForm.show" @change="changeTitleStyle">{{ $t('chart.show') }}</el-checkbox>
+        </el-form-item>
+        <div v-show="titleForm.show">
+          <el-form-item :label="$t('chart.title')" class="form-item">
+            <el-input
+              v-model="titleForm.title"
+              size="mini"
+              :placeholder="$t('chart.title')"
+              clearable
+              @blur="changeTitleStyle"
+              @input="inputOnInput($event)"
+            />
+          </el-form-item>
+          <el-form-item :label="$t('chart.text_fontsize')" class="form-item">
+            <el-select v-model="titleForm.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeTitleStyle">
+              <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
+            </el-select>
+          </el-form-item>
+          <el-form-item :label="$t('chart.text_color')" class="form-item">
+            <el-color-picker v-model="titleForm.color" class="color-picker-style" @change="changeTitleStyle" />
+          </el-form-item>
+          <el-form-item :label="$t('chart.text_h_position')" class="form-item">
+            <el-radio-group v-model="titleForm.hPosition" size="mini" @change="changeTitleStyle">
+              <el-radio-button label="left">{{ $t('chart.text_pos_left') }}</el-radio-button>
+              <el-radio-button label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>
+              <el-radio-button label="right">{{ $t('chart.text_pos_right') }}</el-radio-button>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item v-show="chart.type && !chart.type.includes('table')" :label="$t('chart.text_v_position')" class="form-item">
+            <el-radio-group v-model="titleForm.vPosition" size="mini" @change="changeTitleStyle">
+              <el-radio-button label="top">{{ $t('chart.text_pos_top') }}</el-radio-button>
+              <el-radio-button label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>
+              <el-radio-button label="bottom">{{ $t('chart.text_pos_bottom') }}</el-radio-button>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item :label="$t('chart.text_style')" class="form-item">
+            <el-checkbox v-model="titleForm.isItalic" @change="changeTitleStyle">{{ $t('chart.italic') }}</el-checkbox>
+            <el-checkbox v-model="titleForm.isBolder" @change="changeTitleStyle">{{ $t('chart.bolder') }}</el-checkbox>
+          </el-form-item>
+        </div>
+      </el-form>
+    </el-col>
+    <!--    <div style="width: 100%">-->
+    <!--      <el-popover-->
+    <!--        v-model="isSetting"-->
+    <!--        placement="right"-->
+    <!--        width="400"-->
+    <!--        trigger="click"-->
+    <!--      >-->
+    <!--        <el-col>-->
+    <!--          <el-form ref="titleForm" :model="titleForm" label-width="80px" size="mini">-->
+    <!--            &lt;!&ndash;            <el-form-item :label="$t('chart.show')" class="form-item">&ndash;&gt;-->
+    <!--            &lt;!&ndash;              <el-checkbox v-model="titleForm.show" @change="changeTitleStyle">{{ $t('chart.show') }}</el-checkbox>&ndash;&gt;-->
+    <!--            &lt;!&ndash;            </el-form-item>&ndash;&gt;-->
+    <!--            <el-form-item :label="$t('chart.title')" class="form-item">-->
+    <!--              <el-input-->
+    <!--                v-model="titleForm.title"-->
+    <!--                size="mini"-->
+    <!--                :placeholder="$t('chart.title')"-->
+    <!--                clearable-->
+    <!--                @blur="changeTitleStyle"-->
+    <!--                @input="inputOnInput($event)"-->
+    <!--              />-->
+    <!--            </el-form-item>-->
+    <!--            <el-form-item :label="$t('chart.text_fontsize')" class="form-item">-->
+    <!--              <el-select v-model="titleForm.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeTitleStyle">-->
+    <!--                <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />-->
+    <!--              </el-select>-->
+    <!--            </el-form-item>-->
+    <!--            <el-form-item :label="$t('chart.text_color')" class="form-item">-->
+    <!--              <colorPicker v-model="titleForm.color" style="margin-top: 6px;cursor: pointer;z-index: 999;border: solid 1px black" @change="changeTitleStyle" />-->
+    <!--            </el-form-item>-->
+    <!--            <el-form-item :label="$t('chart.text_h_position')" class="form-item">-->
+    <!--              <el-radio-group v-model="titleForm.hPosition" size="mini" @change="changeTitleStyle">-->
+    <!--                <el-radio-button label="left">{{ $t('chart.text_pos_left') }}</el-radio-button>-->
+    <!--                <el-radio-button label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>-->
+    <!--                <el-radio-button label="right">{{ $t('chart.text_pos_right') }}</el-radio-button>-->
+    <!--              </el-radio-group>-->
+    <!--            </el-form-item>-->
+    <!--            <el-form-item v-show="chart.type && !chart.type.includes('table')" :label="$t('chart.text_v_position')" class="form-item">-->
+    <!--              <el-radio-group v-model="titleForm.vPosition" size="mini" @change="changeTitleStyle">-->
+    <!--                <el-radio-button label="top">{{ $t('chart.text_pos_top') }}</el-radio-button>-->
+    <!--                <el-radio-button label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>-->
+    <!--                <el-radio-button label="bottom">{{ $t('chart.text_pos_bottom') }}</el-radio-button>-->
+    <!--              </el-radio-group>-->
+    <!--            </el-form-item>-->
+    <!--            <el-form-item :label="$t('chart.text_style')" class="form-item">-->
+    <!--              <el-checkbox v-model="titleForm.isItalic" @change="changeTitleStyle">{{ $t('chart.italic') }}</el-checkbox>-->
+    <!--              <el-checkbox v-model="titleForm.isBolder" @change="changeTitleStyle">{{ $t('chart.bolder') }}</el-checkbox>-->
+    <!--            </el-form-item>-->
+    <!--          </el-form>-->
+    <!--        </el-col>-->
 
-        <el-button slot="reference" size="mini" class="shape-item" :disabled="!titleForm.show || !hasDataPermission('manage',param.privileges)">
-          {{ $t('chart.title') }}<i class="el-icon-setting el-icon--right" />
-          <el-switch
-            v-model="titleForm.show"
-            :disabled="!hasDataPermission('manage',param.privileges)"
-            class="switch-style"
-            @click.stop.native
-            @change="changeTitleStyle"
-          />
-        </el-button>
-      </el-popover>
-    </div>
+    <!--        <el-button slot="reference" size="mini" class="shape-item" :disabled="!titleForm.show || !hasDataPermission('manage',param.privileges)">-->
+    <!--          {{ $t('chart.title') }}<i class="el-icon-setting el-icon&#45;&#45;right" />-->
+    <!--          <el-switch-->
+    <!--            v-model="titleForm.show"-->
+    <!--            :disabled="!hasDataPermission('manage',param.privileges)"-->
+    <!--            class="switch-style"-->
+    <!--            @click.stop.native-->
+    <!--            @change="changeTitleStyle"-->
+    <!--          />-->
+    <!--        </el-button>-->
+    <!--      </el-popover>-->
+    <!--    </div>-->
   </div>
 </template>
 
@@ -170,4 +215,8 @@ export default {
   right: 10px;
   margin-top: -4px;
 }
+.color-picker-style{
+  cursor: pointer;
+  z-index: 1003;
+}
 </style>
diff --git a/frontend/src/views/chart/components/component-style/XAxisSelector.vue b/frontend/src/views/chart/components/component-style/XAxisSelector.vue
index 65d88477f8..7aa89a59f8 100644
--- a/frontend/src/views/chart/components/component-style/XAxisSelector.vue
+++ b/frontend/src/views/chart/components/component-style/XAxisSelector.vue
@@ -1,89 +1,155 @@
 <template>
-  <div>
-    <div style="width: 100%">
-      <el-popover
-        v-model="isSetting"
-        placement="right"
-        width="400"
-        trigger="click"
-      >
-        <el-col>
-          <el-form ref="axisForm" :model="axisForm" label-width="80px" size="mini">
-            <!--            <el-form-item :label="$t('chart.show')" class="form-item">-->
-            <!--              <el-checkbox v-model="axisForm.show" @change="changeXAxisStyle">{{ $t('chart.show') }}</el-checkbox>-->
-            <!--            </el-form-item>-->
-            <el-form-item :label="$t('chart.position')" class="form-item">
-              <el-radio-group v-model="axisForm.position" size="mini" @change="changeXAxisStyle">
-                <el-radio-button label="top">{{ $t('chart.text_pos_top') }}</el-radio-button>
-                <el-radio-button label="bottom">{{ $t('chart.text_pos_bottom') }}</el-radio-button>
+  <div style="width: 100%">
+    <el-col>
+      <el-form ref="axisForm" :model="axisForm" label-width="80px" size="mini" :disabled="!hasDataPermission('manage',param.privileges)">
+        <el-form-item :label="$t('chart.show')" class="form-item">
+          <el-checkbox v-model="axisForm.show" @change="changeXAxisStyle">{{ $t('chart.show') }}</el-checkbox>
+        </el-form-item>
+        <div v-show="axisForm.show">
+          <el-form-item :label="$t('chart.position')" class="form-item">
+            <el-radio-group v-model="axisForm.position" size="mini" @change="changeXAxisStyle">
+              <el-radio-button label="top">{{ $t('chart.text_pos_top') }}</el-radio-button>
+              <el-radio-button label="bottom">{{ $t('chart.text_pos_bottom') }}</el-radio-button>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item :label="$t('chart.name')" class="form-item">
+            <el-input v-model="axisForm.name" size="mini" @blur="changeXAxisStyle" />
+          </el-form-item>
+          <el-form-item :label="$t('chart.rotate')" class="form-item form-item-slider">
+            <el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeXAxisStyle" />
+          </el-form-item>
+          <el-form-item :label="$t('chart.axis_name_color')" class="form-item">
+            <el-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" @change="changeXAxisStyle" />
+          </el-form-item>
+          <el-form-item :label="$t('chart.axis_name_fontsize')" class="form-item form-item-slider">
+            <el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeXAxisStyle">
+              <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
+            </el-select>
+          </el-form-item>
+          <el-divider />
+          <el-form-item :label="$t('chart.axis_show')" class="form-item">
+            <el-checkbox v-model="axisForm.splitLine.show" @change="changeXAxisStyle">{{ $t('chart.axis_show') }}</el-checkbox>
+          </el-form-item>
+          <span v-show="axisForm.splitLine.show">
+            <el-form-item :label="$t('chart.axis_color')" class="form-item">
+              <el-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" @change="changeXAxisStyle" />
+            </el-form-item>
+            <el-form-item :label="$t('chart.axis_width')" class="form-item form-item-slider">
+              <el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeXAxisStyle" />
+            </el-form-item>
+            <el-form-item :label="$t('chart.axis_type')" class="form-item">
+              <el-radio-group v-model="axisForm.splitLine.lineStyle.type" size="mini" @change="changeXAxisStyle">
+                <el-radio-button label="solid">{{ $t('chart.axis_type_solid') }}</el-radio-button>
+                <el-radio-button label="dashed">{{ $t('chart.axis_type_dashed') }}</el-radio-button>
+                <el-radio-button label="dotted">{{ $t('chart.axis_type_dotted') }}</el-radio-button>
               </el-radio-group>
             </el-form-item>
-            <el-form-item :label="$t('chart.name')" class="form-item">
-              <el-input v-model="axisForm.name" size="mini" @blur="changeXAxisStyle" />
+          </span>
+          <el-divider />
+          <el-form-item :label="$t('chart.axis_label_show')" class="form-item">
+            <el-checkbox v-model="axisForm.axisLabel.show" @change="changeXAxisStyle">{{ $t('chart.axis_label_show') }}</el-checkbox>
+          </el-form-item>
+          <span v-show="axisForm.axisLabel.show">
+            <el-form-item :label="$t('chart.axis_label_color')" class="form-item">
+              <el-color-picker v-model="axisForm.axisLabel.color" class="el-color-picker" @change="changeXAxisStyle" />
             </el-form-item>
-            <el-form-item :label="$t('chart.rotate')" class="form-item form-item-slider">
-              <el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeXAxisStyle" />
-            </el-form-item>
-            <el-form-item :label="$t('chart.axis_name_color')" class="form-item">
-              <colorPicker v-model="axisForm.nameTextStyle.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeXAxisStyle" />
-            </el-form-item>
-            <el-form-item :label="$t('chart.axis_name_fontsize')" class="form-item form-item-slider">
-              <el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeXAxisStyle">
+            <el-form-item :label="$t('chart.axis_label_fontsize')" class="form-item form-item-slider">
+              <el-select v-model="axisForm.axisLabel.fontSize" :placeholder="$t('chart.axis_label_fontsize')" @change="changeXAxisStyle">
                 <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
               </el-select>
             </el-form-item>
-            <el-divider />
-            <el-form-item :label="$t('chart.axis_show')" class="form-item">
-              <el-checkbox v-model="axisForm.splitLine.show" @change="changeXAxisStyle">{{ $t('chart.axis_show') }}</el-checkbox>
-            </el-form-item>
-            <span v-show="axisForm.splitLine.show">
-              <el-form-item :label="$t('chart.axis_color')" class="form-item">
-                <colorPicker v-model="axisForm.splitLine.lineStyle.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeXAxisStyle" />
-              </el-form-item>
-              <el-form-item :label="$t('chart.axis_width')" class="form-item form-item-slider">
-                <el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeXAxisStyle" />
-              </el-form-item>
-              <el-form-item :label="$t('chart.axis_type')" class="form-item">
-                <el-radio-group v-model="axisForm.splitLine.lineStyle.type" size="mini" @change="changeXAxisStyle">
-                  <el-radio-button label="solid">{{ $t('chart.axis_type_solid') }}</el-radio-button>
-                  <el-radio-button label="dashed">{{ $t('chart.axis_type_dashed') }}</el-radio-button>
-                  <el-radio-button label="dotted">{{ $t('chart.axis_type_dotted') }}</el-radio-button>
-                </el-radio-group>
-              </el-form-item>
-            </span>
-            <el-divider />
-            <el-form-item :label="$t('chart.axis_label_show')" class="form-item">
-              <el-checkbox v-model="axisForm.axisLabel.show" @change="changeXAxisStyle">{{ $t('chart.axis_label_show') }}</el-checkbox>
-            </el-form-item>
-            <span v-show="axisForm.axisLabel.show">
-              <el-form-item :label="$t('chart.axis_label_color')" class="form-item">
-                <colorPicker v-model="axisForm.axisLabel.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeXAxisStyle" />
-              </el-form-item>
-              <el-form-item :label="$t('chart.axis_label_fontsize')" class="form-item form-item-slider">
-                <el-select v-model="axisForm.axisLabel.fontSize" :placeholder="$t('chart.axis_label_fontsize')" @change="changeXAxisStyle">
-                  <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
-                </el-select>
-              </el-form-item>
-            </span>
-            <el-divider />
-            <el-form-item :label="$t('chart.content_formatter')" class="form-item">
-              <el-input v-model="axisForm.axisLabel.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeXAxisStyle" />
-            </el-form-item>
-          </el-form>
-        </el-col>
+          </span>
+          <el-divider />
+          <el-form-item :label="$t('chart.content_formatter')" class="form-item">
+            <el-input v-model="axisForm.axisLabel.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeXAxisStyle" />
+          </el-form-item>
+        </div>
+      </el-form>
+    </el-col>
+    <!--    <div style="width: 100%">-->
+    <!--      <el-popover-->
+    <!--        v-model="isSetting"-->
+    <!--        placement="right"-->
+    <!--        width="400"-->
+    <!--        trigger="click"-->
+    <!--      >-->
+    <!--        <el-col>-->
+    <!--          <el-form ref="axisForm" :model="axisForm" label-width="80px" size="mini">-->
+    <!--            &lt;!&ndash;            <el-form-item :label="$t('chart.show')" class="form-item">&ndash;&gt;-->
+    <!--            &lt;!&ndash;              <el-checkbox v-model="axisForm.show" @change="changeXAxisStyle">{{ $t('chart.show') }}</el-checkbox>&ndash;&gt;-->
+    <!--            &lt;!&ndash;            </el-form-item>&ndash;&gt;-->
+    <!--            <el-form-item :label="$t('chart.position')" class="form-item">-->
+    <!--              <el-radio-group v-model="axisForm.position" size="mini" @change="changeXAxisStyle">-->
+    <!--                <el-radio-button label="top">{{ $t('chart.text_pos_top') }}</el-radio-button>-->
+    <!--                <el-radio-button label="bottom">{{ $t('chart.text_pos_bottom') }}</el-radio-button>-->
+    <!--              </el-radio-group>-->
+    <!--            </el-form-item>-->
+    <!--            <el-form-item :label="$t('chart.name')" class="form-item">-->
+    <!--              <el-input v-model="axisForm.name" size="mini" @blur="changeXAxisStyle" />-->
+    <!--            </el-form-item>-->
+    <!--            <el-form-item :label="$t('chart.rotate')" class="form-item form-item-slider">-->
+    <!--              <el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeXAxisStyle" />-->
+    <!--            </el-form-item>-->
+    <!--            <el-form-item :label="$t('chart.axis_name_color')" class="form-item">-->
+    <!--              <colorPicker v-model="axisForm.nameTextStyle.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeXAxisStyle" />-->
+    <!--            </el-form-item>-->
+    <!--            <el-form-item :label="$t('chart.axis_name_fontsize')" class="form-item form-item-slider">-->
+    <!--              <el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeXAxisStyle">-->
+    <!--                <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />-->
+    <!--              </el-select>-->
+    <!--            </el-form-item>-->
+    <!--            <el-divider />-->
+    <!--            <el-form-item :label="$t('chart.axis_show')" class="form-item">-->
+    <!--              <el-checkbox v-model="axisForm.splitLine.show" @change="changeXAxisStyle">{{ $t('chart.axis_show') }}</el-checkbox>-->
+    <!--            </el-form-item>-->
+    <!--            <span v-show="axisForm.splitLine.show">-->
+    <!--              <el-form-item :label="$t('chart.axis_color')" class="form-item">-->
+    <!--                <colorPicker v-model="axisForm.splitLine.lineStyle.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeXAxisStyle" />-->
+    <!--              </el-form-item>-->
+    <!--              <el-form-item :label="$t('chart.axis_width')" class="form-item form-item-slider">-->
+    <!--                <el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeXAxisStyle" />-->
+    <!--              </el-form-item>-->
+    <!--              <el-form-item :label="$t('chart.axis_type')" class="form-item">-->
+    <!--                <el-radio-group v-model="axisForm.splitLine.lineStyle.type" size="mini" @change="changeXAxisStyle">-->
+    <!--                  <el-radio-button label="solid">{{ $t('chart.axis_type_solid') }}</el-radio-button>-->
+    <!--                  <el-radio-button label="dashed">{{ $t('chart.axis_type_dashed') }}</el-radio-button>-->
+    <!--                  <el-radio-button label="dotted">{{ $t('chart.axis_type_dotted') }}</el-radio-button>-->
+    <!--                </el-radio-group>-->
+    <!--              </el-form-item>-->
+    <!--            </span>-->
+    <!--            <el-divider />-->
+    <!--            <el-form-item :label="$t('chart.axis_label_show')" class="form-item">-->
+    <!--              <el-checkbox v-model="axisForm.axisLabel.show" @change="changeXAxisStyle">{{ $t('chart.axis_label_show') }}</el-checkbox>-->
+    <!--            </el-form-item>-->
+    <!--            <span v-show="axisForm.axisLabel.show">-->
+    <!--              <el-form-item :label="$t('chart.axis_label_color')" class="form-item">-->
+    <!--                <colorPicker v-model="axisForm.axisLabel.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeXAxisStyle" />-->
+    <!--              </el-form-item>-->
+    <!--              <el-form-item :label="$t('chart.axis_label_fontsize')" class="form-item form-item-slider">-->
+    <!--                <el-select v-model="axisForm.axisLabel.fontSize" :placeholder="$t('chart.axis_label_fontsize')" @change="changeXAxisStyle">-->
+    <!--                  <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />-->
+    <!--                </el-select>-->
+    <!--              </el-form-item>-->
+    <!--            </span>-->
+    <!--            <el-divider />-->
+    <!--            <el-form-item :label="$t('chart.content_formatter')" class="form-item">-->
+    <!--              <el-input v-model="axisForm.axisLabel.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeXAxisStyle" />-->
+    <!--            </el-form-item>-->
+    <!--          </el-form>-->
+    <!--        </el-col>-->
 
-        <el-button slot="reference" size="mini" class="shape-item" :disabled="!axisForm.show || !hasDataPermission('manage',param.privileges)">
-          {{ $t('chart.xAxis') }}<i class="el-icon-setting el-icon--right" />
-          <el-switch
-            v-model="axisForm.show"
-            :disabled="!hasDataPermission('manage',param.privileges)"
-            class="switch-style"
-            @click.stop.native
-            @change="changeXAxisStyle"
-          />
-        </el-button>
-      </el-popover>
-    </div>
+    <!--        <el-button slot="reference" size="mini" class="shape-item" :disabled="!axisForm.show || !hasDataPermission('manage',param.privileges)">-->
+    <!--          {{ $t('chart.xAxis') }}<i class="el-icon-setting el-icon&#45;&#45;right" />-->
+    <!--          <el-switch-->
+    <!--            v-model="axisForm.show"-->
+    <!--            :disabled="!hasDataPermission('manage',param.privileges)"-->
+    <!--            class="switch-style"-->
+    <!--            @click.stop.native-->
+    <!--            @change="changeXAxisStyle"-->
+    <!--          />-->
+    <!--        </el-button>-->
+    <!--      </el-popover>-->
+    <!--    </div>-->
   </div>
 </template>
 
@@ -191,4 +257,8 @@ export default {
   right: 10px;
   margin-top: -4px;
 }
+  .color-picker-style{
+    cursor: pointer;
+    z-index: 1003;
+  }
 </style>
diff --git a/frontend/src/views/chart/components/component-style/YAxisSelector.vue b/frontend/src/views/chart/components/component-style/YAxisSelector.vue
index fd5765705f..d2aa8b1791 100644
--- a/frontend/src/views/chart/components/component-style/YAxisSelector.vue
+++ b/frontend/src/views/chart/components/component-style/YAxisSelector.vue
@@ -1,89 +1,155 @@
 <template>
-  <div>
-    <div style="width: 100%">
-      <el-popover
-        v-model="isSetting"
-        placement="right"
-        width="400"
-        trigger="click"
-      >
-        <el-col>
-          <el-form ref="axisForm" :model="axisForm" label-width="80px" size="mini">
-            <!--            <el-form-item :label="$t('chart.show')" class="form-item">-->
-            <!--              <el-checkbox v-model="axisForm.show" @change="changeYAxisStyle">{{ $t('chart.show') }}</el-checkbox>-->
-            <!--            </el-form-item>-->
-            <el-form-item :label="$t('chart.position')" class="form-item">
-              <el-radio-group v-model="axisForm.position" size="mini" @change="changeYAxisStyle">
-                <el-radio-button label="left">{{ $t('chart.text_pos_left') }}</el-radio-button>
-                <el-radio-button label="right">{{ $t('chart.text_pos_right') }}</el-radio-button>
+  <div style="width: 100%">
+    <el-col>
+      <el-form ref="axisForm" :model="axisForm" label-width="80px" size="mini" :disabled="!hasDataPermission('manage',param.privileges)">
+        <el-form-item :label="$t('chart.show')" class="form-item">
+          <el-checkbox v-model="axisForm.show" @change="changeYAxisStyle">{{ $t('chart.show') }}</el-checkbox>
+        </el-form-item>
+        <div v-show="axisForm.show">
+          <el-form-item :label="$t('chart.position')" class="form-item">
+            <el-radio-group v-model="axisForm.position" size="mini" @change="changeYAxisStyle">
+              <el-radio-button label="left">{{ $t('chart.text_pos_left') }}</el-radio-button>
+              <el-radio-button label="right">{{ $t('chart.text_pos_right') }}</el-radio-button>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item :label="$t('chart.name')" class="form-item">
+            <el-input v-model="axisForm.name" size="mini" @blur="changeYAxisStyle" />
+          </el-form-item>
+          <el-form-item :label="$t('chart.rotate')" class="form-item form-item-slider">
+            <el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeYAxisStyle" />
+          </el-form-item>
+          <el-form-item :label="$t('chart.axis_name_color')" class="form-item">
+            <el-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" @change="changeYAxisStyle" />
+          </el-form-item>
+          <el-form-item :label="$t('chart.axis_name_fontsize')" class="form-item form-item-slider">
+            <el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeYAxisStyle">
+              <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
+            </el-select>
+          </el-form-item>
+          <el-divider />
+          <el-form-item :label="$t('chart.axis_show')" class="form-item">
+            <el-checkbox v-model="axisForm.splitLine.show" @change="changeYAxisStyle">{{ $t('chart.axis_show') }}</el-checkbox>
+          </el-form-item>
+          <span v-show="axisForm.splitLine.show">
+            <el-form-item :label="$t('chart.axis_color')" class="form-item">
+              <el-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" @change="changeYAxisStyle" />
+            </el-form-item>
+            <el-form-item :label="$t('chart.axis_width')" class="form-item form-item-slider">
+              <el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeYAxisStyle" />
+            </el-form-item>
+            <el-form-item :label="$t('chart.axis_type')" class="form-item">
+              <el-radio-group v-model="axisForm.splitLine.lineStyle.type" size="mini" @change="changeYAxisStyle">
+                <el-radio-button label="solid">{{ $t('chart.axis_type_solid') }}</el-radio-button>
+                <el-radio-button label="dashed">{{ $t('chart.axis_type_dashed') }}</el-radio-button>
+                <el-radio-button label="dotted">{{ $t('chart.axis_type_dotted') }}</el-radio-button>
               </el-radio-group>
             </el-form-item>
-            <el-form-item :label="$t('chart.name')" class="form-item">
-              <el-input v-model="axisForm.name" size="mini" @blur="changeYAxisStyle" />
+          </span>
+          <el-divider />
+          <el-form-item :label="$t('chart.axis_label_show')" class="form-item">
+            <el-checkbox v-model="axisForm.axisLabel.show" @change="changeYAxisStyle">{{ $t('chart.axis_label_show') }}</el-checkbox>
+          </el-form-item>
+          <span v-show="axisForm.axisLabel.show">
+            <el-form-item :label="$t('chart.axis_label_color')" class="form-item">
+              <el-color-picker v-model="axisForm.axisLabel.color" class="el-color-picker" @change="changeYAxisStyle" />
             </el-form-item>
-            <el-form-item :label="$t('chart.rotate')" class="form-item form-item-slider">
-              <el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeYAxisStyle" />
-            </el-form-item>
-            <el-form-item :label="$t('chart.axis_name_color')" class="form-item">
-              <colorPicker v-model="axisForm.nameTextStyle.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeYAxisStyle" />
-            </el-form-item>
-            <el-form-item :label="$t('chart.axis_name_fontsize')" class="form-item form-item-slider">
-              <el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeYAxisStyle">
+            <el-form-item :label="$t('chart.axis_label_fontsize')" class="form-item form-item-slider">
+              <el-select v-model="axisForm.axisLabel.fontSize" :placeholder="$t('chart.axis_label_fontsize')" @change="changeYAxisStyle">
                 <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
               </el-select>
             </el-form-item>
-            <el-divider />
-            <el-form-item :label="$t('chart.axis_show')" class="form-item">
-              <el-checkbox v-model="axisForm.splitLine.show" @change="changeYAxisStyle">{{ $t('chart.axis_show') }}</el-checkbox>
-            </el-form-item>
-            <span v-show="axisForm.splitLine.show">
-              <el-form-item :label="$t('chart.axis_color')" class="form-item">
-                <colorPicker v-model="axisForm.splitLine.lineStyle.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeYAxisStyle" />
-              </el-form-item>
-              <el-form-item :label="$t('chart.axis_width')" class="form-item form-item-slider">
-                <el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeYAxisStyle" />
-              </el-form-item>
-              <el-form-item :label="$t('chart.axis_type')" class="form-item">
-                <el-radio-group v-model="axisForm.splitLine.lineStyle.type" size="mini" @change="changeYAxisStyle">
-                  <el-radio-button label="solid">{{ $t('chart.axis_type_solid') }}</el-radio-button>
-                  <el-radio-button label="dashed">{{ $t('chart.axis_type_dashed') }}</el-radio-button>
-                  <el-radio-button label="dotted">{{ $t('chart.axis_type_dotted') }}</el-radio-button>
-                </el-radio-group>
-              </el-form-item>
-            </span>
-            <el-divider />
-            <el-form-item :label="$t('chart.axis_label_show')" class="form-item">
-              <el-checkbox v-model="axisForm.axisLabel.show" @change="changeYAxisStyle">{{ $t('chart.axis_label_show') }}</el-checkbox>
-            </el-form-item>
-            <span v-show="axisForm.axisLabel.show">
-              <el-form-item :label="$t('chart.axis_label_color')" class="form-item">
-                <colorPicker v-model="axisForm.axisLabel.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeYAxisStyle" />
-              </el-form-item>
-              <el-form-item :label="$t('chart.axis_label_fontsize')" class="form-item form-item-slider">
-                <el-select v-model="axisForm.axisLabel.fontSize" :placeholder="$t('chart.axis_label_fontsize')" @change="changeYAxisStyle">
-                  <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
-                </el-select>
-              </el-form-item>
-            </span>
-            <el-divider />
-            <el-form-item :label="$t('chart.content_formatter')" class="form-item">
-              <el-input v-model="axisForm.axisLabel.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeYAxisStyle" />
-            </el-form-item>
-          </el-form>
-        </el-col>
+          </span>
+          <el-divider />
+          <el-form-item :label="$t('chart.content_formatter')" class="form-item">
+            <el-input v-model="axisForm.axisLabel.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeYAxisStyle" />
+          </el-form-item>
+        </div>
+      </el-form>
+    </el-col>
+    <!--    <div style="width: 100%">-->
+    <!--      <el-popover-->
+    <!--        v-model="isSetting"-->
+    <!--        placement="right"-->
+    <!--        width="400"-->
+    <!--        trigger="click"-->
+    <!--      >-->
+    <!--        <el-col>-->
+    <!--          <el-form ref="axisForm" :model="axisForm" label-width="80px" size="mini">-->
+    <!--            &lt;!&ndash;            <el-form-item :label="$t('chart.show')" class="form-item">&ndash;&gt;-->
+    <!--            &lt;!&ndash;              <el-checkbox v-model="axisForm.show" @change="changeYAxisStyle">{{ $t('chart.show') }}</el-checkbox>&ndash;&gt;-->
+    <!--            &lt;!&ndash;            </el-form-item>&ndash;&gt;-->
+    <!--            <el-form-item :label="$t('chart.position')" class="form-item">-->
+    <!--              <el-radio-group v-model="axisForm.position" size="mini" @change="changeYAxisStyle">-->
+    <!--                <el-radio-button label="left">{{ $t('chart.text_pos_left') }}</el-radio-button>-->
+    <!--                <el-radio-button label="right">{{ $t('chart.text_pos_right') }}</el-radio-button>-->
+    <!--              </el-radio-group>-->
+    <!--            </el-form-item>-->
+    <!--            <el-form-item :label="$t('chart.name')" class="form-item">-->
+    <!--              <el-input v-model="axisForm.name" size="mini" @blur="changeYAxisStyle" />-->
+    <!--            </el-form-item>-->
+    <!--            <el-form-item :label="$t('chart.rotate')" class="form-item form-item-slider">-->
+    <!--              <el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeYAxisStyle" />-->
+    <!--            </el-form-item>-->
+    <!--            <el-form-item :label="$t('chart.axis_name_color')" class="form-item">-->
+    <!--              <colorPicker v-model="axisForm.nameTextStyle.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeYAxisStyle" />-->
+    <!--            </el-form-item>-->
+    <!--            <el-form-item :label="$t('chart.axis_name_fontsize')" class="form-item form-item-slider">-->
+    <!--              <el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeYAxisStyle">-->
+    <!--                <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />-->
+    <!--              </el-select>-->
+    <!--            </el-form-item>-->
+    <!--            <el-divider />-->
+    <!--            <el-form-item :label="$t('chart.axis_show')" class="form-item">-->
+    <!--              <el-checkbox v-model="axisForm.splitLine.show" @change="changeYAxisStyle">{{ $t('chart.axis_show') }}</el-checkbox>-->
+    <!--            </el-form-item>-->
+    <!--            <span v-show="axisForm.splitLine.show">-->
+    <!--              <el-form-item :label="$t('chart.axis_color')" class="form-item">-->
+    <!--                <colorPicker v-model="axisForm.splitLine.lineStyle.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeYAxisStyle" />-->
+    <!--              </el-form-item>-->
+    <!--              <el-form-item :label="$t('chart.axis_width')" class="form-item form-item-slider">-->
+    <!--                <el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeYAxisStyle" />-->
+    <!--              </el-form-item>-->
+    <!--              <el-form-item :label="$t('chart.axis_type')" class="form-item">-->
+    <!--                <el-radio-group v-model="axisForm.splitLine.lineStyle.type" size="mini" @change="changeYAxisStyle">-->
+    <!--                  <el-radio-button label="solid">{{ $t('chart.axis_type_solid') }}</el-radio-button>-->
+    <!--                  <el-radio-button label="dashed">{{ $t('chart.axis_type_dashed') }}</el-radio-button>-->
+    <!--                  <el-radio-button label="dotted">{{ $t('chart.axis_type_dotted') }}</el-radio-button>-->
+    <!--                </el-radio-group>-->
+    <!--              </el-form-item>-->
+    <!--            </span>-->
+    <!--            <el-divider />-->
+    <!--            <el-form-item :label="$t('chart.axis_label_show')" class="form-item">-->
+    <!--              <el-checkbox v-model="axisForm.axisLabel.show" @change="changeYAxisStyle">{{ $t('chart.axis_label_show') }}</el-checkbox>-->
+    <!--            </el-form-item>-->
+    <!--            <span v-show="axisForm.axisLabel.show">-->
+    <!--              <el-form-item :label="$t('chart.axis_label_color')" class="form-item">-->
+    <!--                <colorPicker v-model="axisForm.axisLabel.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeYAxisStyle" />-->
+    <!--              </el-form-item>-->
+    <!--              <el-form-item :label="$t('chart.axis_label_fontsize')" class="form-item form-item-slider">-->
+    <!--                <el-select v-model="axisForm.axisLabel.fontSize" :placeholder="$t('chart.axis_label_fontsize')" @change="changeYAxisStyle">-->
+    <!--                  <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />-->
+    <!--                </el-select>-->
+    <!--              </el-form-item>-->
+    <!--            </span>-->
+    <!--            <el-divider />-->
+    <!--            <el-form-item :label="$t('chart.content_formatter')" class="form-item">-->
+    <!--              <el-input v-model="axisForm.axisLabel.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeYAxisStyle" />-->
+    <!--            </el-form-item>-->
+    <!--          </el-form>-->
+    <!--        </el-col>-->
 
-        <el-button slot="reference" size="mini" class="shape-item" :disabled="!axisForm.show || !hasDataPermission('manage',param.privileges)">
-          {{ $t('chart.yAxis') }}<i class="el-icon-setting el-icon--right" />
-          <el-switch
-            v-model="axisForm.show"
-            :disabled="!hasDataPermission('manage',param.privileges)"
-            class="switch-style"
-            @click.stop.native
-            @change="changeYAxisStyle"
-          />
-        </el-button>
-      </el-popover>
-    </div>
+    <!--        <el-button slot="reference" size="mini" class="shape-item" :disabled="!axisForm.show || !hasDataPermission('manage',param.privileges)">-->
+    <!--          {{ $t('chart.yAxis') }}<i class="el-icon-setting el-icon&#45;&#45;right" />-->
+    <!--          <el-switch-->
+    <!--            v-model="axisForm.show"-->
+    <!--            :disabled="!hasDataPermission('manage',param.privileges)"-->
+    <!--            class="switch-style"-->
+    <!--            @click.stop.native-->
+    <!--            @change="changeYAxisStyle"-->
+    <!--          />-->
+    <!--        </el-button>-->
+    <!--      </el-popover>-->
+    <!--    </div>-->
   </div>
 </template>
 
@@ -191,4 +257,8 @@ export default {
   right: 10px;
   margin-top: -4px;
 }
+  .color-picker-style{
+    cursor: pointer;
+    z-index: 1003;
+  }
 </style>
diff --git a/frontend/src/views/chart/components/shape-attr/ColorSelector.vue b/frontend/src/views/chart/components/shape-attr/ColorSelector.vue
index 1baffa05a0..bc7a5b2629 100644
--- a/frontend/src/views/chart/components/shape-attr/ColorSelector.vue
+++ b/frontend/src/views/chart/components/shape-attr/ColorSelector.vue
@@ -1,57 +1,99 @@
 <template>
-  <div>
-    <div style="width: 100%">
-      <el-popover
-        placement="right"
-        width="400"
-        trigger="click"
-      >
-        <el-col>
-          <el-form ref="colorForm" :model="colorForm" label-width="80px" size="mini">
-            <div v-if="sourceType==='view' || sourceType==='panelEchart'">
-              <el-form-item v-show="chart.type && !chart.type.includes('table') && !chart.type.includes('text')" :label="$t('chart.color_case')" class="form-item">
-                <el-select v-model="colorForm.value" :placeholder="$t('chart.pls_slc_color_case')" size="mini" @change="changeColorCase">
-                  <el-option v-for="option in colorCases" :key="option.value" :label="option.name" :value="option.value" style="display: flex;align-items: center;">
-                    <div style="float: left">
-                      <span v-for="(c,index) in option.colors" :key="index" :style="{width: '20px',height: '20px',float: 'left',backgroundColor: c}" />
-                    </div>
-                    <span style="margin-left: 4px;">{{ option.name }}</span>
-                  </el-option>
-                </el-select>
-              </el-form-item>
+  <div style="width: 100%">
+    <el-col>
+      <el-form ref="colorForm" :model="colorForm" label-width="80px" size="mini" :disabled="param && !hasDataPermission('manage',param.privileges)">
+        <div v-if="sourceType==='view' || sourceType==='panelEchart'">
+          <el-form-item v-show="chart.type && !chart.type.includes('table') && !chart.type.includes('text')" :label="$t('chart.color_case')" class="form-item">
+            <el-select v-model="colorForm.value" :placeholder="$t('chart.pls_slc_color_case')" size="mini" @change="changeColorCase">
+              <el-option v-for="option in colorCases" :key="option.value" :label="option.name" :value="option.value" style="display: flex;align-items: center;">
+                <div style="float: left">
+                  <span v-for="(c,index) in option.colors" :key="index" :style="{width: '20px',height: '20px',float: 'left',backgroundColor: c}" />
+                </div>
+                <span style="margin-left: 4px;">{{ option.name }}</span>
+              </el-option>
+            </el-select>
+          </el-form-item>
 
-              <el-form-item v-show="(chart.type && chart.type.includes('text')) || sourceType==='panelTable'" :label="$t('chart.dimension_color')" class="form-item">
-                <colorPicker v-model="colorForm.dimensionColor" style="margin-top: 6px;cursor: pointer;z-index: 1003;border: solid 1px black" @change="changeColorCase" />
-              </el-form-item>
-              <el-form-item v-show="(chart.type && chart.type.includes('text')) || sourceType==='panelTable'" :label="$t('chart.quota_color')" class="form-item">
-                <colorPicker v-model="colorForm.quotaColor" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeColorCase" />
-              </el-form-item>
-            </div>
-            <div v-if="sourceType==='view' || sourceType==='panelTable'">
-              <el-form-item v-show="(chart.type && chart.type.includes('table')) || sourceType==='panelTable'" :label="$t('chart.table_header_bg')" class="form-item">
-                <colorPicker v-model="colorForm.tableHeaderBgColor" style="margin-top: 6px;cursor: pointer;z-index: 1002;border: solid 1px black" @change="changeColorCase" />
-              </el-form-item>
-              <el-form-item v-show="(chart.type && chart.type.includes('table')) || sourceType==='panelTable'" :label="$t('chart.table_item_bg')" class="form-item">
-                <colorPicker v-model="colorForm.tableItemBgColor" style="margin-top: 6px;cursor: pointer;z-index: 1003;border: solid 1px black" @change="changeColorCase" />
-              </el-form-item>
-              <el-form-item v-show="(chart.type && chart.type.includes('table')) || sourceType==='panelTable'" :label="$t('chart.table_item_font_color')" class="form-item">
-                <colorPicker v-model="colorForm.tableFontColor" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeColorCase" />
-              </el-form-item>
-              <!--              暂时不支持该功能-->
-              <!--              <el-form-item v-show="(chart.type && chart.type.includes('table')) || sourceType==='panelTable'" :label="$t('chart.stripe')" class="form-item">-->
-              <!--                <el-checkbox v-model="colorForm.tableStripe" @change="changeColorCase">{{ $t('chart.stripe') }}</el-checkbox>-->
-              <!--              </el-form-item>-->
-            </div>
+          <el-form-item v-show="(chart.type && chart.type.includes('text')) || sourceType==='panelTable'" :label="$t('chart.dimension_color')" class="form-item">
+            <el-color-picker v-model="colorForm.dimensionColor" class="color-picker-style" @change="changeColorCase" />
+          </el-form-item>
+          <el-form-item v-show="(chart.type && chart.type.includes('text')) || sourceType==='panelTable'" :label="$t('chart.quota_color')" class="form-item">
+            <el-color-picker v-model="colorForm.quotaColor" class="color-picker-style" @change="changeColorCase" />
+          </el-form-item>
+        </div>
+        <div v-if="sourceType==='view' || sourceType==='panelTable'">
+          <el-form-item v-show="(chart.type && chart.type.includes('table')) || sourceType==='panelTable'" :label="$t('chart.table_header_bg')" class="form-item">
+            <el-color-picker v-model="colorForm.tableHeaderBgColor" class="color-picker-style" @change="changeColorCase" />
+          </el-form-item>
+          <el-form-item v-show="(chart.type && chart.type.includes('table')) || sourceType==='panelTable'" :label="$t('chart.table_item_bg')" class="form-item">
+            <el-color-picker v-model="colorForm.tableItemBgColor" class="color-picker-style" @change="changeColorCase" />
+          </el-form-item>
+          <el-form-item v-show="(chart.type && chart.type.includes('table')) || sourceType==='panelTable'" :label="$t('chart.table_item_font_color')" class="form-item">
+            <el-color-picker v-model="colorForm.tableFontColor" class="color-picker-style" @change="changeColorCase" />
+          </el-form-item>
+          <!--              暂时不支持该功能-->
+          <!--              <el-form-item v-show="(chart.type && chart.type.includes('table')) || sourceType==='panelTable'" :label="$t('chart.stripe')" class="form-item">-->
+          <!--                <el-checkbox v-model="colorForm.tableStripe" @change="changeColorCase">{{ $t('chart.stripe') }}</el-checkbox>-->
+          <!--              </el-form-item>-->
+        </div>
 
-            <el-form-item v-show="chart.type && !chart.type.includes('text')" :label="$t('chart.not_alpha')" class="form-item form-item-slider">
-              <el-slider v-model="colorForm.alpha" show-input :show-input-controls="false" input-size="mini" @change="changeColorCase" />
-            </el-form-item>
-          </el-form>
-        </el-col>
+        <el-form-item v-show="chart.type && !chart.type.includes('text')" :label="$t('chart.not_alpha')" class="form-item form-item-slider">
+          <el-slider v-model="colorForm.alpha" show-input :show-input-controls="false" input-size="mini" @change="changeColorCase" />
+        </el-form-item>
+      </el-form>
+    </el-col>
+    <!--    <div style="width: 100%">-->
+    <!--      <el-popover-->
+    <!--        placement="right"-->
+    <!--        width="400"-->
+    <!--        trigger="click"-->
+    <!--      >-->
+    <!--        <el-col>-->
+    <!--          <el-form ref="colorForm" :model="colorForm" label-width="80px" size="mini">-->
+    <!--            <div v-if="sourceType==='view' || sourceType==='panelEchart'">-->
+    <!--              <el-form-item v-show="chart.type && !chart.type.includes('table') && !chart.type.includes('text')" :label="$t('chart.color_case')" class="form-item">-->
+    <!--                <el-select v-model="colorForm.value" :placeholder="$t('chart.pls_slc_color_case')" size="mini" @change="changeColorCase">-->
+    <!--                  <el-option v-for="option in colorCases" :key="option.value" :label="option.name" :value="option.value" style="display: flex;align-items: center;">-->
+    <!--                    <div style="float: left">-->
+    <!--                      <span v-for="(c,index) in option.colors" :key="index" :style="{width: '20px',height: '20px',float: 'left',backgroundColor: c}" />-->
+    <!--                    </div>-->
+    <!--                    <span style="margin-left: 4px;">{{ option.name }}</span>-->
+    <!--                  </el-option>-->
+    <!--                </el-select>-->
+    <!--              </el-form-item>-->
 
-        <el-button slot="reference" :disabled="param && !hasDataPermission('manage',param.privileges)" size="mini" class="shape-item">{{ $t('chart.color') }}<i class="el-icon-setting el-icon--right" /></el-button>
-      </el-popover>
-    </div>
+    <!--              <el-form-item v-show="(chart.type && chart.type.includes('text')) || sourceType==='panelTable'" :label="$t('chart.dimension_color')" class="form-item">-->
+    <!--                <colorPicker v-model="colorForm.dimensionColor" style="margin-top: 6px;cursor: pointer;z-index: 1003;border: solid 1px black" @change="changeColorCase" />-->
+    <!--              </el-form-item>-->
+    <!--              <el-form-item v-show="(chart.type && chart.type.includes('text')) || sourceType==='panelTable'" :label="$t('chart.quota_color')" class="form-item">-->
+    <!--                <colorPicker v-model="colorForm.quotaColor" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeColorCase" />-->
+    <!--              </el-form-item>-->
+    <!--            </div>-->
+    <!--            <div v-if="sourceType==='view' || sourceType==='panelTable'">-->
+    <!--              <el-form-item v-show="(chart.type && chart.type.includes('table')) || sourceType==='panelTable'" :label="$t('chart.table_header_bg')" class="form-item">-->
+    <!--                <colorPicker v-model="colorForm.tableHeaderBgColor" style="margin-top: 6px;cursor: pointer;z-index: 1002;border: solid 1px black" @change="changeColorCase" />-->
+    <!--              </el-form-item>-->
+    <!--              <el-form-item v-show="(chart.type && chart.type.includes('table')) || sourceType==='panelTable'" :label="$t('chart.table_item_bg')" class="form-item">-->
+    <!--                <colorPicker v-model="colorForm.tableItemBgColor" style="margin-top: 6px;cursor: pointer;z-index: 1003;border: solid 1px black" @change="changeColorCase" />-->
+    <!--              </el-form-item>-->
+    <!--              <el-form-item v-show="(chart.type && chart.type.includes('table')) || sourceType==='panelTable'" :label="$t('chart.table_item_font_color')" class="form-item">-->
+    <!--                <colorPicker v-model="colorForm.tableFontColor" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeColorCase" />-->
+    <!--              </el-form-item>-->
+    <!--              &lt;!&ndash;              暂时不支持该功能&ndash;&gt;-->
+    <!--              &lt;!&ndash;              <el-form-item v-show="(chart.type && chart.type.includes('table')) || sourceType==='panelTable'" :label="$t('chart.stripe')" class="form-item">&ndash;&gt;-->
+    <!--              &lt;!&ndash;                <el-checkbox v-model="colorForm.tableStripe" @change="changeColorCase">{{ $t('chart.stripe') }}</el-checkbox>&ndash;&gt;-->
+    <!--              &lt;!&ndash;              </el-form-item>&ndash;&gt;-->
+    <!--            </div>-->
+
+    <!--            <el-form-item v-show="chart.type && !chart.type.includes('text')" :label="$t('chart.not_alpha')" class="form-item form-item-slider">-->
+    <!--              <el-slider v-model="colorForm.alpha" show-input :show-input-controls="false" input-size="mini" @change="changeColorCase" />-->
+    <!--            </el-form-item>-->
+    <!--          </el-form>-->
+    <!--        </el-col>-->
+
+    <!--        <el-button slot="reference" :disabled="param && !hasDataPermission('manage',param.privileges)" size="mini" class="shape-item">{{ $t('chart.color') }}<i class="el-icon-setting el-icon&#45;&#45;right" /></el-button>-->
+    <!--      </el-popover>-->
+    <!--    </div>-->
   </div>
 </template>
 
@@ -226,4 +268,8 @@ export default {
   .el-form-item{
     margin-bottom: 6px;
   }
+  .color-picker-style{
+    cursor: pointer;
+    z-index: 1003;
+  }
 </style>
diff --git a/frontend/src/views/chart/components/shape-attr/LabelSelector.vue b/frontend/src/views/chart/components/shape-attr/LabelSelector.vue
index 0b164606bc..e6d17816f8 100644
--- a/frontend/src/views/chart/components/shape-attr/LabelSelector.vue
+++ b/frontend/src/views/chart/components/shape-attr/LabelSelector.vue
@@ -1,84 +1,145 @@
 <template>
-  <div>
-    <div style="width: 100%">
-      <el-popover
-        v-model="isSetting"
-        placement="right"
-        width="400"
-        trigger="click"
-      >
-        <el-col>
-          <el-form v-show="chart.type && !chart.type.includes('gauge')" ref="labelForm" :model="labelForm" label-width="80px" size="mini">
-            <!--            <el-form-item :label="$t('chart.show')" class="form-item">-->
-            <!--              <el-checkbox v-model="labelForm.show" @change="changeLabelAttr">{{ $t('chart.show') }}</el-checkbox>-->
-            <!--            </el-form-item>-->
-            <el-form-item :label="$t('chart.pie_label_line_show')" class="form-item">
-              <el-checkbox v-model="labelForm.labelLine.show" @change="changeLabelAttr">{{ $t('chart.pie_label_line_show') }}</el-checkbox>
-            </el-form-item>
-            <el-form-item :label="$t('chart.text_fontsize')" class="form-item">
-              <el-select v-model="labelForm.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeLabelAttr">
-                <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
-              </el-select>
-            </el-form-item>
-            <el-form-item :label="$t('chart.text_color')" class="form-item">
-              <colorPicker v-model="labelForm.color" style="margin-top: 6px;cursor: pointer;z-index: 999;border: solid 1px black" @change="changeLabelAttr" />
-            </el-form-item>
-            <el-form-item :label="$t('chart.label_position')" class="form-item">
-              <el-select v-model="labelForm.position" :placeholder="$t('chart.label_position')" @change="changeLabelAttr">
-                <el-option v-for="option in labelPosition" :key="option.value" :label="option.name" :value="option.value" />
-              </el-select>
-            </el-form-item>
-            <el-form-item class="form-item">
-              <span slot="label">
-                <span class="span-box">
-                  <span>{{ $t('chart.content_formatter') }}</span>
-                  <el-tooltip class="item" effect="dark" placement="bottom">
-                    <div slot="content">
-                      字符串模板 模板变量有：<br>{a}：系列名。<br>{b}：数据名。<br>{c}：数据值。<br>{d}：百分比（用于饼图等）。
-                    </div>
-                    <i class="el-icon-info" style="cursor: pointer;" />
-                  </el-tooltip>
-                </span>
+  <div style="width: 100%;">
+    <el-col>
+      <el-form v-show="chart.type && !chart.type.includes('gauge')" ref="labelForm" :disabled="!hasDataPermission('manage',param.privileges)" :model="labelForm" label-width="80px" size="mini">
+        <el-form-item :label="$t('chart.show')" class="form-item">
+          <el-checkbox v-model="labelForm.show" @change="changeLabelAttr">{{ $t('chart.show') }}</el-checkbox>
+        </el-form-item>
+        <div v-show="labelForm.show">
+          <el-form-item v-show="chart.type && chart.type.includes('pie')" :label="$t('chart.pie_label_line_show')" class="form-item">
+            <el-checkbox v-model="labelForm.labelLine.show" @change="changeLabelAttr">{{ $t('chart.pie_label_line_show') }}</el-checkbox>
+          </el-form-item>
+          <el-form-item :label="$t('chart.text_fontsize')" class="form-item">
+            <el-select v-model="labelForm.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeLabelAttr">
+              <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
+            </el-select>
+          </el-form-item>
+          <el-form-item :label="$t('chart.text_color')" class="form-item">
+            <el-color-picker v-model="labelForm.color" class="color-picker-style" @change="changeLabelAttr" />
+          </el-form-item>
+          <el-form-item :label="$t('chart.label_position')" class="form-item">
+            <el-select v-model="labelForm.position" :placeholder="$t('chart.label_position')" @change="changeLabelAttr">
+              <el-option v-for="option in labelPosition" :key="option.value" :label="option.name" :value="option.value" />
+            </el-select>
+          </el-form-item>
+          <el-form-item class="form-item">
+            <span slot="label">
+              <span class="span-box">
+                <span>{{ $t('chart.content_formatter') }}</span>
+                <el-tooltip class="item" effect="dark" placement="bottom">
+                  <div slot="content">
+                    字符串模板 模板变量有：<br>{a}：系列名。<br>{b}：数据名。<br>{c}：数据值。<br>{d}：百分比（用于饼图等）。
+                  </div>
+                  <i class="el-icon-info" style="cursor: pointer;" />
+                </el-tooltip>
               </span>
-              <el-input v-model="labelForm.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeLabelAttr" />
-            </el-form-item>
-          </el-form>
+            </span>
+            <el-input v-model="labelForm.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeLabelAttr" />
+          </el-form-item>
+        </div>
+      </el-form>
 
-          <el-form v-show="chart.type && chart.type.includes('gauge')" ref="labelForm" :model="labelForm" label-width="80px" size="mini">
-            <el-form-item :label="$t('chart.show')" class="form-item">
-              <el-checkbox v-model="labelForm.show" @change="changeLabelAttr">{{ $t('chart.show') }}</el-checkbox>
-            </el-form-item>
-            <el-form-item :label="$t('chart.text_fontsize')" class="form-item">
-              <el-select v-model="labelForm.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeLabelAttr">
-                <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
-              </el-select>
-            </el-form-item>
-            <el-form-item :label="$t('chart.text_color')" class="form-item">
-              <colorPicker v-model="labelForm.color" style="margin-top: 6px;cursor: pointer;z-index: 999;border: solid 1px black" @change="changeLabelAttr" />
-            </el-form-item>
-            <el-form-item class="form-item">
-              <span slot="label">
-                <span class="span-box">
-                  <span>{{ $t('chart.content_formatter') }}</span>
-                </span>
-              </span>
-              <el-input v-model="labelForm.gaugeFormatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeLabelAttr" />
-            </el-form-item>
-          </el-form>
-        </el-col>
+      <el-form v-show="chart.type && chart.type.includes('gauge')" ref="labelForm" :disabled="!hasDataPermission('manage',param.privileges)" :model="labelForm" label-width="80px" size="mini">
+        <el-form-item :label="$t('chart.show')" class="form-item">
+          <el-checkbox v-model="labelForm.show" @change="changeLabelAttr">{{ $t('chart.show') }}</el-checkbox>
+        </el-form-item>
+        <el-form-item :label="$t('chart.text_fontsize')" class="form-item">
+          <el-select v-model="labelForm.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeLabelAttr">
+            <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('chart.text_color')" class="form-item">
+          <el-color-picker v-model="labelForm.color" class="color-picker-style" @change="changeLabelAttr" />
+        </el-form-item>
+        <el-form-item class="form-item">
+          <span slot="label">
+            <span class="span-box">
+              <span>{{ $t('chart.content_formatter') }}</span>
+            </span>
+          </span>
+          <el-input v-model="labelForm.gaugeFormatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeLabelAttr" />
+        </el-form-item>
+      </el-form>
+    </el-col>
+    <!--    <div style="width: 100%">-->
+    <!--      <el-popover-->
+    <!--        v-model="isSetting"-->
+    <!--        placement="right"-->
+    <!--        width="400"-->
+    <!--        trigger="click"-->
+    <!--      >-->
+    <!--        <el-col>-->
+    <!--          <el-form v-show="chart.type && !chart.type.includes('gauge')" ref="labelForm" :model="labelForm" label-width="80px" size="mini">-->
+    <!--            &lt;!&ndash;            <el-form-item :label="$t('chart.show')" class="form-item">&ndash;&gt;-->
+    <!--            &lt;!&ndash;              <el-checkbox v-model="labelForm.show" @change="changeLabelAttr">{{ $t('chart.show') }}</el-checkbox>&ndash;&gt;-->
+    <!--            &lt;!&ndash;            </el-form-item>&ndash;&gt;-->
+    <!--            <el-form-item :label="$t('chart.pie_label_line_show')" class="form-item">-->
+    <!--              <el-checkbox v-model="labelForm.labelLine.show" @change="changeLabelAttr">{{ $t('chart.pie_label_line_show') }}</el-checkbox>-->
+    <!--            </el-form-item>-->
+    <!--            <el-form-item :label="$t('chart.text_fontsize')" class="form-item">-->
+    <!--              <el-select v-model="labelForm.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeLabelAttr">-->
+    <!--                <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />-->
+    <!--              </el-select>-->
+    <!--            </el-form-item>-->
+    <!--            <el-form-item :label="$t('chart.text_color')" class="form-item">-->
+    <!--              <colorPicker v-model="labelForm.color" style="margin-top: 6px;cursor: pointer;z-index: 999;border: solid 1px black" @change="changeLabelAttr" />-->
+    <!--            </el-form-item>-->
+    <!--            <el-form-item :label="$t('chart.label_position')" class="form-item">-->
+    <!--              <el-select v-model="labelForm.position" :placeholder="$t('chart.label_position')" @change="changeLabelAttr">-->
+    <!--                <el-option v-for="option in labelPosition" :key="option.value" :label="option.name" :value="option.value" />-->
+    <!--              </el-select>-->
+    <!--            </el-form-item>-->
+    <!--            <el-form-item class="form-item">-->
+    <!--              <span slot="label">-->
+    <!--                <span class="span-box">-->
+    <!--                  <span>{{ $t('chart.content_formatter') }}</span>-->
+    <!--                  <el-tooltip class="item" effect="dark" placement="bottom">-->
+    <!--                    <div slot="content">-->
+    <!--                      字符串模板 模板变量有：<br>{a}：系列名。<br>{b}：数据名。<br>{c}：数据值。<br>{d}：百分比（用于饼图等）。-->
+    <!--                    </div>-->
+    <!--                    <i class="el-icon-info" style="cursor: pointer;" />-->
+    <!--                  </el-tooltip>-->
+    <!--                </span>-->
+    <!--              </span>-->
+    <!--              <el-input v-model="labelForm.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeLabelAttr" />-->
+    <!--            </el-form-item>-->
+    <!--          </el-form>-->
 
-        <el-button slot="reference" size="mini" class="shape-item" :disabled="!labelForm.show || !hasDataPermission('manage',param.privileges)">
-          {{ $t('chart.label') }}<i class="el-icon-setting el-icon--right" />
-          <el-switch
-            v-model="labelForm.show"
-            :disabled="!hasDataPermission('manage',param.privileges)"
-            class="switch-style"
-            @click.stop.native
-            @change="changeLabelAttr"
-          />
-        </el-button>
-      </el-popover>
-    </div>
+    <!--          <el-form v-show="chart.type && chart.type.includes('gauge')" ref="labelForm" :model="labelForm" label-width="80px" size="mini">-->
+    <!--            <el-form-item :label="$t('chart.show')" class="form-item">-->
+    <!--              <el-checkbox v-model="labelForm.show" @change="changeLabelAttr">{{ $t('chart.show') }}</el-checkbox>-->
+    <!--            </el-form-item>-->
+    <!--            <el-form-item :label="$t('chart.text_fontsize')" class="form-item">-->
+    <!--              <el-select v-model="labelForm.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeLabelAttr">-->
+    <!--                <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />-->
+    <!--              </el-select>-->
+    <!--            </el-form-item>-->
+    <!--            <el-form-item :label="$t('chart.text_color')" class="form-item">-->
+    <!--              <colorPicker v-model="labelForm.color" style="margin-top: 6px;cursor: pointer;z-index: 999;border: solid 1px black" @change="changeLabelAttr" />-->
+    <!--            </el-form-item>-->
+    <!--            <el-form-item class="form-item">-->
+    <!--              <span slot="label">-->
+    <!--                <span class="span-box">-->
+    <!--                  <span>{{ $t('chart.content_formatter') }}</span>-->
+    <!--                </span>-->
+    <!--              </span>-->
+    <!--              <el-input v-model="labelForm.gaugeFormatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeLabelAttr" />-->
+    <!--            </el-form-item>-->
+    <!--          </el-form>-->
+    <!--        </el-col>-->
+
+    <!--        <el-button slot="reference" size="mini" class="shape-item" :disabled="!labelForm.show || !hasDataPermission('manage',param.privileges)">-->
+    <!--          {{ $t('chart.label') }}<i class="el-icon-setting el-icon&#45;&#45;right" />-->
+    <!--          <el-switch-->
+    <!--            v-model="labelForm.show"-->
+    <!--            :disabled="!hasDataPermission('manage',param.privileges)"-->
+    <!--            class="switch-style"-->
+    <!--            @click.stop.native-->
+    <!--            @change="changeLabelAttr"-->
+    <!--          />-->
+    <!--        </el-button>-->
+    <!--      </el-popover>-->
+    <!--    </div>-->
   </div>
 </template>
 
@@ -189,4 +250,8 @@ export default {
     right: 10px;
     margin-top: -4px;
   }
+  .color-picker-style{
+    cursor: pointer;
+    z-index: 1003;
+  }
 </style>
diff --git a/frontend/src/views/chart/components/shape-attr/SizeSelector.vue b/frontend/src/views/chart/components/shape-attr/SizeSelector.vue
index b3d714eb4c..1a542be9f6 100644
--- a/frontend/src/views/chart/components/shape-attr/SizeSelector.vue
+++ b/frontend/src/views/chart/components/shape-attr/SizeSelector.vue
@@ -1,151 +1,285 @@
 <template>
-  <div>
-    <div style="width: 100%">
-      <el-popover
-        placement="right"
-        width="400"
-        trigger="click"
-      >
-        <el-col>
-          <el-form v-show="chart.type && chart.type.includes('bar')" ref="sizeFormBar" :model="sizeForm" label-width="80px" size="mini">
-            <el-form-item :label="$t('chart.adapt')" class="form-item">
-              <el-checkbox v-model="sizeForm.barDefault" @change="changeBarSizeCase">{{ $t('chart.adapt') }}</el-checkbox>
-            </el-form-item>
-            <el-form-item :label="$t('chart.bar_width')" class="form-item form-item-slider">
-              <el-slider v-model="sizeForm.barWidth" :disabled="sizeForm.barDefault" show-input :show-input-controls="false" input-size="mini" :min="1" :max="80" @change="changeBarSizeCase" />
-            </el-form-item>
-            <el-form-item :label="$t('chart.bar_gap')" class="form-item form-item-slider">
-              <el-slider v-model="sizeForm.barGap" :disabled="sizeForm.barDefault" show-input :show-input-controls="false" input-size="mini" :min="0" :max="5" :step="0.1" @change="changeBarSizeCase" />
-            </el-form-item>
-          </el-form>
+  <div style="width: 100%">
+    <el-col>
+      <el-form v-show="chart.type && chart.type.includes('bar')" ref="sizeFormBar" :disabled="param && !hasDataPermission('manage',param.privileges)" :model="sizeForm" label-width="80px" size="mini">
+        <el-form-item :label="$t('chart.adapt')" class="form-item">
+          <el-checkbox v-model="sizeForm.barDefault" @change="changeBarSizeCase">{{ $t('chart.adapt') }}</el-checkbox>
+        </el-form-item>
+        <el-form-item :label="$t('chart.bar_width')" class="form-item form-item-slider">
+          <el-slider v-model="sizeForm.barWidth" :disabled="sizeForm.barDefault" show-input :show-input-controls="false" input-size="mini" :min="1" :max="80" @change="changeBarSizeCase" />
+        </el-form-item>
+        <el-form-item :label="$t('chart.bar_gap')" class="form-item form-item-slider">
+          <el-slider v-model="sizeForm.barGap" :disabled="sizeForm.barDefault" show-input :show-input-controls="false" input-size="mini" :min="0" :max="5" :step="0.1" @change="changeBarSizeCase" />
+        </el-form-item>
+      </el-form>
 
-          <el-form v-show="chart.type && chart.type.includes('line')" ref="sizeFormLine" :model="sizeForm" label-width="80px" size="mini">
-            <el-form-item :label="$t('chart.line_width')" class="form-item form-item-slider">
-              <el-slider v-model="sizeForm.lineWidth" show-input :show-input-controls="false" input-size="mini" :min="0" :max="10" @change="changeBarSizeCase" />
-            </el-form-item>
-            <el-form-item :label="$t('chart.line_type')" class="form-item">
-              <el-radio-group v-model="sizeForm.lineType" @change="changeBarSizeCase">
-                <el-radio-button label="solid">{{ $t('chart.line_type_solid') }}</el-radio-button>
-                <el-radio-button label="dashed">{{ $t('chart.line_type_dashed') }}</el-radio-button>
-              </el-radio-group>
-            </el-form-item>
-            <el-form-item :label="$t('chart.line_symbol')" class="form-item">
-              <el-select v-model="sizeForm.lineSymbol" :placeholder="$t('chart.line_symbol')" @change="changeBarSizeCase">
-                <el-option
-                  v-for="item in lineSymbolOptions"
-                  :key="item.value"
-                  :label="item.name"
-                  :value="item.value"
-                />
-              </el-select>
-            </el-form-item>
-            <el-form-item :label="$t('chart.line_symbol_size')" class="form-item form-item-slider">
-              <el-slider v-model="sizeForm.lineSymbolSize" show-input :show-input-controls="false" input-size="mini" :min="0" :max="20" @change="changeBarSizeCase" />
-            </el-form-item>
-            <el-form-item :label="$t('chart.line_smooth')" class="form-item">
-              <el-checkbox v-model="sizeForm.lineSmooth" @change="changeBarSizeCase">{{ $t('chart.line_smooth') }}</el-checkbox>
-            </el-form-item>
-            <el-form-item :label="$t('chart.line_area')" class="form-item">
-              <el-checkbox v-model="sizeForm.lineArea" @change="changeBarSizeCase">{{ $t('chart.show') }}</el-checkbox>
-            </el-form-item>
-          </el-form>
+      <el-form v-show="chart.type && chart.type.includes('line')" ref="sizeFormLine" :disabled="param && !hasDataPermission('manage',param.privileges)" :model="sizeForm" label-width="80px" size="mini">
+        <el-form-item :label="$t('chart.line_width')" class="form-item form-item-slider">
+          <el-slider v-model="sizeForm.lineWidth" show-input :show-input-controls="false" input-size="mini" :min="0" :max="10" @change="changeBarSizeCase" />
+        </el-form-item>
+        <el-form-item :label="$t('chart.line_type')" class="form-item">
+          <el-radio-group v-model="sizeForm.lineType" @change="changeBarSizeCase">
+            <el-radio-button label="solid">{{ $t('chart.line_type_solid') }}</el-radio-button>
+            <el-radio-button label="dashed">{{ $t('chart.line_type_dashed') }}</el-radio-button>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item :label="$t('chart.line_symbol')" class="form-item">
+          <el-select v-model="sizeForm.lineSymbol" :placeholder="$t('chart.line_symbol')" @change="changeBarSizeCase">
+            <el-option
+              v-for="item in lineSymbolOptions"
+              :key="item.value"
+              :label="item.name"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('chart.line_symbol_size')" class="form-item form-item-slider">
+          <el-slider v-model="sizeForm.lineSymbolSize" show-input :show-input-controls="false" input-size="mini" :min="0" :max="20" @change="changeBarSizeCase" />
+        </el-form-item>
+        <el-form-item :label="$t('chart.line_smooth')" class="form-item">
+          <el-checkbox v-model="sizeForm.lineSmooth" @change="changeBarSizeCase">{{ $t('chart.line_smooth') }}</el-checkbox>
+        </el-form-item>
+        <el-form-item :label="$t('chart.line_area')" class="form-item">
+          <el-checkbox v-model="sizeForm.lineArea" @change="changeBarSizeCase">{{ $t('chart.show') }}</el-checkbox>
+        </el-form-item>
+      </el-form>
 
-          <el-form v-show="chart.type && chart.type.includes('pie')" ref="sizeFormPie" :model="sizeForm" label-width="80px" size="mini">
-            <el-form-item :label="$t('chart.pie_inner_radius')" class="form-item form-item-slider">
-              <el-slider v-model="sizeForm.pieInnerRadius" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase" />
-            </el-form-item>
-            <el-form-item :label="$t('chart.pie_outer_radius')" class="form-item form-item-slider">
-              <el-slider v-model="sizeForm.pieOuterRadius" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase" />
-            </el-form-item>
+      <el-form v-show="chart.type && chart.type.includes('pie')" ref="sizeFormPie" :disabled="param && !hasDataPermission('manage',param.privileges)" :model="sizeForm" label-width="80px" size="mini">
+        <el-form-item :label="$t('chart.pie_inner_radius')" class="form-item form-item-slider">
+          <el-slider v-model="sizeForm.pieInnerRadius" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase" />
+        </el-form-item>
+        <el-form-item :label="$t('chart.pie_outer_radius')" class="form-item form-item-slider">
+          <el-slider v-model="sizeForm.pieOuterRadius" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase" />
+        </el-form-item>
 
-            <span v-show="chart.type && chart.type.includes('pie-rose')">
-              <el-form-item :label="$t('chart.rose_type')" class="form-item">
-                <el-radio-group v-model="sizeForm.pieRoseType" size="mini" @change="changeBarSizeCase">
-                  <el-radio-button label="radius">{{ $t('chart.radius_mode') }}</el-radio-button>
-                  <el-radio-button label="area">{{ $t('chart.area_mode') }}</el-radio-button>
-                </el-radio-group>
-              </el-form-item>
-              <el-form-item :label="$t('chart.rose_radius')" class="form-item form-item-slider">
-                <el-slider v-model="sizeForm.pieRoseRadius" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase" />
-              </el-form-item>
-            </span>
-          </el-form>
+        <span v-show="chart.type && chart.type.includes('pie-rose')">
+          <el-form-item :label="$t('chart.rose_type')" class="form-item">
+            <el-radio-group v-model="sizeForm.pieRoseType" size="mini" @change="changeBarSizeCase">
+              <el-radio-button label="radius">{{ $t('chart.radius_mode') }}</el-radio-button>
+              <el-radio-button label="area">{{ $t('chart.area_mode') }}</el-radio-button>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item :label="$t('chart.rose_radius')" class="form-item form-item-slider">
+            <el-slider v-model="sizeForm.pieRoseRadius" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase" />
+          </el-form-item>
+        </span>
+      </el-form>
 
-          <el-form v-show="chart.type && chart.type.includes('funnel')" ref="sizeFormPie" :model="sizeForm" label-width="80px" size="mini">
-            <el-form-item :label="$t('chart.funnel_width')" class="form-item form-item-slider">
-              <el-slider v-model="sizeForm.funnelWidth" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase" />
-            </el-form-item>
-          </el-form>
+      <el-form v-show="chart.type && chart.type.includes('funnel')" ref="sizeFormPie" :disabled="param && !hasDataPermission('manage',param.privileges)" :model="sizeForm" label-width="80px" size="mini">
+        <el-form-item :label="$t('chart.funnel_width')" class="form-item form-item-slider">
+          <el-slider v-model="sizeForm.funnelWidth" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase" />
+        </el-form-item>
+      </el-form>
 
-          <el-form v-show="chart.type && chart.type.includes('radar')" ref="sizeFormPie" :model="sizeForm" label-width="80px" size="mini">
-            <el-form-item :label="$t('chart.shape')" class="form-item">
-              <el-radio-group v-model="sizeForm.radarShape" size="mini" @change="changeBarSizeCase">
-                <el-radio-button label="polygon">{{ $t('chart.polygon') }}</el-radio-button>
-                <el-radio-button label="circle">{{ $t('chart.circle') }}</el-radio-button>
-              </el-radio-group>
-            </el-form-item>
-          </el-form>
+      <el-form v-show="chart.type && chart.type.includes('radar')" ref="sizeFormPie" :disabled="param && !hasDataPermission('manage',param.privileges)" :model="sizeForm" label-width="80px" size="mini">
+        <el-form-item :label="$t('chart.shape')" class="form-item">
+          <el-radio-group v-model="sizeForm.radarShape" size="mini" @change="changeBarSizeCase">
+            <el-radio-button label="polygon">{{ $t('chart.polygon') }}</el-radio-button>
+            <el-radio-button label="circle">{{ $t('chart.circle') }}</el-radio-button>
+          </el-radio-group>
+        </el-form-item>
+      </el-form>
 
-          <el-form v-show="chart.type && chart.type.includes('table')" ref="sizeFormPie" :model="sizeForm" label-width="100px" size="mini">
-            <el-form-item :label="$t('chart.table_title_fontsize')" class="form-item">
-              <el-select v-model="sizeForm.tableTitleFontSize" :placeholder="$t('chart.table_title_fontsize')" @change="changeBarSizeCase">
-                <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
-              </el-select>
-            </el-form-item>
-            <el-form-item :label="$t('chart.table_item_fontsize')" class="form-item">
-              <el-select v-model="sizeForm.tableItemFontSize" :placeholder="$t('chart.table_item_fontsize')" @change="changeBarSizeCase">
-                <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
-              </el-select>
-            </el-form-item>
-            <el-form-item :label="$t('chart.table_title_height')" class="form-item">
-              <el-slider v-model="sizeForm.tableTitleHeight" :min="36" :max="100" show-input :show-input-controls="false" input-size="mini" @change="changeBarSizeCase" />
-            </el-form-item>
-            <el-form-item :label="$t('chart.table_item_height')" class="form-item">
-              <el-slider v-model="sizeForm.tableItemHeight" :min="36" :max="100" show-input :show-input-controls="false" input-size="mini" @change="changeBarSizeCase" />
-            </el-form-item>
-          </el-form>
+      <el-form v-show="chart.type && chart.type.includes('table')" ref="sizeFormPie" :disabled="param && !hasDataPermission('manage',param.privileges)" :model="sizeForm" label-width="100px" size="mini">
+        <el-form-item :label="$t('chart.table_title_fontsize')" class="form-item">
+          <el-select v-model="sizeForm.tableTitleFontSize" :placeholder="$t('chart.table_title_fontsize')" @change="changeBarSizeCase">
+            <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('chart.table_item_fontsize')" class="form-item">
+          <el-select v-model="sizeForm.tableItemFontSize" :placeholder="$t('chart.table_item_fontsize')" @change="changeBarSizeCase">
+            <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('chart.table_title_height')" class="form-item">
+          <el-slider v-model="sizeForm.tableTitleHeight" :min="36" :max="100" show-input :show-input-controls="false" input-size="mini" @change="changeBarSizeCase" />
+        </el-form-item>
+        <el-form-item :label="$t('chart.table_item_height')" class="form-item">
+          <el-slider v-model="sizeForm.tableItemHeight" :min="36" :max="100" show-input :show-input-controls="false" input-size="mini" @change="changeBarSizeCase" />
+        </el-form-item>
+      </el-form>
 
-          <el-form v-show="chart.type && chart.type.includes('gauge')" ref="sizeFormGauge" :model="sizeForm" label-width="100px" size="mini">
-            <el-form-item :label="$t('chart.min')" class="form-item form-item-slider">
-              <el-input-number v-model="sizeForm.gaugeMin" size="mini" @change="changeBarSizeCase" />
-            </el-form-item>
-            <el-form-item :label="$t('chart.max')" class="form-item form-item-slider">
-              <el-input-number v-model="sizeForm.gaugeMax" size="mini" @change="changeBarSizeCase" />
-            </el-form-item>
-            <el-form-item :label="$t('chart.start_angle')" class="form-item form-item-slider">
-              <el-slider v-model="sizeForm.gaugeStartAngle" show-input :show-input-controls="false" input-size="mini" :min="-360" :max="360" @change="changeBarSizeCase" />
-            </el-form-item>
-            <el-form-item :label="$t('chart.end_angle')" class="form-item form-item-slider">
-              <el-slider v-model="sizeForm.gaugeEndAngle" show-input :show-input-controls="false" input-size="mini" :min="-360" :max="360" @change="changeBarSizeCase" />
-            </el-form-item>
-          </el-form>
+      <el-form v-show="chart.type && chart.type.includes('gauge')" ref="sizeFormGauge" :disabled="param && !hasDataPermission('manage',param.privileges)" :model="sizeForm" label-width="100px" size="mini">
+        <el-form-item :label="$t('chart.min')" class="form-item form-item-slider">
+          <el-input-number v-model="sizeForm.gaugeMin" size="mini" @change="changeBarSizeCase" />
+        </el-form-item>
+        <el-form-item :label="$t('chart.max')" class="form-item form-item-slider">
+          <el-input-number v-model="sizeForm.gaugeMax" size="mini" @change="changeBarSizeCase" />
+        </el-form-item>
+        <el-form-item :label="$t('chart.start_angle')" class="form-item form-item-slider">
+          <el-slider v-model="sizeForm.gaugeStartAngle" show-input :show-input-controls="false" input-size="mini" :min="-360" :max="360" @change="changeBarSizeCase" />
+        </el-form-item>
+        <el-form-item :label="$t('chart.end_angle')" class="form-item form-item-slider">
+          <el-slider v-model="sizeForm.gaugeEndAngle" show-input :show-input-controls="false" input-size="mini" :min="-360" :max="360" @change="changeBarSizeCase" />
+        </el-form-item>
+      </el-form>
 
-          <el-form v-show="chart.type && chart.type.includes('text')" ref="sizeFormPie" :model="sizeForm" label-width="100px" size="mini">
-            <el-form-item :label="$t('chart.dimension_show')" class="form-item">
-              <el-checkbox v-model="sizeForm.dimensionShow" @change="changeBarSizeCase">{{ $t('chart.show') }}</el-checkbox>
-            </el-form-item>
-            <el-form-item :label="$t('chart.dimension_font_size')" class="form-item">
-              <el-select v-model="sizeForm.dimensionFontSize" :placeholder="$t('chart.dimension_font_size')" @change="changeBarSizeCase">
-                <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
-              </el-select>
-            </el-form-item>
-            <el-form-item :label="$t('chart.quota_show')" class="form-item">
-              <el-checkbox v-model="sizeForm.quotaShow" @change="changeBarSizeCase">{{ $t('chart.show') }}</el-checkbox>
-            </el-form-item>
-            <el-form-item :label="$t('chart.quota_font_size')" class="form-item">
-              <el-select v-model="sizeForm.quotaFontSize" :placeholder="$t('chart.quota_font_size')" @change="changeBarSizeCase">
-                <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
-              </el-select>
-            </el-form-item>
-            <el-form-item :label="$t('chart.space_split')" class="form-item">
-              <el-input-number v-model="sizeForm.spaceSplit" size="mini" @change="changeBarSizeCase" />
-            </el-form-item>
-          </el-form>
-        </el-col>
+      <el-form v-show="chart.type && chart.type.includes('text')" ref="sizeFormPie" :disabled="param && !hasDataPermission('manage',param.privileges)" :model="sizeForm" label-width="100px" size="mini">
+        <el-form-item :label="$t('chart.dimension_show')" class="form-item">
+          <el-checkbox v-model="sizeForm.dimensionShow" @change="changeBarSizeCase">{{ $t('chart.show') }}</el-checkbox>
+        </el-form-item>
+        <el-form-item :label="$t('chart.dimension_font_size')" class="form-item">
+          <el-select v-model="sizeForm.dimensionFontSize" :placeholder="$t('chart.dimension_font_size')" @change="changeBarSizeCase">
+            <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('chart.quota_show')" class="form-item">
+          <el-checkbox v-model="sizeForm.quotaShow" @change="changeBarSizeCase">{{ $t('chart.show') }}</el-checkbox>
+        </el-form-item>
+        <el-form-item :label="$t('chart.quota_font_size')" class="form-item">
+          <el-select v-model="sizeForm.quotaFontSize" :placeholder="$t('chart.quota_font_size')" @change="changeBarSizeCase">
+            <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('chart.space_split')" class="form-item">
+          <el-input-number v-model="sizeForm.spaceSplit" size="mini" @change="changeBarSizeCase" />
+        </el-form-item>
+      </el-form>
+    </el-col>
+    <!--      <el-popover-->
+    <!--        placement="right"-->
+    <!--        width="400"-->
+    <!--        trigger="click"-->
+    <!--      >-->
+    <!--        <el-col>-->
+    <!--          <el-form v-show="chart.type && chart.type.includes('bar')" ref="sizeFormBar" :model="sizeForm" label-width="80px" size="mini">-->
+    <!--            <el-form-item :label="$t('chart.adapt')" class="form-item">-->
+    <!--              <el-checkbox v-model="sizeForm.barDefault" @change="changeBarSizeCase">{{ $t('chart.adapt') }}</el-checkbox>-->
+    <!--            </el-form-item>-->
+    <!--            <el-form-item :label="$t('chart.bar_width')" class="form-item form-item-slider">-->
+    <!--              <el-slider v-model="sizeForm.barWidth" :disabled="sizeForm.barDefault" show-input :show-input-controls="false" input-size="mini" :min="1" :max="80" @change="changeBarSizeCase" />-->
+    <!--            </el-form-item>-->
+    <!--            <el-form-item :label="$t('chart.bar_gap')" class="form-item form-item-slider">-->
+    <!--              <el-slider v-model="sizeForm.barGap" :disabled="sizeForm.barDefault" show-input :show-input-controls="false" input-size="mini" :min="0" :max="5" :step="0.1" @change="changeBarSizeCase" />-->
+    <!--            </el-form-item>-->
+    <!--          </el-form>-->
 
-        <el-button slot="reference" :disabled="!hasDataPermission('manage',param.privileges)" size="mini" class="shape-item">{{ $t('chart.size') }}<i class="el-icon-setting el-icon--right" /></el-button>
-      </el-popover>
-    </div>
+    <!--          <el-form v-show="chart.type && chart.type.includes('line')" ref="sizeFormLine" :model="sizeForm" label-width="80px" size="mini">-->
+    <!--            <el-form-item :label="$t('chart.line_width')" class="form-item form-item-slider">-->
+    <!--              <el-slider v-model="sizeForm.lineWidth" show-input :show-input-controls="false" input-size="mini" :min="0" :max="10" @change="changeBarSizeCase" />-->
+    <!--            </el-form-item>-->
+    <!--            <el-form-item :label="$t('chart.line_type')" class="form-item">-->
+    <!--              <el-radio-group v-model="sizeForm.lineType" @change="changeBarSizeCase">-->
+    <!--                <el-radio-button label="solid">{{ $t('chart.line_type_solid') }}</el-radio-button>-->
+    <!--                <el-radio-button label="dashed">{{ $t('chart.line_type_dashed') }}</el-radio-button>-->
+    <!--              </el-radio-group>-->
+    <!--            </el-form-item>-->
+    <!--            <el-form-item :label="$t('chart.line_symbol')" class="form-item">-->
+    <!--              <el-select v-model="sizeForm.lineSymbol" :placeholder="$t('chart.line_symbol')" @change="changeBarSizeCase">-->
+    <!--                <el-option-->
+    <!--                  v-for="item in lineSymbolOptions"-->
+    <!--                  :key="item.value"-->
+    <!--                  :label="item.name"-->
+    <!--                  :value="item.value"-->
+    <!--                />-->
+    <!--              </el-select>-->
+    <!--            </el-form-item>-->
+    <!--            <el-form-item :label="$t('chart.line_symbol_size')" class="form-item form-item-slider">-->
+    <!--              <el-slider v-model="sizeForm.lineSymbolSize" show-input :show-input-controls="false" input-size="mini" :min="0" :max="20" @change="changeBarSizeCase" />-->
+    <!--            </el-form-item>-->
+    <!--            <el-form-item :label="$t('chart.line_smooth')" class="form-item">-->
+    <!--              <el-checkbox v-model="sizeForm.lineSmooth" @change="changeBarSizeCase">{{ $t('chart.line_smooth') }}</el-checkbox>-->
+    <!--            </el-form-item>-->
+    <!--            <el-form-item :label="$t('chart.line_area')" class="form-item">-->
+    <!--              <el-checkbox v-model="sizeForm.lineArea" @change="changeBarSizeCase">{{ $t('chart.show') }}</el-checkbox>-->
+    <!--            </el-form-item>-->
+    <!--          </el-form>-->
+
+    <!--          <el-form v-show="chart.type && chart.type.includes('pie')" ref="sizeFormPie" :model="sizeForm" label-width="80px" size="mini">-->
+    <!--            <el-form-item :label="$t('chart.pie_inner_radius')" class="form-item form-item-slider">-->
+    <!--              <el-slider v-model="sizeForm.pieInnerRadius" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase" />-->
+    <!--            </el-form-item>-->
+    <!--            <el-form-item :label="$t('chart.pie_outer_radius')" class="form-item form-item-slider">-->
+    <!--              <el-slider v-model="sizeForm.pieOuterRadius" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase" />-->
+    <!--            </el-form-item>-->
+
+    <!--            <span v-show="chart.type && chart.type.includes('pie-rose')">-->
+    <!--              <el-form-item :label="$t('chart.rose_type')" class="form-item">-->
+    <!--                <el-radio-group v-model="sizeForm.pieRoseType" size="mini" @change="changeBarSizeCase">-->
+    <!--                  <el-radio-button label="radius">{{ $t('chart.radius_mode') }}</el-radio-button>-->
+    <!--                  <el-radio-button label="area">{{ $t('chart.area_mode') }}</el-radio-button>-->
+    <!--                </el-radio-group>-->
+    <!--              </el-form-item>-->
+    <!--              <el-form-item :label="$t('chart.rose_radius')" class="form-item form-item-slider">-->
+    <!--                <el-slider v-model="sizeForm.pieRoseRadius" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase" />-->
+    <!--              </el-form-item>-->
+    <!--            </span>-->
+    <!--          </el-form>-->
+
+    <!--          <el-form v-show="chart.type && chart.type.includes('funnel')" ref="sizeFormPie" :model="sizeForm" label-width="80px" size="mini">-->
+    <!--            <el-form-item :label="$t('chart.funnel_width')" class="form-item form-item-slider">-->
+    <!--              <el-slider v-model="sizeForm.funnelWidth" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase" />-->
+    <!--            </el-form-item>-->
+    <!--          </el-form>-->
+
+    <!--          <el-form v-show="chart.type && chart.type.includes('radar')" ref="sizeFormPie" :model="sizeForm" label-width="80px" size="mini">-->
+    <!--            <el-form-item :label="$t('chart.shape')" class="form-item">-->
+    <!--              <el-radio-group v-model="sizeForm.radarShape" size="mini" @change="changeBarSizeCase">-->
+    <!--                <el-radio-button label="polygon">{{ $t('chart.polygon') }}</el-radio-button>-->
+    <!--                <el-radio-button label="circle">{{ $t('chart.circle') }}</el-radio-button>-->
+    <!--              </el-radio-group>-->
+    <!--            </el-form-item>-->
+    <!--          </el-form>-->
+
+    <!--          <el-form v-show="chart.type && chart.type.includes('table')" ref="sizeFormPie" :model="sizeForm" label-width="100px" size="mini">-->
+    <!--            <el-form-item :label="$t('chart.table_title_fontsize')" class="form-item">-->
+    <!--              <el-select v-model="sizeForm.tableTitleFontSize" :placeholder="$t('chart.table_title_fontsize')" @change="changeBarSizeCase">-->
+    <!--                <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />-->
+    <!--              </el-select>-->
+    <!--            </el-form-item>-->
+    <!--            <el-form-item :label="$t('chart.table_item_fontsize')" class="form-item">-->
+    <!--              <el-select v-model="sizeForm.tableItemFontSize" :placeholder="$t('chart.table_item_fontsize')" @change="changeBarSizeCase">-->
+    <!--                <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />-->
+    <!--              </el-select>-->
+    <!--            </el-form-item>-->
+    <!--            <el-form-item :label="$t('chart.table_title_height')" class="form-item">-->
+    <!--              <el-slider v-model="sizeForm.tableTitleHeight" :min="36" :max="100" show-input :show-input-controls="false" input-size="mini" @change="changeBarSizeCase" />-->
+    <!--            </el-form-item>-->
+    <!--            <el-form-item :label="$t('chart.table_item_height')" class="form-item">-->
+    <!--              <el-slider v-model="sizeForm.tableItemHeight" :min="36" :max="100" show-input :show-input-controls="false" input-size="mini" @change="changeBarSizeCase" />-->
+    <!--            </el-form-item>-->
+    <!--          </el-form>-->
+
+    <!--          <el-form v-show="chart.type && chart.type.includes('gauge')" ref="sizeFormGauge" :model="sizeForm" label-width="100px" size="mini">-->
+    <!--            <el-form-item :label="$t('chart.min')" class="form-item form-item-slider">-->
+    <!--              <el-input-number v-model="sizeForm.gaugeMin" size="mini" @change="changeBarSizeCase" />-->
+    <!--            </el-form-item>-->
+    <!--            <el-form-item :label="$t('chart.max')" class="form-item form-item-slider">-->
+    <!--              <el-input-number v-model="sizeForm.gaugeMax" size="mini" @change="changeBarSizeCase" />-->
+    <!--            </el-form-item>-->
+    <!--            <el-form-item :label="$t('chart.start_angle')" class="form-item form-item-slider">-->
+    <!--              <el-slider v-model="sizeForm.gaugeStartAngle" show-input :show-input-controls="false" input-size="mini" :min="-360" :max="360" @change="changeBarSizeCase" />-->
+    <!--            </el-form-item>-->
+    <!--            <el-form-item :label="$t('chart.end_angle')" class="form-item form-item-slider">-->
+    <!--              <el-slider v-model="sizeForm.gaugeEndAngle" show-input :show-input-controls="false" input-size="mini" :min="-360" :max="360" @change="changeBarSizeCase" />-->
+    <!--            </el-form-item>-->
+    <!--          </el-form>-->
+
+    <!--          <el-form v-show="chart.type && chart.type.includes('text')" ref="sizeFormPie" :model="sizeForm" label-width="100px" size="mini">-->
+    <!--            <el-form-item :label="$t('chart.dimension_show')" class="form-item">-->
+    <!--              <el-checkbox v-model="sizeForm.dimensionShow" @change="changeBarSizeCase">{{ $t('chart.show') }}</el-checkbox>-->
+    <!--            </el-form-item>-->
+    <!--            <el-form-item :label="$t('chart.dimension_font_size')" class="form-item">-->
+    <!--              <el-select v-model="sizeForm.dimensionFontSize" :placeholder="$t('chart.dimension_font_size')" @change="changeBarSizeCase">-->
+    <!--                <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />-->
+    <!--              </el-select>-->
+    <!--            </el-form-item>-->
+    <!--            <el-form-item :label="$t('chart.quota_show')" class="form-item">-->
+    <!--              <el-checkbox v-model="sizeForm.quotaShow" @change="changeBarSizeCase">{{ $t('chart.show') }}</el-checkbox>-->
+    <!--            </el-form-item>-->
+    <!--            <el-form-item :label="$t('chart.quota_font_size')" class="form-item">-->
+    <!--              <el-select v-model="sizeForm.quotaFontSize" :placeholder="$t('chart.quota_font_size')" @change="changeBarSizeCase">-->
+    <!--                <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />-->
+    <!--              </el-select>-->
+    <!--            </el-form-item>-->
+    <!--            <el-form-item :label="$t('chart.space_split')" class="form-item">-->
+    <!--              <el-input-number v-model="sizeForm.spaceSplit" size="mini" @change="changeBarSizeCase" />-->
+    <!--            </el-form-item>-->
+    <!--          </el-form>-->
+    <!--        </el-col>-->
+
+    <!--        <el-button slot="reference" :disabled="!hasDataPermission('manage',param.privileges)" size="mini" class="shape-item">{{ $t('chart.size') }}<i class="el-icon-setting el-icon&#45;&#45;right" /></el-button>-->
+    <!--      </el-popover>-->
   </div>
 </template>
 
diff --git a/frontend/src/views/chart/components/shape-attr/TooltipSelector.vue b/frontend/src/views/chart/components/shape-attr/TooltipSelector.vue
index 6160b55a01..02088808d3 100644
--- a/frontend/src/views/chart/components/shape-attr/TooltipSelector.vue
+++ b/frontend/src/views/chart/components/shape-attr/TooltipSelector.vue
@@ -1,72 +1,121 @@
 <template>
-  <div>
-    <div style="width: 100%">
-      <el-popover
-        v-model="isSetting"
-        placement="right"
-        width="400"
-        trigger="click"
-      >
-        <el-col>
-          <el-form ref="tooltipForm" :model="tooltipForm" label-width="80px" size="mini">
-            <!--            <el-form-item :label="$t('chart.show')" class="form-item">-->
-            <!--              <el-checkbox v-model="tooltipForm.show" @change="changeTooltipAttr">{{ $t('chart.show') }}</el-checkbox>-->
-            <!--            </el-form-item>-->
-            <el-form-item :label="$t('chart.trigger_position')" class="form-item">
-              <el-radio-group v-model="tooltipForm.trigger" size="mini" @change="changeTooltipAttr">
-                <el-radio-button label="item">{{ $t('chart.tooltip_item') }}</el-radio-button>
-                <el-radio-button label="axis">{{ $t('chart.tooltip_axis') }}</el-radio-button>
-              </el-radio-group>
-            </el-form-item>
-            <el-form-item :label="$t('chart.text_fontsize')" class="form-item">
-              <el-select v-model="tooltipForm.textStyle.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeTooltipAttr">
-                <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
-              </el-select>
-            </el-form-item>
-            <el-form-item :label="$t('chart.text_color')" class="form-item">
-              <colorPicker v-model="tooltipForm.textStyle.color" style="margin-top: 6px;cursor: pointer;z-index: 999;border: solid 1px black" @change="changeTooltipAttr" />
-            </el-form-item>
-            <el-form-item class="form-item">
-              <span slot="label">
-                <span class="span-box">
-                  <span>{{ $t('chart.content_formatter') }}</span>
-                  <el-tooltip class="item" effect="dark" placement="bottom">
-                    <div slot="content">
-                      模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等。
-                      <br>
-                      在 trigger 为 'axis' 的时候，会有多个系列的数据，此时可以通过 {a0}, {a1}, {a2} 这种后面加索引的方式表示系列的索引。
-                      <br>
-                      不同图表类型下的 {a}，{b}，{c}，{d} 含义不一样。 其中变量{a}, {b}, {c}, {d}在不同图表类型下代表数据含义为：
-                      <br><br>
-                      折线（区域）图、柱状（条形）图、K线图 : {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）
-                      <br>
-                      散点图（气泡）图 : {a}（系列名称），{b}（数据名称），{c}（数值数组）, {d}（无）
-                      <br>
-                      地图 : {a}（系列名称），{b}（区域名称），{c}（合并数值）, {d}（无）
-                      <br>
-                      饼图、仪表板、漏斗图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
-                    </div>
-                    <i class="el-icon-info" style="cursor: pointer;" />
-                  </el-tooltip>
-                </span>
+  <div style="width: 100%">
+    <el-col>
+      <el-form ref="tooltipForm" :model="tooltipForm" label-width="80px" size="mini" :disabled="!hasDataPermission('manage',param.privileges)">
+        <el-form-item :label="$t('chart.show')" class="form-item">
+          <el-checkbox v-model="tooltipForm.show" @change="changeTooltipAttr">{{ $t('chart.show') }}</el-checkbox>
+        </el-form-item>
+        <div v-show="tooltipForm.show">
+          <el-form-item :label="$t('chart.trigger_position')" class="form-item">
+            <el-radio-group v-model="tooltipForm.trigger" size="mini" @change="changeTooltipAttr">
+              <el-radio-button label="item">{{ $t('chart.tooltip_item') }}</el-radio-button>
+              <el-radio-button label="axis">{{ $t('chart.tooltip_axis') }}</el-radio-button>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item :label="$t('chart.text_fontsize')" class="form-item">
+            <el-select v-model="tooltipForm.textStyle.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeTooltipAttr">
+              <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
+            </el-select>
+          </el-form-item>
+          <el-form-item :label="$t('chart.text_color')" class="form-item">
+            <el-color-picker v-model="tooltipForm.textStyle.color" class="color-picker-style" @change="changeTooltipAttr" />
+          </el-form-item>
+          <el-form-item class="form-item">
+            <span slot="label">
+              <span class="span-box">
+                <span>{{ $t('chart.content_formatter') }}</span>
+                <el-tooltip class="item" effect="dark" placement="bottom">
+                  <div slot="content">
+                    模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等。
+                    <br>
+                    在 trigger 为 'axis' 的时候，会有多个系列的数据，此时可以通过 {a0}, {a1}, {a2} 这种后面加索引的方式表示系列的索引。
+                    <br>
+                    不同图表类型下的 {a}，{b}，{c}，{d} 含义不一样。 其中变量{a}, {b}, {c}, {d}在不同图表类型下代表数据含义为：
+                    <br><br>
+                    折线（区域）图、柱状（条形）图、K线图 : {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）
+                    <br>
+                    散点图（气泡）图 : {a}（系列名称），{b}（数据名称），{c}（数值数组）, {d}（无）
+                    <br>
+                    地图 : {a}（系列名称），{b}（区域名称），{c}（合并数值）, {d}（无）
+                    <br>
+                    饼图、仪表板、漏斗图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
+                  </div>
+                  <i class="el-icon-info" style="cursor: pointer;" />
+                </el-tooltip>
               </span>
-              <el-input v-model="tooltipForm.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" :placeholder="$t('chart.formatter_plc')" @blur="changeTooltipAttr" />
-            </el-form-item>
-          </el-form>
-        </el-col>
+            </span>
+            <el-input v-model="tooltipForm.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" :placeholder="$t('chart.formatter_plc')" @blur="changeTooltipAttr" />
+          </el-form-item>
+        </div>
+      </el-form>
+    </el-col>
+    <!--    <div style="width: 100%">-->
+    <!--      <el-popover-->
+    <!--        v-model="isSetting"-->
+    <!--        placement="right"-->
+    <!--        width="400"-->
+    <!--        trigger="click"-->
+    <!--      >-->
+    <!--        <el-col>-->
+    <!--          <el-form ref="tooltipForm" :model="tooltipForm" label-width="80px" size="mini">-->
+    <!--            &lt;!&ndash;            <el-form-item :label="$t('chart.show')" class="form-item">&ndash;&gt;-->
+    <!--            &lt;!&ndash;              <el-checkbox v-model="tooltipForm.show" @change="changeTooltipAttr">{{ $t('chart.show') }}</el-checkbox>&ndash;&gt;-->
+    <!--            &lt;!&ndash;            </el-form-item>&ndash;&gt;-->
+    <!--            <el-form-item :label="$t('chart.trigger_position')" class="form-item">-->
+    <!--              <el-radio-group v-model="tooltipForm.trigger" size="mini" @change="changeTooltipAttr">-->
+    <!--                <el-radio-button label="item">{{ $t('chart.tooltip_item') }}</el-radio-button>-->
+    <!--                <el-radio-button label="axis">{{ $t('chart.tooltip_axis') }}</el-radio-button>-->
+    <!--              </el-radio-group>-->
+    <!--            </el-form-item>-->
+    <!--            <el-form-item :label="$t('chart.text_fontsize')" class="form-item">-->
+    <!--              <el-select v-model="tooltipForm.textStyle.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeTooltipAttr">-->
+    <!--                <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />-->
+    <!--              </el-select>-->
+    <!--            </el-form-item>-->
+    <!--            <el-form-item :label="$t('chart.text_color')" class="form-item">-->
+    <!--              <colorPicker v-model="tooltipForm.textStyle.color" style="margin-top: 6px;cursor: pointer;z-index: 999;border: solid 1px black" @change="changeTooltipAttr" />-->
+    <!--            </el-form-item>-->
+    <!--            <el-form-item class="form-item">-->
+    <!--              <span slot="label">-->
+    <!--                <span class="span-box">-->
+    <!--                  <span>{{ $t('chart.content_formatter') }}</span>-->
+    <!--                  <el-tooltip class="item" effect="dark" placement="bottom">-->
+    <!--                    <div slot="content">-->
+    <!--                      模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等。-->
+    <!--                      <br>-->
+    <!--                      在 trigger 为 'axis' 的时候，会有多个系列的数据，此时可以通过 {a0}, {a1}, {a2} 这种后面加索引的方式表示系列的索引。-->
+    <!--                      <br>-->
+    <!--                      不同图表类型下的 {a}，{b}，{c}，{d} 含义不一样。 其中变量{a}, {b}, {c}, {d}在不同图表类型下代表数据含义为：-->
+    <!--                      <br><br>-->
+    <!--                      折线（区域）图、柱状（条形）图、K线图 : {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）-->
+    <!--                      <br>-->
+    <!--                      散点图（气泡）图 : {a}（系列名称），{b}（数据名称），{c}（数值数组）, {d}（无）-->
+    <!--                      <br>-->
+    <!--                      地图 : {a}（系列名称），{b}（区域名称），{c}（合并数值）, {d}（无）-->
+    <!--                      <br>-->
+    <!--                      饼图、仪表板、漏斗图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）-->
+    <!--                    </div>-->
+    <!--                    <i class="el-icon-info" style="cursor: pointer;" />-->
+    <!--                  </el-tooltip>-->
+    <!--                </span>-->
+    <!--              </span>-->
+    <!--              <el-input v-model="tooltipForm.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" :placeholder="$t('chart.formatter_plc')" @blur="changeTooltipAttr" />-->
+    <!--            </el-form-item>-->
+    <!--          </el-form>-->
+    <!--        </el-col>-->
 
-        <el-button slot="reference" size="mini" class="shape-item" :disabled="!tooltipForm.show || !hasDataPermission('manage',param.privileges)">
-          {{ $t('chart.tooltip') }}<i class="el-icon-setting el-icon--right" />
-          <el-switch
-            v-model="tooltipForm.show"
-            :disabled="!hasDataPermission('manage',param.privileges)"
-            class="switch-style"
-            @click.stop.native
-            @change="changeTooltipAttr"
-          />
-        </el-button>
-      </el-popover>
-    </div>
+    <!--        <el-button slot="reference" size="mini" class="shape-item" :disabled="!tooltipForm.show || !hasDataPermission('manage',param.privileges)">-->
+    <!--          {{ $t('chart.tooltip') }}<i class="el-icon-setting el-icon&#45;&#45;right" />-->
+    <!--          <el-switch-->
+    <!--            v-model="tooltipForm.show"-->
+    <!--            :disabled="!hasDataPermission('manage',param.privileges)"-->
+    <!--            class="switch-style"-->
+    <!--            @click.stop.native-->
+    <!--            @change="changeTooltipAttr"-->
+    <!--          />-->
+    <!--        </el-button>-->
+    <!--      </el-popover>-->
+    <!--    </div>-->
   </div>
 </template>
 
@@ -165,4 +214,8 @@ export default {
   right: 10px;
   margin-top: -4px;
 }
+.color-picker-style{
+  cursor: pointer;
+  z-index: 1003;
+}
 </style>
diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue
index b953a6fb1e..5265fc7905 100644
--- a/frontend/src/views/chart/view/ChartEdit.vue
+++ b/frontend/src/views/chart/view/ChartEdit.vue
@@ -330,37 +330,73 @@
           </el-row>
         </el-tab-pane>
         <el-tab-pane :label="$t('chart.chart_style')" class="padding-tab" style="width: 360px;">
-          <div style="overflow:auto;border-right: 1px solid #e6e6e6;height: 100%;" class="attr-style">
-            <el-row class="padding-lr">
-              <span>{{ $t('chart.style_priority') }}</span>
-              <el-row>
-                <el-radio-group v-model="view.stylePriority" :disabled="!hasDataPermission('manage',param.privileges)" size="mini" @change="save">
-                  <el-radio label="view"><span>{{ $t('chart.chart') }}</span></el-radio>
-                  <el-radio label="panel"><span>{{ $t('chart.dashboard') }}</span></el-radio>
-                </el-radio-group>
+          <el-row class="view-panel">
+            <div style="overflow:auto;border-right: 1px solid #e6e6e6;height: 100%;width: 100%;" class="attr-style">
+              <el-row class="padding-lr">
+                <span>{{ $t('chart.style_priority') }}</span>
+                <el-row>
+                  <el-radio-group v-model="view.stylePriority" :disabled="!hasDataPermission('manage',param.privileges)" size="mini" @change="save">
+                    <el-radio label="view"><span>{{ $t('chart.chart') }}</span></el-radio>
+                    <el-radio label="panel"><span>{{ $t('chart.dashboard') }}</span></el-radio>
+                  </el-radio-group>
+                </el-row>
               </el-row>
-            </el-row>
-            <el-row class="padding-lr">
-              <span>{{ $t('chart.shape_attr') }}</span>
               <el-row>
-                <color-selector :param="param" class="attr-selector" :chart="chart" @onColorChange="onColorChange" />
-                <size-selector v-show="chart.type !== 'map'" :param="param" class="attr-selector" :chart="chart" @onSizeChange="onSizeChange" />
-                <label-selector v-show="!view.type.includes('table') && !view.type.includes('text')" :param="param" class="attr-selector" :chart="chart" @onLabelChange="onLabelChange" />
-                <tooltip-selector v-show="!view.type.includes('table') && !view.type.includes('text')" :param="param" class="attr-selector" :chart="chart" @onTooltipChange="onTooltipChange" />
+                <span class="padding-lr">{{ $t('chart.shape_attr') }}</span>
+                <el-collapse v-model="attrActiveNames" class="style-collapse">
+                  <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'" 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')" name="label" :title="$t('chart.label')">
+                    <label-selector :param="param" class="attr-selector" :chart="chart" @onLabelChange="onLabelChange" />
+                  </el-collapse-item>
+                  <el-collapse-item v-show="!view.type.includes('table') && !view.type.includes('text')" name="tooltip" :title="$t('chart.tooltip')">
+                    <tooltip-selector :param="param" class="attr-selector" :chart="chart" @onTooltipChange="onTooltipChange" />
+                  </el-collapse-item>
+                </el-collapse>
+                <!--              <el-row>-->
+                <!--                <color-selector :param="param" class="attr-selector" :chart="chart" @onColorChange="onColorChange" />-->
+                <!--                <size-selector v-show="chart.type !== 'map'" :param="param" class="attr-selector" :chart="chart" @onSizeChange="onSizeChange" />-->
+                <!--                <label-selector v-show="!view.type.includes('table') && !view.type.includes('text')" :param="param" class="attr-selector" :chart="chart" @onLabelChange="onLabelChange" />-->
+                <!--                <tooltip-selector v-show="!view.type.includes('table') && !view.type.includes('text')" :param="param" class="attr-selector" :chart="chart" @onTooltipChange="onTooltipChange" />-->
+                <!--              </el-row>-->
               </el-row>
-            </el-row>
-            <el-row class="padding-lr">
-              <span>{{ $t('chart.module_style') }}</span>
               <el-row>
-                <x-axis-selector v-show="view.type && (view.type.includes('bar') || view.type.includes('line'))" :param="param" class="attr-selector" :chart="chart" @onChangeXAxisForm="onChangeXAxisForm" />
-                <y-axis-selector v-show="view.type && (view.type.includes('bar') || view.type.includes('line'))" :param="param" class="attr-selector" :chart="chart" @onChangeYAxisForm="onChangeYAxisForm" />
-                <split-selector v-show="view.type && view.type.includes('radar')" :param="param" class="attr-selector" :chart="chart" @onChangeSplitForm="onChangeSplitForm" />
-                <title-selector :param="param" class="attr-selector" :chart="chart" @onTextChange="onTextChange" />
-                <legend-selector v-show="view.type && !view.type.includes('map') && !view.type.includes('table') && !view.type.includes('text')" :param="param" class="attr-selector" :chart="chart" @onLegendChange="onLegendChange" />
-                <background-color-selector :param="param" class="attr-selector" :chart="chart" @onChangeBackgroundForm="onChangeBackgroundForm" />
+                <span class="padding-lr">{{ $t('chart.module_style') }}</span>
+                <el-collapse v-model="styleActiveNames" class="style-collapse">
+                  <el-collapse-item v-show="view.type && (view.type.includes('bar') || view.type.includes('line'))" name="xAxis" :title="$t('chart.xAxis')">
+                    <x-axis-selector :param="param" class="attr-selector" :chart="chart" @onChangeXAxisForm="onChangeXAxisForm" />
+                  </el-collapse-item>
+                  <el-collapse-item v-show="view.type && (view.type.includes('bar') || view.type.includes('line'))" name="yAxis" :title="$t('chart.yAxis')">
+                    <y-axis-selector :param="param" class="attr-selector" :chart="chart" @onChangeYAxisForm="onChangeYAxisForm" />
+                  </el-collapse-item>
+                  <el-collapse-item v-show="view.type && view.type.includes('radar')" name="split" :title="$t('chart.split')">
+                    <split-selector :param="param" class="attr-selector" :chart="chart" @onChangeSplitForm="onChangeSplitForm" />
+                  </el-collapse-item>
+                  <el-collapse-item name="title" :title="$t('chart.title')">
+                    <title-selector :param="param" class="attr-selector" :chart="chart" @onTextChange="onTextChange" />
+                  </el-collapse-item>
+                  <el-collapse-item v-show="view.type && !view.type.includes('map') && !view.type.includes('table') && !view.type.includes('text')" name="legend" :title="$t('chart.legend')">
+                    <legend-selector :param="param" class="attr-selector" :chart="chart" @onLegendChange="onLegendChange" />
+                  </el-collapse-item>
+                  <el-collapse-item name="background" :title="$t('chart.background')">
+                    <background-color-selector :param="param" class="attr-selector" :chart="chart" @onChangeBackgroundForm="onChangeBackgroundForm" />
+                  </el-collapse-item>
+                </el-collapse>
+                <!--              <el-row>-->
+                <!--                <x-axis-selector v-show="view.type && (view.type.includes('bar') || view.type.includes('line'))" :param="param" class="attr-selector" :chart="chart" @onChangeXAxisForm="onChangeXAxisForm" />-->
+                <!--                <y-axis-selector v-show="view.type && (view.type.includes('bar') || view.type.includes('line'))" :param="param" class="attr-selector" :chart="chart" @onChangeYAxisForm="onChangeYAxisForm" />-->
+                <!--                <split-selector v-show="view.type && view.type.includes('radar')" :param="param" class="attr-selector" :chart="chart" @onChangeSplitForm="onChangeSplitForm" />-->
+                <!--                <title-selector :param="param" class="attr-selector" :chart="chart" @onTextChange="onTextChange" />-->
+                <!--                <legend-selector v-show="view.type && !view.type.includes('map') && !view.type.includes('table') && !view.type.includes('text')" :param="param" class="attr-selector" :chart="chart" @onLegendChange="onLegendChange" />-->
+                <!--                <background-color-selector :param="param" class="attr-selector" :chart="chart" @onChangeBackgroundForm="onChangeBackgroundForm" />-->
+                <!--              </el-row>-->
               </el-row>
-            </el-row>
-          </div>
+            </div>
+          </el-row>
         </el-tab-pane>
       </el-tabs>
 
@@ -610,7 +646,9 @@ export default {
       editDsField: false,
       changeDsTitle: '',
       filterItem: {},
-      places: []
+      places: [],
+      attrActiveNames: [],
+      styleActiveNames: []
     }
   },
   computed: {
@@ -1452,14 +1490,25 @@ export default {
 
   .attr-selector{
     width:100%;
-    height: 32px;
-    margin:0 0 6px 0;
+    height: 100%;
+    margin:6px 0;
     padding:0 4px;
     display: flex;
     align-items: center;
     background-color: white
   }
 
+  .style-collapse>>>.el-collapse-item__content {
+    padding-bottom: 0!important;
+  }
+  .style-collapse>>>.el-collapse-item__header {
+    height: 34px;
+    line-height: 34px;
+    padding: 0 0 0 6px;
+    font-size: 12px;
+    font-weight: 400;
+  }
+
   .disabled-none-cursor{
     cursor: not-allowed;
     pointer-events:none;