feat:增加默认颜色等

frontend/src/icons/svg/more_v.svg

+<svg t="1634698675666" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2280" width="200" height="200"><path d="M437.333333 224C437.333333 183.466667 471.466667 149.333333 512 149.333333s74.666667 34.133333 74.666667 74.666667S552.533333 298.666667 512 298.666667s-74.666667-34.133333-74.666667-74.666667zM439.466667 512c0-40.533333 34.133333-74.666667 74.666666-74.666667s74.666667 34.133333 74.666667 74.666667-34.133333 74.666667-74.666667 74.666667-74.666667-34.133333-74.666666-74.666667zM437.333333 800c0-40.533333 34.133333-74.666667 74.666667-74.666667s74.666667 34.133333 74.666667 74.666667S552.533333 874.666667 512 874.666667s-74.666667-34.133333-74.666667-74.666667z" p-id="2281"></path></svg>

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

@@ -853,3 +853,16 @@ export const BASE_MIX = {
     }
   ]
 }
+
+export const COLOR_PANEL = [
+  '#ff4500',
+  '#ff8c00',
+  '#ffd700',
+  '#90ee90',
+  '#00ced1',
+  '#1e90ff',
+  '#c71585',
+  '#999999',
+  '#ffffff',
+  '#000000'
+]

frontend/src/views/chart/components/ChartComponentG2.vue

@@ -145,8 +145,6 @@ export default {
         this.myChart = baseAreaOptionAntV(this.myChart, this.chartId, chart, this.antVAction)
       } else if (chart.type === 'scatter') {
         this.myChart = baseScatterOptionAntV(this.myChart, this.chartId, chart, this.antVAction)
-      } else if (chart.type === 'chart-mix') {
-        this.myChart = baseMixOptionAntV(this.myChart, this.chartId, chart, this.antVAction)
       } else if (chart.type === 'radar') {
         this.myChart = baseRadarOptionAntV(this.myChart, this.chartId, chart, this.antVAction)
       } else if (chart.type === 'gauge') {

frontend/src/views/chart/components/component-style/BackgroundColorSelector.vue

@@ -3,7 +3,7 @@
     <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-color-picker v-model="colorForm.color" class="color-picker-style" :predefine="predefineColors" @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" />
@@ -18,7 +18,7 @@
 </template>
 
 <script>
-import { DEFAULT_BACKGROUND_COLOR } from '../../chart/chart'
+import { COLOR_PANEL, DEFAULT_BACKGROUND_COLOR } from '../../chart/chart'
 
 export default {
   name: 'BackgroundColorSelector',
@@ -34,7 +34,8 @@ export default {
   },
   data() {
     return {
-      colorForm: JSON.parse(JSON.stringify(DEFAULT_BACKGROUND_COLOR))
+      colorForm: JSON.parse(JSON.stringify(DEFAULT_BACKGROUND_COLOR)),
+      predefineColors: COLOR_PANEL
     }
   },
   watch: {

frontend/src/views/chart/components/component-style/LegendSelector.vue

@@ -28,7 +28,7 @@
             </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-color-picker v-model="legendForm.textStyle.color" class="color-picker-style" :predefine="predefineColors" @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">
@@ -51,7 +51,7 @@
 </template>
 
 <script>
-import { DEFAULT_LEGEND_STYLE } from '../../chart/chart'
+import { COLOR_PANEL, DEFAULT_LEGEND_STYLE } from '../../chart/chart'
 
 export default {
   name: 'LegendSelector',
@@ -77,7 +77,8 @@ export default {
         { name: this.$t('chart.line_symbol_triangle'), value: 'triangle' },
         { name: this.$t('chart.line_symbol_diamond'), value: 'diamond' }
       ],
-      isSetting: false
+      isSetting: false,
+      predefineColors: COLOR_PANEL
     }
   },
   watch: {

frontend/src/views/chart/components/component-style/LegendSelectorAntV.vue

@@ -28,7 +28,7 @@
             </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-color-picker v-model="legendForm.textStyle.color" class="color-picker-style" :predefine="predefineColors" @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">
@@ -51,7 +51,7 @@
 </template>
 
 <script>
-import { DEFAULT_LEGEND_STYLE } from '../../chart/chart'
+import { COLOR_PANEL, DEFAULT_LEGEND_STYLE } from '../../chart/chart'
 
 export default {
   name: 'LegendSelectorAntV',
@@ -75,7 +75,8 @@ export default {
         { name: this.$t('chart.line_symbol_triangle'), value: 'triangle' },
         { name: this.$t('chart.line_symbol_diamond'), value: 'diamond' }
       ],
-      isSetting: false
+      isSetting: false,
+      predefineColors: COLOR_PANEL
     }
   },
   watch: {

frontend/src/views/chart/components/component-style/SplitSelector.vue

@@ -6,7 +6,7 @@
           <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-color-picker v-model="splitForm.name.color" class="color-picker-style" :predefine="predefineColors" @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">
@@ -17,13 +17,13 @@
           <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-color-picker v-model="splitForm.axisLine.lineStyle.color" class="color-picker-style" :predefine="predefineColors" @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-color-picker v-model="splitForm.axisLabel.color" class="color-picker-style" :predefine="predefineColors" @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">
@@ -34,7 +34,7 @@
           <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-color-picker v-model="splitForm.splitLine.lineStyle.color" class="color-picker-style" :predefine="predefineColors" @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>
@@ -45,7 +45,7 @@
 </template>
 
 <script>
-import { DEFAULT_SPLIT } from '../../chart/chart'
+import { COLOR_PANEL, DEFAULT_SPLIT } from '../../chart/chart'
 
 export default {
   name: 'SplitSelector',
@@ -63,7 +63,8 @@ export default {
     return {
       splitForm: JSON.parse(JSON.stringify(DEFAULT_SPLIT)),
       isSetting: false,
-      fontSize: []
+      fontSize: [],
+      predefineColors: COLOR_PANEL
     }
   },
   watch: {

frontend/src/views/chart/components/component-style/SplitSelectorAntV.vue

@@ -6,7 +6,7 @@
           <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-color-picker v-model="splitForm.name.color" class="color-picker-style" :predefine="predefineColors" @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">
@@ -17,7 +17,7 @@
         <!--          <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-color-picker v-model="splitForm.axisLine.lineStyle.color" class="color-picker-style" :predefine="predefineColors" @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>-->
@@ -45,7 +45,7 @@
 </template>
 
 <script>
-import { DEFAULT_SPLIT } from '../../chart/chart'
+import { COLOR_PANEL, DEFAULT_SPLIT } from '../../chart/chart'
 
 export default {
   name: 'SplitSelectorAntV',
@@ -63,7 +63,8 @@ export default {
     return {
       splitForm: JSON.parse(JSON.stringify(DEFAULT_SPLIT)),
       isSetting: false,
-      fontSize: []
+      fontSize: [],
+      predefineColors: COLOR_PANEL
     }
   },
   watch: {

frontend/src/views/chart/components/component-style/TitleSelector.vue

@@ -22,7 +22,7 @@
             </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-color-picker v-model="titleForm.color" class="color-picker-style" :predefine="predefineColors" @change="changeTitleStyle" />
           </el-form-item>
           <el-form-item v-show="chart.type && chart.type !== 'liquid'" :label="$t('chart.text_h_position')" class="form-item">
             <el-radio-group v-model="titleForm.hPosition" size="mini" @change="changeTitleStyle">
@@ -49,7 +49,7 @@
 </template>
 
 <script>
-import { DEFAULT_TITLE_STYLE } from '../../chart/chart'
+import { COLOR_PANEL, DEFAULT_TITLE_STYLE } from '../../chart/chart'
 
 export default {
   name: 'TitleSelector',
@@ -67,7 +67,8 @@ export default {
     return {
       titleForm: JSON.parse(JSON.stringify(DEFAULT_TITLE_STYLE)),
       fontSize: [],
-      isSetting: false
+      isSetting: false,
+      predefineColors: COLOR_PANEL
     }
   },
   watch: {

frontend/src/views/chart/components/component-style/TitleSelectorAntV.vue

@@ -22,7 +22,7 @@
             </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-color-picker v-model="titleForm.color" class="color-picker-style" :predefine="predefineColors" @change="changeTitleStyle" />
           </el-form-item>
           <el-form-item v-show="chart.type && chart.type !== 'liquid'" :label="$t('chart.text_h_position')" class="form-item">
             <el-radio-group v-model="titleForm.hPosition" size="mini" @change="changeTitleStyle">
@@ -42,7 +42,7 @@
 </template>
 
 <script>
-import { DEFAULT_TITLE_STYLE } from '../../chart/chart'
+import { COLOR_PANEL, DEFAULT_TITLE_STYLE } from '../../chart/chart'
 
 export default {
   name: 'TitleSelectorAntV',
@@ -60,7 +60,8 @@ export default {
     return {
       titleForm: JSON.parse(JSON.stringify(DEFAULT_TITLE_STYLE)),
       fontSize: [],
-      isSetting: false
+      isSetting: false,
+      predefineColors: COLOR_PANEL
     }
   },
   watch: {

frontend/src/views/chart/components/component-style/XAxisSelector.vue

@@ -16,7 +16,7 @@
             <el-input v-model="axisForm.name" size="mini" @blur="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-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeXAxisStyle" />
           </el-form-item>
           <el-form-item :label="$t('chart.axis_name_fontsize')" class="form-item">
             <el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeXAxisStyle">
@@ -59,7 +59,7 @@
           </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-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" :predefine="predefineColors" @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" />
@@ -78,7 +78,7 @@
           </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-color-picker v-model="axisForm.axisLabel.color" class="el-color-picker" :predefine="predefineColors" @change="changeXAxisStyle" />
             </el-form-item>
             <el-form-item :label="$t('chart.axis_label_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" />
@@ -100,7 +100,7 @@
 </template>
 
 <script>
-import { DEFAULT_XAXIS_STYLE } from '../../chart/chart'
+import { COLOR_PANEL, DEFAULT_XAXIS_STYLE } from '../../chart/chart'
 
 export default {
   name: 'XAxisSelector',
@@ -118,7 +118,8 @@ export default {
     return {
       axisForm: JSON.parse(JSON.stringify(DEFAULT_XAXIS_STYLE)),
       isSetting: false,
-      fontSize: []
+      fontSize: [],
+      predefineColors: COLOR_PANEL
     }
   },
   watch: {

frontend/src/views/chart/components/component-style/XAxisSelectorAntV.vue

@@ -16,7 +16,7 @@
             <el-input v-model="axisForm.name" size="mini" @blur="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-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeXAxisStyle" />
           </el-form-item>
           <el-form-item :label="$t('chart.axis_name_fontsize')" class="form-item">
             <el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeXAxisStyle">
@@ -59,7 +59,7 @@
           </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-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" :predefine="predefineColors" @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" />
@@ -71,7 +71,7 @@
           </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-color-picker v-model="axisForm.axisLabel.color" class="el-color-picker" :predefine="predefineColors" @change="changeXAxisStyle" />
             </el-form-item>
             <el-form-item :label="$t('chart.axis_label_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" />
@@ -89,7 +89,7 @@
 </template>
 
 <script>
-import { DEFAULT_XAXIS_STYLE } from '../../chart/chart'
+import { COLOR_PANEL, DEFAULT_XAXIS_STYLE } from '../../chart/chart'
 
 export default {
   name: 'XAxisSelectorAntV',
@@ -107,7 +107,8 @@ export default {
     return {
       axisForm: JSON.parse(JSON.stringify(DEFAULT_XAXIS_STYLE)),
       isSetting: false,
-      fontSize: []
+      fontSize: [],
+      predefineColors: COLOR_PANEL
     }
   },
   watch: {

frontend/src/views/chart/components/component-style/YAxisExtSelector.vue

@@ -16,7 +16,7 @@
             <el-input v-model="axisForm.name" size="mini" @blur="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-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeYAxisStyle" />
           </el-form-item>
           <el-form-item :label="$t('chart.axis_name_fontsize')" class="form-item">
             <el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeYAxisStyle">
@@ -59,7 +59,7 @@
           </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-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" :predefine="predefineColors" @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" />
@@ -78,7 +78,7 @@
           </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-color-picker v-model="axisForm.axisLabel.color" class="el-color-picker" :predefine="predefineColors" @change="changeYAxisStyle" />
             </el-form-item>
             <el-form-item :label="$t('chart.axis_label_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" />
@@ -100,7 +100,7 @@
 </template>
 
 <script>
-import { DEFAULT_YAXIS_EXT_STYLE } from '../../chart/chart'
+import { COLOR_PANEL, DEFAULT_YAXIS_EXT_STYLE } from '../../chart/chart'
 
 export default {
   name: 'YAxisExtSelector',
@@ -118,7 +118,8 @@ export default {
     return {
       axisForm: JSON.parse(JSON.stringify(DEFAULT_YAXIS_EXT_STYLE)),
       isSetting: false,
-      fontSize: []
+      fontSize: [],
+      predefineColors: COLOR_PANEL
     }
   },
   watch: {

frontend/src/views/chart/components/component-style/YAxisExtSelectorAntV.vue

@@ -16,7 +16,7 @@
             <el-input v-model="axisForm.name" size="mini" @blur="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-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeYAxisStyle" />
           </el-form-item>
           <el-form-item :label="$t('chart.axis_name_fontsize')" class="form-item">
             <el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeYAxisStyle">
@@ -59,7 +59,7 @@
           </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-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" :predefine="predefineColors" @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" />
@@ -71,7 +71,7 @@
           </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-color-picker v-model="axisForm.axisLabel.color" class="el-color-picker" :predefine="predefineColors" @change="changeYAxisStyle" />
             </el-form-item>
             <el-form-item :label="$t('chart.axis_label_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" />
@@ -89,7 +89,7 @@
 </template>
 
 <script>
-import { DEFAULT_YAXIS_EXT_STYLE } from '../../chart/chart'
+import { COLOR_PANEL, DEFAULT_YAXIS_EXT_STYLE } from '../../chart/chart'
 
 export default {
   name: 'YAxisExtSelectorAntV',
@@ -107,7 +107,8 @@ export default {
     return {
       axisForm: JSON.parse(JSON.stringify(DEFAULT_YAXIS_EXT_STYLE)),
       isSetting: false,
-      fontSize: []
+      fontSize: [],
+      predefineColors: COLOR_PANEL
     }
   },
   watch: {

frontend/src/views/chart/components/component-style/YAxisSelector.vue

@@ -16,7 +16,7 @@
             <el-input v-model="axisForm.name" size="mini" @blur="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-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeYAxisStyle" />
           </el-form-item>
           <el-form-item :label="$t('chart.axis_name_fontsize')" class="form-item">
             <el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeYAxisStyle">
@@ -59,7 +59,7 @@
           </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-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" :predefine="predefineColors" @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" />
@@ -78,7 +78,7 @@
           </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-color-picker v-model="axisForm.axisLabel.color" class="el-color-picker" :predefine="predefineColors" @change="changeYAxisStyle" />
             </el-form-item>
             <el-form-item :label="$t('chart.axis_label_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" />
@@ -100,7 +100,7 @@
 </template>
 
 <script>
-import { DEFAULT_YAXIS_STYLE } from '../../chart/chart'
+import { COLOR_PANEL, DEFAULT_YAXIS_STYLE } from '../../chart/chart'
 
 export default {
   name: 'YAxisSelector',
@@ -118,7 +118,8 @@ export default {
     return {
       axisForm: JSON.parse(JSON.stringify(DEFAULT_YAXIS_STYLE)),
       isSetting: false,
-      fontSize: []
+      fontSize: [],
+      predefineColors: COLOR_PANEL
     }
   },
   watch: {

frontend/src/views/chart/components/component-style/YAxisSelectorAntV.vue

@@ -16,7 +16,7 @@
             <el-input v-model="axisForm.name" size="mini" @blur="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-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeYAxisStyle" />
           </el-form-item>
           <el-form-item :label="$t('chart.axis_name_fontsize')" class="form-item">
             <el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeYAxisStyle">
@@ -70,7 +70,7 @@
           </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-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" :predefine="predefineColors" @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" />
@@ -82,7 +82,7 @@
           </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-color-picker v-model="axisForm.axisLabel.color" class="el-color-picker" :predefine="predefineColors" @change="changeYAxisStyle" />
             </el-form-item>
             <el-form-item :label="$t('chart.axis_label_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" />
@@ -100,7 +100,7 @@
 </template>
 
 <script>
-import { DEFAULT_YAXIS_STYLE } from '../../chart/chart'
+import { COLOR_PANEL, DEFAULT_YAXIS_STYLE } from '../../chart/chart'
 
 export default {
   name: 'YAxisSelectorAntV',
@@ -118,7 +118,8 @@ export default {
     return {
       axisForm: JSON.parse(JSON.stringify(DEFAULT_YAXIS_STYLE)),
       isSetting: false,
-      fontSize: []
+      fontSize: [],
+      predefineColors: COLOR_PANEL
     }
   },
   watch: {

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

@@ -36,7 +36,7 @@
                 <div style="display: flex;align-items: center;margin-top: 10px;">
                   <span class="color-label" />
                   <span>
-                    <el-color-picker v-model="customColor" class="color-picker-style" @change="switchColorCase" />
+                    <el-color-picker v-model="customColor" class="color-picker-style" :predefine="predefineColors" @change="switchColorCase" />
                   </span>
                 </div>
               </div>
@@ -47,21 +47,21 @@
           </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-color-picker v-model="colorForm.quotaColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase" />
           </el-form-item>
           <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-color-picker v-model="colorForm.dimensionColor" class="color-picker-style" :predefine="predefineColors" @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-color-picker v-model="colorForm.tableHeaderBgColor" class="color-picker-style" :predefine="predefineColors" @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-color-picker v-model="colorForm.tableItemBgColor" class="color-picker-style" :predefine="predefineColors" @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-color-picker v-model="colorForm.tableFontColor" class="color-picker-style" :predefine="predefineColors" @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">-->
@@ -78,7 +78,7 @@
 </template>
 
 <script>
-import { DEFAULT_COLOR_CASE } from '../../chart/chart'
+import { COLOR_PANEL, DEFAULT_COLOR_CASE } from '../../chart/chart'
 
 export default {
   name: 'ColorSelector',
@@ -183,7 +183,8 @@ export default {
       ],
       colorForm: JSON.parse(JSON.stringify(DEFAULT_COLOR_CASE)),
       customColor: null,
-      colorIndex: 0
+      colorIndex: 0,
+      predefineColors: COLOR_PANEL
     }
   },
   watch: {

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

@@ -15,7 +15,7 @@
             </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-color-picker v-model="labelForm.color" class="color-picker-style" :predefine="predefineColors" @change="changeLabelAttr" />
           </el-form-item>
           <el-form-item v-show="chart.type && chart.type !== 'liquid'" :label="$t('chart.label_position')" class="form-item">
             <el-select v-model="labelForm.position" :placeholder="$t('chart.label_position')" @change="changeLabelAttr">
@@ -49,7 +49,7 @@
           </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-color-picker v-model="labelForm.color" class="color-picker-style" :predefine="predefineColors" @change="changeLabelAttr" />
         </el-form-item>
         <el-form-item class="form-item">
           <span slot="label">
@@ -65,7 +65,7 @@
 </template>
 
 <script>
-import { DEFAULT_LABEL } from '../../chart/chart'
+import { COLOR_PANEL, DEFAULT_LABEL } from '../../chart/chart'
 
 export default {
   name: 'LabelSelector',
@@ -92,7 +92,8 @@ export default {
         { name: this.$t('chart.text_pos_bottom'), value: 'bottom' },
         { name: this.$t('chart.text_pos_left'), value: 'left' },
         { name: this.$t('chart.text_pos_right'), value: 'right' }
-      ]
+      ],
+      predefineColors: COLOR_PANEL
     }
   },
   watch: {

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

@@ -15,7 +15,7 @@
             </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-color-picker v-model="labelForm.color" class="color-picker-style" :predefine="predefineColors" @change="changeLabelAttr" />
           </el-form-item>
           <el-form-item v-show="chart.type && chart.type !== 'liquid' && chart.type !== 'pie-rose'" :label="$t('chart.label_position')" class="form-item">
             <el-select v-model="labelForm.position" :placeholder="$t('chart.label_position')" @change="changeLabelAttr">
@@ -35,7 +35,7 @@
           </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-color-picker v-model="labelForm.color" class="color-picker-style" :predefine="predefineColors" @change="changeLabelAttr" />
         </el-form-item>
       </el-form>
     </el-col>
@@ -43,7 +43,7 @@
 </template>
 
 <script>
-import { DEFAULT_LABEL } from '../../chart/chart'
+import { COLOR_PANEL, DEFAULT_LABEL } from '../../chart/chart'
 
 export default {
   name: 'LabelSelectorAntV',
@@ -70,7 +70,8 @@ export default {
         { name: this.$t('chart.text_pos_bottom'), value: 'bottom' },
         { name: this.$t('chart.text_pos_left'), value: 'left' },
         { name: this.$t('chart.text_pos_right'), value: 'right' }
-      ]
+      ],
+      predefineColors: COLOR_PANEL
     }
   },
   watch: {

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

@@ -18,7 +18,7 @@
             </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-color-picker v-model="tooltipForm.textStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeTooltipAttr" />
           </el-form-item>
           <el-form-item class="form-item">
             <span slot="label">
@@ -53,7 +53,7 @@
 </template>
 
 <script>
-import { DEFAULT_TOOLTIP } from '../../chart/chart'
+import { COLOR_PANEL, DEFAULT_TOOLTIP } from '../../chart/chart'
 
 export default {
   name: 'TooltipSelector',
@@ -71,7 +71,8 @@ export default {
     return {
       tooltipForm: JSON.parse(JSON.stringify(DEFAULT_TOOLTIP)),
       fontSize: [],
-      isSetting: false
+      isSetting: false,
+      predefineColors: COLOR_PANEL
     }
   },
   watch: {

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

@@ -12,7 +12,7 @@
             </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-color-picker v-model="tooltipForm.textStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeTooltipAttr" />
           </el-form-item>
         </div>
       </el-form>
@@ -21,7 +21,7 @@
 </template>
 
 <script>
-import { DEFAULT_TOOLTIP } from '../../chart/chart'
+import { COLOR_PANEL, DEFAULT_TOOLTIP } from '../../chart/chart'
 
 export default {
   name: 'TooltipSelectorAntV',
@@ -39,7 +39,8 @@ export default {
     return {
       tooltipForm: JSON.parse(JSON.stringify(DEFAULT_TOOLTIP)),
       fontSize: [],
-      isSetting: false
+      isSetting: false,
+      predefineColors: COLOR_PANEL
     }
   },
   watch: {

frontend/src/views/chart/group/Group.vue

@@ -880,11 +880,14 @@ export default {
       // if (this.tDs && this.tDs.type === 'group') {
       //   return
       // }
-      this.dsForm.sceneId = this.tDs.id
+      const oldSceneId = this.dsForm.sceneId
+      const newSceneId = this.tDs.id
+      this.dsForm.sceneId = newSceneId
       post('/chart/view/save', this.dsForm).then(res => {
         this.closeMoveDs()
         // this.tableTree()
-        this.refreshNodeBy(this.dsForm.sceneId)
+        this.refreshNodeBy(oldSceneId)
+        this.refreshNodeBy(newSceneId)
       })
     },
     targetDs(val) {

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

@@ -3,6 +3,7 @@
     <!--    <span v-show="false">{{ vId }}</span>-->
     <!-- <el-row style="height: 40px;background-color: white" class="padding-lr"> -->
     <el-row style="height: 40px;" class="padding-lr">
+      <span class="title-text" style="line-height: 40px;">{{ view.name }}</span>
       <el-popover
         placement="right-start"
         width="400"
@@ -11,7 +12,7 @@
         @hide="hideTab"
       >
         <dataset-chart-detail type="chart" :data="view" :tab-status="tabStatus" />
-        <span slot="reference" class="title-text" style="line-height: 40px;cursor: pointer;">{{ view.name }}</span>
+        <svg-icon slot="reference" icon-class="more_v" style="cursor: pointer;" />
       </el-popover>
       <span style="float: right;line-height: 40px;">
         <!--        <el-button v-if="hasDataPermission('manage',param.privileges)" size="mini" @click="changeDs">-->
@@ -927,6 +928,7 @@ export default {
       view.extStack = JSON.stringify(view.extStack)
       view.drillFields = JSON.stringify(view.drillFields)
       view.extBubble = JSON.stringify(view.extBubble)
+      delete view.data
       post('/chart/view/save', view).then(response => {
         // this.get(response.data.id);
         // this.getData(response.data.id)

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

@@ -56,16 +56,16 @@
         </el-radio>
       </div>
       <div style="width: 100%;display: flex;display: -webkit-flex;justify-content: space-between;flex-direction: row;flex-wrap: wrap;">
-        <el-radio value="chart-mix" label="chart-mix">
-          <span :title="$t('chart.chart_mix')">
-            <svg-icon icon-class="chart-mix" class="chart-icon" />
-          </span>
-        </el-radio>
-        <el-radio value="map" label="map">
-          <span :title="$t('chart.chart_map')">
-            <svg-icon icon-class="map" class="chart-icon" />
-          </span>
-        </el-radio>
+<!--        <el-radio value="chart-mix" label="chart-mix">-->
+<!--          <span :title="$t('chart.chart_mix')">-->
+<!--            <svg-icon icon-class="chart-mix" class="chart-icon" />-->
+<!--          </span>-->
+<!--        </el-radio>-->
+<!--        <el-radio value="map" label="map">-->
+<!--          <span :title="$t('chart.chart_map')">-->
+<!--            <svg-icon icon-class="map" class="chart-icon" />-->
+<!--          </span>-->
+<!--        </el-radio>-->
         <el-radio value="radar" label="radar">
           <span :title="$t('chart.chart_radar')">
             <svg-icon icon-class="radar" class="chart-icon" />
@@ -81,8 +81,6 @@
             <svg-icon icon-class="pie" class="chart-icon" />
           </span>
         </el-radio>
-      </div>
-      <div style="width: 100%;display: flex;display: -webkit-flex;justify-content: space-between;flex-direction: row;flex-wrap: wrap;">
         <el-radio value="pie-rose" label="pie-rose">
           <span :title="$t('chart.chart_pie_rose')">
             <svg-icon icon-class="pie-rose" class="chart-icon" />
@@ -93,6 +91,8 @@
             <svg-icon icon-class="funnel" class="chart-icon" />
           </span>
         </el-radio>
+      </div>
+      <div style="width: 100%;display: flex;display: -webkit-flex;justify-content: space-between;flex-direction: row;flex-wrap: wrap;">
         <el-radio value="treemap" label="treemap">
           <span :title="$t('chart.chart_treemap')">
             <svg-icon icon-class="treemap" class="chart-icon" />
@@ -104,6 +104,8 @@
           </span>
         </el-radio>
         <el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>
+        <el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>
+        <el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>
       </div>
     </div>
     <div v-else-if="chart.render && chart.render === 'echarts'">

frontend/src/views/dataset/data/ViewTable.vue

@@ -2,6 +2,9 @@
   <el-row style="height: 100%;overflow-y: hidden;width: 100%;">
     <!--    <span v-show="false">{{ tableRefresh }}</span>-->
     <el-row style="height: 26px;">
+      <span class="title-text" style="line-height: 26px;">
+        {{ table.name }}
+      </span>
       <el-popover
         placement="right-start"
         width="400"
@@ -10,9 +13,7 @@
         @hide="hideTab"
       >
         <dataset-chart-detail type="dataset" :data="table" :tab-status="tabStatus" />
-        <span slot="reference" class="title-text" style="line-height: 26px;cursor: pointer;">
-          {{ table.name }}
-        </span>
+        <svg-icon slot="reference" icon-class="more_v" style="cursor: pointer;" />
       </el-popover>
       <el-row v-if="hasDataPermission('manage',param.privileges)" style="float: right">
         <el-dropdown v-if="table.type ==='excel'" style="margin-right: 10px;" size="small" trigger="click" @command="clickEditExcel">

frontend/src/views/dataset/group/Group.vue

@@ -770,11 +770,14 @@ export default {
       }
     },
     saveMoveDs() {
-      this.dsForm.sceneId = this.tDs.id
+      const oldSceneId = this.dsForm.sceneId
+      const newSceneId = this.tDs.id
+      this.dsForm.sceneId = newSceneId
       this.dsForm.isRename = true
       alter(this.dsForm).then(res => {
         this.closeMoveDs()
-        this.refreshNodeBy(this.dsForm.sceneId)
+        this.refreshNodeBy(oldSceneId)
+        this.refreshNodeBy(newSceneId)
       })
     },
     targetDs(val) {