From ddf7207fc4326d418b9983084c4310c19d057847 Mon Sep 17 00:00:00 2001
From: ulleo <ulleo.wang@gmail.com>
Date: Thu, 9 Nov 2023 10:57:00 +0800
Subject: [PATCH 1/8] =?UTF-8?q?feat:=20antv=E7=BB=84=E5=90=88=E5=9B=BE?=
 =?UTF-8?q?=E6=8F=92=E4=BB=B6=20=E9=A2=9C=E8=89=B2=E8=AE=BE=E7=BD=AE?=
 =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E6=B8=90=E5=8F=98=E4=B8=8E=E9=80=8F=E6=98=8E?=
 =?UTF-8?q?=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/shapeAttr/ColorSelector.vue    |  1 -
 .../src/components/selector/ColorSelector.vue | 15 ++++++++---
 .../src/utils/chartmix.js                     |  6 +++++
 .../src/views/antv/chartmix/index.vue         | 26 +++++++++++++++----
 4 files changed, 39 insertions(+), 9 deletions(-)

diff --git a/core/frontend/src/views/chart/components/shapeAttr/ColorSelector.vue b/core/frontend/src/views/chart/components/shapeAttr/ColorSelector.vue
index df0d5314a6..d67d0dfa8f 100644
--- a/core/frontend/src/views/chart/components/shapeAttr/ColorSelector.vue
+++ b/core/frontend/src/views/chart/components/shapeAttr/ColorSelector.vue
@@ -120,7 +120,6 @@
                 v-show="showProperty('customColor')"
                 class="custom-color-style"
               >
-                aaa
                 <div
                   v-for="(item,index) in colorForm.seriesColors"
                   :key="index"
diff --git a/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/selector/ColorSelector.vue b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/selector/ColorSelector.vue
index 2a64243d27..b452a8077b 100644
--- a/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/selector/ColorSelector.vue
+++ b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/selector/ColorSelector.vue
@@ -53,18 +53,27 @@
           </el-popover>
         </el-form-item>
 
+        <el-form-item
+          :label="$t('chart.gradient')"
+          class="form-item"
+        >
+          <el-checkbox
+            v-model="colorForm.gradient"
+            @change="changeColorCase"
+          />
+        </el-form-item>
 
-<!--        <el-form-item :label="$t('chart.not_alpha')" class="form-item form-item-slider">
+        <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="changeColorCase"/>
-        </el-form-item>-->
+        </el-form-item>
       </el-form>
     </el-col>
   </div>
 </template>
 
 <script>
-import {COLOR_PANEL, DEFAULT_COLOR_CASE} from '@/utils/map'
+import {COLOR_PANEL, DEFAULT_COLOR_CASE} from '../../utils/map'
 
 export default {
   name: 'ColorSelector',
diff --git a/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/utils/chartmix.js b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/utils/chartmix.js
index 697800dd8d..1402516f78 100644
--- a/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/utils/chartmix.js
+++ b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/utils/chartmix.js
@@ -63,6 +63,12 @@ export function hexColorToRGBA(hex, alpha) {
   }
 }
 
+export function setGradientColor(rawColor, show = false, angle = 0) {
+  const item = rawColor.split(',')
+  item.splice(3, 1, '0.3)')
+  return show ? `l(${angle}) 0:${item.join(',')} 1:${rawColor}` : rawColor
+}
+
 
 
 
diff --git a/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/views/antv/chartmix/index.vue b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/views/antv/chartmix/index.vue
index 29e5a6af84..d09f5bd268 100644
--- a/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/views/antv/chartmix/index.vue
+++ b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/views/antv/chartmix/index.vue
@@ -33,7 +33,7 @@
 
 <script>
 import {Mix} from '@antv/g2plot'
-import {uuid, hexColorToRGBA} from '../../../utils/chartmix'
+import {uuid, hexColorToRGBA, setGradientColor} from '../../../utils/chartmix'
 import ViewTrackBar from '../../../components/views/ViewTrackBar'
 import {getRemark} from "../../../components/views/utils";
 import {
@@ -41,12 +41,13 @@ import {
   DEFAULT_XAXIS_STYLE,
   DEFAULT_YAXIS_STYLE,
   transAxisPosition,
-  getLineDash
+  getLineDash, DEFAULT_COLOR_CASE
 } from '../../../utils/map';
 import ChartTitleUpdate from '../../../components/views/ChartTitleUpdate';
 import _ from 'lodash';
 import {clear} from 'size-sensor'
 import {valueFormatter} from '../../../utils/formatter'
+import fa from "element-ui/src/locale/lang/fa";
 
 export default {
   name: 'ChartComponent',
@@ -276,7 +277,9 @@ export default {
       let yaxisCount = yaxisList.length;
 
       let customAttr = undefined;
+      let gradient = false;
       let colors = undefined;
+      let alpha = DEFAULT_COLOR_CASE.alpha;
       let labelSetting = undefined;
       let labelPosition = 'middle';
       if (this.chart.customAttr) {
@@ -284,6 +287,8 @@ export default {
         if (customAttr) {
           if (customAttr.color) {
             colors = customAttr.color.colors;
+            alpha = customAttr.color.alpha;
+            gradient = customAttr.color.gradient;
           }
           if (customAttr.label) {
             labelSetting = customAttr.label.show ? {
@@ -322,6 +327,12 @@ export default {
           }
         }
 
+        let color = colors && _index < colors.length ? hexColorToRGBA(colors[_index], alpha) : undefined;
+        if (color && gradient) {
+          color = setGradientColor(color, true, 270)
+          console.log(color)
+        }
+
         return {
           type: _chartType,
           name: t.name,
@@ -347,7 +358,7 @@ export default {
             yAxis: {
               position: 'left',
             },
-            color: colors && _index < colors.length ? colors[_index] : undefined,
+            color: color,
             label: _labelSetting,
           }
         }
@@ -366,7 +377,6 @@ export default {
 
         names.push(t.name);
 
-
         const _chartType = this.getChartType(yaxisExtList[_index].chartType);
 
         if (_labelSetting) {
@@ -377,6 +387,12 @@ export default {
           }
         }
 
+        let color = colors && (yaxisCount + _index) < colors.length ? hexColorToRGBA(colors[yaxisCount + _index], alpha) : undefined;
+        if (color && gradient) {
+          color = setGradientColor(color, true, 270)
+          console.log(color)
+        }
+
         return {
           type: _chartType,
           name: t.name,
@@ -402,7 +418,7 @@ export default {
             yAxis: {
               position: 'right',
             },
-            color: colors && (yaxisCount + _index) < colors.length ? colors[yaxisCount + _index] : undefined,
+            color: color,
             label: _labelSetting,
           }
         }

From beafeb4f7a689afff8b402b4caf2d2748b0b27dd Mon Sep 17 00:00:00 2001
From: ulleo <ulleo.wang@gmail.com>
Date: Fri, 10 Nov 2023 13:45:44 +0800
Subject: [PATCH 2/8] =?UTF-8?q?feat:=20antv=E7=BB=84=E5=90=88=E5=9B=BE?=
 =?UTF-8?q?=E6=8F=92=E4=BB=B6=20=E5=A4=A7=E5=B0=8F=E8=AE=BE=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#6189
---
 .../chart/components/normal/LabelNormal.vue   |   2 -
 .../src/components/selector/SizeSelector.vue  | 292 ++++++++++++++++++
 .../components/selector/SizeSelectorAntV.vue  | 130 --------
 .../view-chartmix-frontend/src/utils/map.js   |  66 ++--
 .../src/views/antv/chartmix/index.vue         |  43 ++-
 .../src/views/antv/chartmix/style.vue         |  12 +-
 6 files changed, 366 insertions(+), 179 deletions(-)
 create mode 100644 extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/selector/SizeSelector.vue
 delete mode 100644 extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/selector/SizeSelectorAntV.vue

diff --git a/core/frontend/src/views/chart/components/normal/LabelNormal.vue b/core/frontend/src/views/chart/components/normal/LabelNormal.vue
index b973e11d31..f1197d19bd 100644
--- a/core/frontend/src/views/chart/components/normal/LabelNormal.vue
+++ b/core/frontend/src/views/chart/components/normal/LabelNormal.vue
@@ -203,7 +203,6 @@ export default {
       }
       if (this.chart.customStyle) {
         const customStyle = JSON.parse(this.chart.customStyle)
-        console.log(customStyle)
         if (customStyle.text) {
           this.title_show = customStyle.text.show
           this.title_class.fontSize = customStyle.text.fontSize + 'px'
@@ -229,7 +228,6 @@ export default {
     },
 
     colorThreshold(valueColor, setBg) {
-      console.log(valueColor, setBg)
       if (this.chart.senior) {
         const senior = JSON.parse(this.chart.senior)
         if (senior.threshold && senior.threshold.labelThreshold && senior.threshold.labelThreshold.length > 0) {
diff --git a/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/selector/SizeSelector.vue b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/selector/SizeSelector.vue
new file mode 100644
index 0000000000..52c9bc67e7
--- /dev/null
+++ b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/selector/SizeSelector.vue
@@ -0,0 +1,292 @@
+<template>
+  <div style="width: 100%">
+    <el-col>
+      <el-form
+        ref="sizeFormBar"
+        :model="sizeForm"
+        label-width="80px"
+        size="mini"
+      >
+
+        <el-divider
+          content-position="center"
+          class="divider-style"
+        >{{ $t('chart.chart_bar') }}
+        </el-divider>
+        <el-form-item
+          :label="$t('chart.adapt')"
+          class="form-item"
+        >
+          <el-checkbox
+            v-model="sizeForm.barDefault"
+            @change="changeBarSizeCase('barDefault')"
+          >{{ $t('chart.adapt') }}
+          </el-checkbox>
+        </el-form-item>
+        <el-form-item
+          :label="$t('chart.bar_width')"
+          class="form-item form-item-slider"
+        >
+          <el-row>
+            <el-col :span="22">
+              <el-slider
+                v-model="sizeForm.barWidthPercent"
+                :disabled="sizeForm.barDefault"
+                show-input
+                :show-input-controls="false"
+                input-size="mini"
+                :min="1"
+                :max="100"
+                @change="changeBarSizeCase('barWidthPercent')"
+              />
+            </el-col>
+            <el-col :span="2">
+              <div style="height: 38px;display: flex;align-items: center;">
+                %
+              </div>
+            </el-col>
+          </el-row>
+        </el-form-item>
+
+        <!--line-begin-->
+        <el-divider
+          content-position="center"
+          class="divider-style"
+        >{{ $t('chart.chart_line') }}
+        </el-divider>
+        <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('lineWidth')"
+          />
+        </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('lineSymbol')"
+          >
+            <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('lineSymbolSize')"
+          />
+        </el-form-item>
+        <el-form-item
+          :label="$t('chart.line_smooth')"
+          class="form-item"
+        >
+          <el-checkbox
+            v-model="sizeForm.lineSmooth"
+            @change="changeBarSizeCase('lineSmooth')"
+          >{{ $t('chart.line_smooth') }}
+          </el-checkbox>
+        </el-form-item>
+        <!--line-end-->
+
+        <!--scatter-begin-->
+        <el-divider
+          content-position="center"
+          class="divider-style"
+        >{{ $t('chart.chart_scatter') }}
+        </el-divider>
+        <el-form-item
+          :label="$t('chart.bubble_symbol')"
+          class="form-item"
+        >
+          <el-select
+            v-model="sizeForm.scatterSymbol"
+            :placeholder="$t('chart.line_symbol')"
+            @change="changeBarSizeCase('scatterSymbol')"
+          >
+            <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.bubble_size')"
+          class="form-item form-item-slider"
+        >
+          <el-slider
+            v-model="sizeForm.scatterSymbolSize"
+            show-input
+            :show-input-controls="false"
+            input-size="mini"
+            :min="1"
+            :max="40"
+            @change="changeBarSizeCase('scatterSymbolSize')"
+          />
+        </el-form-item>
+        <!--scatter-end-->
+
+      </el-form>
+    </el-col>
+  </div>
+</template>
+
+<script>
+import {CHART_FONT_FAMILY, CHART_FONT_LETTER_SPACE, DEFAULT_SIZE} from '../../utils/map'
+
+export default {
+  name: 'SizeSelector',
+  props: {
+    param: {
+      type: Object,
+      required: true
+    },
+    chart: {
+      type: Object,
+      required: true
+    },
+  },
+  data() {
+    return {
+      sizeForm: JSON.parse(JSON.stringify(DEFAULT_SIZE)),
+      lineSymbolOptions: [
+        // { name: this.$t('chart.line_symbol_none'), value: 'none' },
+        {name: this.$t('chart.line_symbol_circle'), value: 'circle'},
+        {name: this.$t('chart.line_symbol_rect'), value: 'square'},
+        {name: this.$t('chart.line_symbol_triangle'), value: 'triangle'},
+        {name: this.$t('chart.line_symbol_diamond'), value: 'diamond'}
+      ],
+      fontSize: [],
+      fontFamily: CHART_FONT_FAMILY,
+      fontLetterSpace: CHART_FONT_LETTER_SPACE
+    }
+  },
+  watch: {
+    'chart': {
+      handler: function () {
+        this.initData()
+      }
+    }
+  },
+  mounted() {
+    this.init()
+    this.initData()
+  },
+  methods: {
+    initData() {
+      const chart = JSON.parse(JSON.stringify(this.chart))
+      if (chart.customAttr) {
+        let customAttr = null
+        if (Object.prototype.toString.call(chart.customAttr) === '[object Object]') {
+          customAttr = JSON.parse(JSON.stringify(chart.customAttr))
+        } else {
+          customAttr = JSON.parse(chart.customAttr)
+        }
+        if (customAttr.size) {
+          this.sizeForm = customAttr.size
+
+          this.sizeForm.barDefault = this.sizeForm.barDefault !== undefined ? this.sizeForm.barDefault : DEFAULT_SIZE.barDefault;
+          this.sizeForm.barWidthPercent = this.sizeForm.barWidthPercent !== undefined ? this.sizeForm.barWidthPercent : DEFAULT_SIZE.barWidthPercent;
+
+          this.sizeForm.lineWidth = this.sizeForm.lineWidth !== undefined ? this.sizeForm.lineWidth : DEFAULT_SIZE.lineWidth;
+          this.sizeForm.lineSymbol = this.sizeForm.lineSymbol !== undefined ? this.sizeForm.lineSymbol : DEFAULT_SIZE.lineSymbol;
+          this.sizeForm.lineSymbolSize = this.sizeForm.lineSymbolSize !== undefined ? this.sizeForm.lineSymbolSize : DEFAULT_SIZE.lineSymbolSize;
+          this.sizeForm.lineSmooth = this.sizeForm.lineSmooth !== undefined ? this.sizeForm.lineSmooth : DEFAULT_SIZE.lineSmooth;
+
+          this.sizeForm.scatterSymbol = this.sizeForm.scatterSymbol !== undefined ? this.sizeForm.scatterSymbol : DEFAULT_SIZE.scatterSymbol;
+          this.sizeForm.scatterSymbolSize = this.sizeForm.scatterSymbolSize !== undefined ? this.sizeForm.scatterSymbolSize : DEFAULT_SIZE.scatterSymbolSize;
+
+        }
+      }
+    },
+    init() {
+      const arr = []
+      for (let i = 10; i <= 60; i = i + 2) {
+        arr.push({
+          name: i + '',
+          value: i + ''
+        })
+      }
+      this.fontSize = arr
+    },
+    changeBarSizeCase(modifyName) {
+      this.$emit('onSizeChange', this.sizeForm)
+    },
+  }
+}
+</script>
+
+<style scoped>
+.shape-item {
+  padding: 6px;
+  border: none;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.form-item-slider ::v-deep .el-form-item__label {
+  font-size: 12px;
+  line-height: 38px;
+}
+
+.form-item ::v-deep .el-form-item__label {
+  font-size: 12px;
+}
+
+.form-item ::v-deep .el-checkbox__label {
+  font-size: 12px;
+}
+
+.form-item ::v-deep .el-radio__label {
+  font-size: 12px;
+}
+
+.el-select-dropdown__item {
+  padding: 0 20px;
+}
+
+span {
+  font-size: 12px
+}
+
+.el-form-item {
+  margin-bottom: 6px;
+}
+
+.el-divider--horizontal {
+  margin: 10px 0
+}
+
+.divider-style ::v-deep .el-divider__text {
+  color: #606266;
+  font-size: 12px;
+  font-weight: 400;
+  padding: 0 10px;
+}
+</style>
diff --git a/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/selector/SizeSelectorAntV.vue b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/selector/SizeSelectorAntV.vue
deleted file mode 100644
index 7ca0b08909..0000000000
--- a/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/selector/SizeSelectorAntV.vue
+++ /dev/null
@@ -1,130 +0,0 @@
-<template>
-  <div style="width: 100%">
-    <el-col>
-      <el-form ref="sizeFormLine" :model="sizeForm" label-width="80px" size="mini">
-        <el-form-item :label="$t('chart.bubble_symbol')" class="form-item">
-          <el-select v-model="sizeForm.scatterSymbol" :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.bubble_size')" class="form-item form-item-slider">
-          <el-slider v-model="sizeForm.scatterSymbolSize" show-input :show-input-controls="false" input-size="mini" :min="1" :max="40" @change="changeBarSizeCase" />
-        </el-form-item>
-        <el-form-item :label="$t('chart.not_alpha')" class="form-item form-item-slider">
-          <el-slider v-model="sizeForm.symbolOpacity" show-input :show-input-controls="false" input-size="mini" :min="1" :max="10" @change="changeBarSizeCase" />
-        </el-form-item>
-         <el-form-item v-if="sizeForm.scatterSymbol && sizeForm.scatterSymbol !== 'marker'" :label="$t('plugin_view_chartmix.border')" class="form-item form-item-slider">
-          <el-slider v-model="sizeForm.symbolStrokeWidth" show-input :show-input-controls="false" input-size="mini" :min="0" :max="5" @change="changeBarSizeCase" />
-        </el-form-item>
-      </el-form>
-    </el-col>
-  </div>
-</template>
-
-<script>
-import { DEFAULT_SIZE } from '@/utils/map'
-export default {
-  name: 'SizeSelectorAntV',
-  props: {
-    param: {
-      type: Object,
-      required: true
-    },
-    chart: {
-      type: Object,
-      required: true
-    }
-  },
-  data() {
-    return {
-      sizeForm: JSON.parse(JSON.stringify(DEFAULT_SIZE)),
-      lineSymbolOptions: [
-        { name: this.$t('plugin_view_chartmix.marker'), value: 'marker' },
-        { name: this.$t('chart.line_symbol_circle'), value: 'circle' },
-        { name: this.$t('chart.line_symbol_rect'), value: 'square' },
-        { name: this.$t('chart.line_symbol_triangle'), value: 'triangle' },
-        { name: this.$t('plugin_view_chartmix.pentagon'), value: 'pentagon' },
-        { name: this.$t('plugin_view_chartmix.hexagon'), value: 'hexagon' },
-        { name: this.$t('plugin_view_chartmix.octagon'), value: 'octogon' },
-        { name: this.$t('plugin_view_chartmix.hexagram'), value: 'hexagram' },
-        { name: this.$t('chart.line_symbol_diamond'), value: 'rhombus' }
-      ]
-    }
-  },
-  watch: {
-    'chart': {
-      handler: function() {
-        this.initData()
-      }
-    }
-  },
-  mounted() {
-    this.initData()
-  },
-  methods: {
-    initData() {
-      const chart = JSON.parse(JSON.stringify(this.chart))
-      if (chart.customAttr) {
-        let customAttr = null
-        if (Object.prototype.toString.call(chart.customAttr) === '[object Object]') {
-          customAttr = JSON.parse(JSON.stringify(chart.customAttr))
-        } else {
-          customAttr = JSON.parse(chart.customAttr)
-        }
-        if (customAttr.size) {
-          this.sizeForm = customAttr.size
-        }
-      }
-    },
-
-    changeBarSizeCase() {
-      this.$emit('onSizeChange', this.sizeForm)
-    },
-    formatTooltip(val) {
-      return val / 10
-    }
-  }
-}
-</script>
-
-<style scoped>
-.shape-item{
-  padding: 6px;
-  border: none;
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-.form-item-slider ::v-deep .el-form-item__label{
-  font-size: 12px;
-  line-height: 38px;
-}
-.form-item ::v-deep .el-form-item__label{
-  font-size: 12px;
-}
-.el-select-dropdown__item{
-  padding: 0 20px;
-}
-span{
-  font-size: 12px
-}
-
-.el-form-item{
-  margin-bottom: 6px;
-}
-.el-divider--horizontal {
-  margin: 10px 0
-}
-.divider-style ::v-deep .el-divider__text{
-  color: #606266;
-  font-size: 12px;
-  font-weight: 400;
-  padding: 0 10px;
-}
-</style>
diff --git a/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/utils/map.js b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/utils/map.js
index 6030857ca0..5945fdf986 100644
--- a/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/utils/map.js
+++ b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/utils/map.js
@@ -12,53 +12,14 @@ export const DEFAULT_COLOR_CASE = {
 }
 export const DEFAULT_SIZE = {
   barDefault: true,
-  barWidth: 40,
-  barGap: 0.4,
+  barWidthPercent: 50,
   lineWidth: 2,
   lineType: 'solid',
-  lineSymbol: 'marker',
+  lineSymbol: 'circle',
   lineSymbolSize: 4,
   lineSmooth: true,
-  lineArea: false,
-  pieInnerRadius: 0,
-  pieOuterRadius: 80,
-  pieRoseType: 'radius',
-  pieRoseRadius: 5,
-  funnelWidth: 80,
-  radarShape: 'polygon',
-  radarSize: 80,
-  tableTitleFontSize: 12,
-  tableItemFontSize: 12,
-  tableTitleHeight: 36,
-  tableItemHeight: 36,
-  tablePageSize: '20',
-  tableColumnMode: 'custom',
-  tableColumnWidth: 100,
-  tableHeaderAlign: 'left',
-  tableItemAlign: 'right',
-  gaugeMin: 0,
-  gaugeMax: 100,
-  gaugeStartAngle: 225,
-  gaugeEndAngle: -45,
-  dimensionFontSize: 18,
-  quotaFontSize: 18,
-  spaceSplit: 10,
-  dimensionShow: true,
-  quotaShow: true,
-  scatterSymbol: 'marker',
+  scatterSymbol: 'circle',
   scatterSymbolSize: 15,
-  symbolOpacity: 5,
-  symbolStrokeWidth: 1,
-  treemapWidth: 80,
-  treemapHeight: 80,
-  liquidMax: 100,
-  liquidSize: 80,
-  liquidOutlineBorder: 4,
-  liquidOutlineDistance: 8,
-  liquidWaveLength: 128,
-  liquidWaveCount: 3,
-  liquidShape: 'circle',
-  tablePageMode: 'page'
 }
 export const COLOR_PANEL = [
   '#ff4500',
@@ -73,6 +34,27 @@ export const COLOR_PANEL = [
   '#FFFFFF'
 ]
 
+export const CHART_FONT_FAMILY = [
+  { name: '微软雅黑', value: 'Microsoft YaHei' },
+  { name: '宋体', value: 'SimSun' },
+  { name: '黑体', value: 'SimHei' },
+  { name: '楷体', value: 'KaiTi' }
+]
+
+export const CHART_FONT_LETTER_SPACE = [
+  { name: '0px', value: '0' },
+  { name: '1px', value: '1' },
+  { name: '2px', value: '2' },
+  { name: '3px', value: '3' },
+  { name: '4px', value: '4' },
+  { name: '5px', value: '5' },
+  { name: '6px', value: '6' },
+  { name: '7px', value: '7' },
+  { name: '8px', value: '8' },
+  { name: '9px', value: '9' },
+  { name: '10px', value: '10' }
+]
+
 export const DEFAULT_LABEL = {
   show: true,
   position: 'middle',
diff --git a/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/views/antv/chartmix/index.vue b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/views/antv/chartmix/index.vue
index d09f5bd268..7124da1491 100644
--- a/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/views/antv/chartmix/index.vue
+++ b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/views/antv/chartmix/index.vue
@@ -330,10 +330,9 @@ export default {
         let color = colors && _index < colors.length ? hexColorToRGBA(colors[_index], alpha) : undefined;
         if (color && gradient) {
           color = setGradientColor(color, true, 270)
-          console.log(color)
         }
 
-        return {
+        const setting = {
           type: _chartType,
           name: t.name,
           options: {
@@ -362,6 +361,7 @@ export default {
             label: _labelSetting,
           }
         }
+        return this.setSizeSetting(setting);
       }) : [];
 
       let _dataExt = this.chart.data && this.chart.data.data && this.chart.data.data.length > 0 ? _.map(_.filter(this.chart.data.data, (c, _index) => {
@@ -390,10 +390,9 @@ export default {
         let color = colors && (yaxisCount + _index) < colors.length ? hexColorToRGBA(colors[yaxisCount + _index], alpha) : undefined;
         if (color && gradient) {
           color = setGradientColor(color, true, 270)
-          console.log(color)
         }
 
-        return {
+        const setting = {
           type: _chartType,
           name: t.name,
           options: {
@@ -422,6 +421,7 @@ export default {
             label: _labelSetting,
           }
         }
+        return this.setSizeSetting(setting);
       }) : [];
 
 
@@ -484,6 +484,41 @@ export default {
       return params;
     },
 
+    setSizeSetting(setting) {
+      let customAttr = undefined;
+      if (this.chart.customAttr) {
+        customAttr = JSON.parse(this.chart.customAttr);
+      }
+      if (customAttr && customAttr.size) {
+        setting.options.columnWidthRatio = undefined;
+        setting.options.smooth = undefined;
+        setting.options.point = undefined;
+        setting.options.lineStyle = undefined;
+        setting.options.size = undefined;
+        setting.options.shape = undefined;
+
+        if (setting.type === 'column' && !customAttr.size.barDefault) {
+          setting.options.columnWidthRatio = customAttr.size.barWidthPercent / 100.0
+        }
+        if (setting.type === 'line') {
+          setting.options.smooth = customAttr.size.lineSmooth
+          setting.options.point = {
+            size: parseInt(customAttr.size.lineSymbolSize),
+            shape: customAttr.size.lineSymbol
+          }
+          setting.options.lineStyle = {
+            lineWidth: parseInt(customAttr.size.lineWidth)
+          }
+        }
+        if (setting.type === 'scatter') {
+          setting.options.size = parseInt(customAttr.size.scatterSymbolSize)
+          setting.options.shape = customAttr.size.scatterSymbol
+        }
+      }
+
+      return setting;
+    },
+
     getAnalyse(chart) {
       let senior = {}
       const assistLine = []
diff --git a/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/views/antv/chartmix/style.vue b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/views/antv/chartmix/style.vue
index db2e372f99..627c5eefb0 100644
--- a/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/views/antv/chartmix/style.vue
+++ b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/views/antv/chartmix/style.vue
@@ -11,6 +11,10 @@
           <color-selector :param="param" class="attr-selector" :chart="chart" @onColorChange="onColorChange" />
         </el-collapse-item>
 
+        <el-collapse-item name="size" :title="$t('chart.size')">
+          <size-selector :param="param" class="attr-selector" :chart="chart" @onSizeChange="onSizeChange" />
+        </el-collapse-item>
+
 
         <el-collapse-item name="label" :title="$t('chart.label')" >
           <label-selector
@@ -63,13 +67,15 @@
   import TitleSelector from '../../../components/selector/TitleSelector'
   import TooltipSelectorAntV from '../../../components/selector/TooltipSelectorAntV'
   import LabelSelector from '../../../components/selector/LabelSelector.vue'
+  import SizeSelector from '../../../components/selector/SizeSelector.vue'
   import messages from '@/de-base/lang/messages'
   export default {
     components: {
       ColorSelector,
       TitleSelector,
       TooltipSelectorAntV,
-      LabelSelector
+      LabelSelector,
+      SizeSelector
     },
     data() {
       return {
@@ -110,6 +116,10 @@
         this.view.customAttr.color = val
         this.calcStyle()
       },
+      onSizeChange(val) {
+        this.view.customAttr.size = val
+        this.calcStyle()
+      },
       onRefreshViewFields(val) {
         this.view.viewFields = val
         // this.calcStyle()

From 407d2fa661a8385538cce13dac0576bb723a0f47 Mon Sep 17 00:00:00 2001
From: fit2cloud-chenyw <yawen.chen@fit2cloud.com>
Date: Mon, 13 Nov 2023 14:57:34 +0800
Subject: [PATCH 3/8] =?UTF-8?q?style:=20=E7=AC=A6=E5=8F=B7=E5=9C=B0?=
 =?UTF-8?q?=E5=9B=BE=E7=BC=96=E8=BE=91=E9=A1=B5=E9=9D=A2=E6=A0=87=E7=AD=BE?=
 =?UTF-8?q?=E5=92=8C=E6=8F=90=E7=A4=BA=E5=AD=97=E6=AE=B5=E4=B8=8B=E6=8B=89?=
 =?UTF-8?q?=E6=A1=86=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/selector/LabelSelector.vue              | 7 ++++++-
 .../src/components/selector/TooltipSelectorAntV.vue        | 6 +++++-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/extensions/dataease-extensions-view/view-symbolmap/view-symbolmap-frontend/src/components/selector/LabelSelector.vue b/extensions/dataease-extensions-view/view-symbolmap/view-symbolmap-frontend/src/components/selector/LabelSelector.vue
index 954d03670a..b4986ead74 100644
--- a/extensions/dataease-extensions-view/view-symbolmap/view-symbolmap-frontend/src/components/selector/LabelSelector.vue
+++ b/extensions/dataease-extensions-view/view-symbolmap/view-symbolmap-frontend/src/components/selector/LabelSelector.vue
@@ -15,7 +15,7 @@
             <el-color-picker v-model="labelForm.color" class="color-picker-style" :predefine="predefineColors" @change="changeLabelAttr" />
           </el-form-item>
           <el-form-item :label="$t('chart.label')" class="form-item">
-            <el-select v-model="values" :placeholder="$t('commons.please_select')" multiple collapse-tags @change="changeFields">
+            <el-select v-model="values" :placeholder="$t('commons.please_select')" class="de-label-selector" multiple collapse-tags @change="changeFields">
                 <el-option-group
                     v-for="group in fieldOptions"
                     :key="group.label"
@@ -249,4 +249,9 @@ export default {
     cursor: pointer;
     z-index: 1003;
   }
+
+  .de-label-selector ::v-deep .el-select__tags-text {
+    max-width: 78px !important;
+    overflow-x: hidden !important;
+  }
 </style>
diff --git a/extensions/dataease-extensions-view/view-symbolmap/view-symbolmap-frontend/src/components/selector/TooltipSelectorAntV.vue b/extensions/dataease-extensions-view/view-symbolmap/view-symbolmap-frontend/src/components/selector/TooltipSelectorAntV.vue
index 334d6cf03f..3fa17016e0 100644
--- a/extensions/dataease-extensions-view/view-symbolmap/view-symbolmap-frontend/src/components/selector/TooltipSelectorAntV.vue
+++ b/extensions/dataease-extensions-view/view-symbolmap/view-symbolmap-frontend/src/components/selector/TooltipSelectorAntV.vue
@@ -15,7 +15,7 @@
             <el-color-picker v-model="tooltipForm.textStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeTooltipAttr" />
           </el-form-item>
           <el-form-item :label="$t('chart.tooltip')" class="form-item">
-            <el-select v-model="values" :placeholder="$t('commons.please_select')" multiple collapse-tags @change="changeFields">
+            <el-select v-model="values" :placeholder="$t('commons.please_select')" class="de-label-selector" multiple collapse-tags @change="changeFields">
                 <el-option-group
                     v-for="group in fieldOptions"
                     :key="group.label"
@@ -222,4 +222,8 @@ export default {
   cursor: pointer;
   z-index: 1003;
 }
+.de-label-selector ::v-deep .el-select__tags-text {
+  max-width: 78px !important;
+  overflow-x: hidden !important;
+}
 </style>

From 3878f8fde43226aa3f51b56675bc5ad8dcb4ba89 Mon Sep 17 00:00:00 2001
From: ulleo <ulleo.wang@gmail.com>
Date: Mon, 13 Nov 2023 15:20:03 +0800
Subject: [PATCH 4/8] =?UTF-8?q?feat:=20AntV=20=E7=BB=84=E5=90=88=E5=9B=BE?=
 =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E6=A8=AA=E8=BD=B4=E3=80=81=E7=BA=B5=E8=BD=B4?=
 =?UTF-8?q?=E8=AE=BE=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#6099
---
 .../selector/LegendSelectorAntV.vue           | 248 +++++++++
 .../src/components/selector/TitleSelector.vue |   4 +
 .../components/selector/TooltipSelector.vue   |   4 +
 .../selector/TooltipSelectorAntV.vue          |   4 +
 .../components/selector/XAxisSelectorAntV.vue | 413 +++++++++++++++
 .../selector/YAxisExtSelectorAntV.vue         | 473 ++++++++++++++++++
 .../components/selector/YAxisSelectorAntV.vue | 473 ++++++++++++++++++
 .../view-chartmix-frontend/src/utils/map.js   | 112 +++--
 .../src/views/antv/chartmix/index.vue         | 404 ++++++++++++++-
 .../src/views/antv/chartmix/style.vue         | 296 ++++++-----
 10 files changed, 2255 insertions(+), 176 deletions(-)
 create mode 100644 extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/selector/LegendSelectorAntV.vue
 create mode 100644 extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/selector/XAxisSelectorAntV.vue
 create mode 100644 extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/selector/YAxisExtSelectorAntV.vue
 create mode 100644 extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/selector/YAxisSelectorAntV.vue

diff --git a/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/selector/LegendSelectorAntV.vue b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/selector/LegendSelectorAntV.vue
new file mode 100644
index 0000000000..7a77a4fe91
--- /dev/null
+++ b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/selector/LegendSelectorAntV.vue
@@ -0,0 +1,248 @@
+<template>
+  <div style="width: 100%">
+    <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('show')"
+          >{{ $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('icon')"
+            >
+              <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('orient')"
+            >
+              <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('textStyle')"
+            >
+              <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"
+              :predefine="predefineColors"
+              @change="changeLegendStyle('textStyle')"
+            />
+          </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('hPosition')"
+            >
+              <el-radio-button label="left">{{ $t('chart.text_pos_left') }}</el-radio-button>
+              <el-radio-button
+                :disabled="legendForm.vPosition === 'center'"
+                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('vPosition')"
+            >
+              <el-radio-button label="top">{{ $t('chart.text_pos_top') }}</el-radio-button>
+              <el-radio-button
+                :disabled="legendForm.hPosition === 'center'"
+                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>
+</template>
+
+<script>
+import { COLOR_PANEL, DEFAULT_LEGEND_STYLE } from '../../utils/map'
+
+export default {
+  name: 'LegendSelectorAntV',
+  props: {
+    param: {
+      type: Object,
+      required: true
+    },
+    chart: {
+      type: Object,
+      required: true
+    },
+    propertyInner: {
+      type: Array,
+      required: false,
+      default: function() {
+        return []
+      }
+    }
+  },
+  data() {
+    return {
+      legendForm: JSON.parse(JSON.stringify(DEFAULT_LEGEND_STYLE)),
+      fontSize: [],
+      iconSymbolOptions: [
+        { name: this.$t('chart.line_symbol_circle'), value: 'circle' },
+        { name: this.$t('chart.line_symbol_rect'), value: 'square' },
+        { name: this.$t('chart.line_symbol_triangle'), value: 'triangle' },
+        { name: this.$t('chart.line_symbol_diamond'), value: 'diamond' }
+      ],
+      isSetting: false,
+      predefineColors: COLOR_PANEL
+    }
+  },
+  watch: {
+    'chart': {
+      handler: function() {
+        this.initData()
+      }
+    }
+  },
+  mounted() {
+    this.init()
+    this.initData()
+  },
+  methods: {
+    initData() {
+      const chart = JSON.parse(JSON.stringify(this.chart))
+      if (chart.customStyle) {
+        let customStyle = null
+        if (Object.prototype.toString.call(chart.customStyle) === '[object Object]') {
+          customStyle = JSON.parse(JSON.stringify(chart.customStyle))
+        } else {
+          customStyle = JSON.parse(chart.customStyle)
+        }
+        if (customStyle.legend) {
+          this.legendForm = customStyle.legend
+        }
+      }
+    },
+    init() {
+      const arr = []
+      for (let i = 10; i <= 60; i = i + 2) {
+        arr.push({
+          name: i + '',
+          value: i + ''
+        })
+      }
+      this.fontSize = arr
+    },
+    changeLegendStyle(modifyName) {
+      if (!this.legendForm.show) {
+        this.isSetting = false
+      }
+      this.legendForm['modifyName'] = modifyName
+      this.$emit('onLegendChange', this.legendForm)
+    },
+    showProperty(property) {
+      return this.propertyInner.includes(property)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.shape-item{
+  padding: 6px;
+  border: none;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.form-item-slider ::v-deep .el-form-item__label{
+  font-size: 12px;
+  line-height: 38px;
+}
+.form-item ::v-deep .el-form-item__label{
+  font-size: 12px;
+}
+
+.form-item ::v-deep .el-checkbox__label {
+  font-size: 12px;
+}
+.form-item ::v-deep .el-radio__label {
+  font-size: 12px;
+}
+
+.el-select-dropdown__item{
+  padding: 0 20px;
+}
+  span{
+    font-size: 12px
+  }
+  .el-form-item{
+    margin-bottom: 6px;
+  }
+
+.switch-style{
+  position: absolute;
+  right: 10px;
+  margin-top: -4px;
+}
+.color-picker-style{
+  cursor: pointer;
+  z-index: 1003;
+}
+</style>
diff --git a/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/selector/TitleSelector.vue b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/selector/TitleSelector.vue
index 938dd29c36..4796a15120 100644
--- a/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/selector/TitleSelector.vue
+++ b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/selector/TitleSelector.vue
@@ -235,6 +235,10 @@ export default {
 .form-item ::v-deep .el-form-item__label{
   font-size: 12px;
 }
+
+.form-item ::v-deep .el-checkbox__label {
+  font-size: 12px;
+}
 .el-select-dropdown__item{
   padding: 0 20px;
 }
diff --git a/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/selector/TooltipSelector.vue b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/selector/TooltipSelector.vue
index 2461555af5..4010193615 100644
--- a/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/selector/TooltipSelector.vue
+++ b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/selector/TooltipSelector.vue
@@ -125,6 +125,10 @@ export default {
 .form-item ::v-deep .el-form-item__label {
   font-size: 12px;
 }
+
+.form-item ::v-deep .el-checkbox__label {
+  font-size: 12px;
+}
 .el-select-dropdown__item{
   padding: 0 20px;
 }
diff --git a/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/selector/TooltipSelectorAntV.vue b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/selector/TooltipSelectorAntV.vue
index 111041be39..0198b37f4f 100644
--- a/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/selector/TooltipSelectorAntV.vue
+++ b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/selector/TooltipSelectorAntV.vue
@@ -206,6 +206,10 @@ export default {
 .form-item ::v-deep .el-form-item__label{
   font-size: 12px;
 }
+
+.form-item ::v-deep .el-checkbox__label {
+  font-size: 12px;
+}
 .el-select-dropdown__item{
   padding: 0 20px;
 }
diff --git a/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/selector/XAxisSelectorAntV.vue b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/selector/XAxisSelectorAntV.vue
new file mode 100644
index 0000000000..56b459462a
--- /dev/null
+++ b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/selector/XAxisSelectorAntV.vue
@@ -0,0 +1,413 @@
+<template>
+  <div style="width: 100%">
+    <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('show')"
+          >{{ $t('chart.show') }}
+          </el-checkbox>
+        </el-form-item>
+        <div v-if="axisForm.show">
+          <el-form-item
+            :label="$t('chart.position')"
+            class="form-item"
+          >
+            <el-radio-group
+              v-model="axisForm.position"
+              size="mini"
+              @change="changeXAxisStyle('position')"
+            >
+              <div v-if="chart.type !== 'bidirectional-bar'">
+                <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>
+              <div v-else-if="chart.type === 'bidirectional-bar'">
+                <el-radio-button label="top">{{ $t('chart.text_pos_left') }}</el-radio-button>
+                <el-radio-button label="bottom">{{ $t('chart.text_pos_center') }}</el-radio-button>
+              </div>
+            </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('name')"
+            />
+          </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"
+              :predefine="predefineColors"
+              @change="changeXAxisStyle('nameTextStyle')"
+            />
+          </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('nameTextStyle')"
+            >
+              <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.axisLine.show"
+              @change="changeXAxisStyle('axisLine')"
+            >{{ $t('chart.axis_show') }}
+            </el-checkbox>
+          </el-form-item>
+          <el-form-item
+            :label="$t('chart.grid_show')"
+            class="form-item"
+          >
+            <el-checkbox
+              v-model="axisForm.splitLine.show"
+              @change="changeXAxisStyle('splitLine')"
+            >{{ $t('chart.grid_show') }}
+            </el-checkbox>
+          </el-form-item>
+          <span v-if="axisForm.splitLine.show">
+            <el-form-item
+              :label="$t('chart.grid_color')"
+              class="form-item"
+            >
+              <el-color-picker
+                v-model="axisForm.splitLine.lineStyle.color"
+                class="el-color-picker"
+                :predefine="predefineColors"
+                @change="changeXAxisStyle('splitLine')"
+              />
+            </el-form-item>
+            <el-form-item
+              :label="$t('chart.grid_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('splitLine')"
+              />
+            </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('axisLabel')"
+            >{{ $t('chart.axis_label_show') }}
+            </el-checkbox>
+          </el-form-item>
+          <span v-if="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"
+                :predefine="predefineColors"
+                @change="changeXAxisStyle('axisLabel')"
+              />
+            </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('axisLabel')"
+              />
+            </el-form-item>
+            <el-form-item
+              :label="$t('chart.axis_label_fontsize')"
+              class="form-item"
+            >
+              <el-select
+                v-model="axisForm.axisLabel.fontSize"
+                :placeholder="$t('chart.axis_label_fontsize')"
+                @change="changeXAxisStyle('axisLabel')"
+              >
+                <el-option
+                  v-for="option in fontSize"
+                  :key="option.value"
+                  :label="option.name"
+                  :value="option.value"
+                />
+              </el-select>
+            </el-form-item>
+
+            <span v-if="chart.type && chart.type.includes('horizontal')">
+              <el-form-item
+                :label="$t('chart.value_formatter_type')"
+                class="form-item"
+              >
+                <el-select
+                  v-model="axisForm.axisLabelFormatter.type"
+                  @change="changeXAxisStyle('axisLabelFormatter')"
+                >
+                  <el-option
+                    v-for="type in typeList"
+                    :key="type.value"
+                    :label="$t('chart.' + type.name)"
+                    :value="type.value"
+                  />
+                </el-select>
+              </el-form-item>
+
+              <el-form-item
+                v-if="axisForm.axisLabelFormatter.type !== 'auto'"
+                :label="$t('chart.value_formatter_decimal_count')"
+                class="form-item"
+              >
+                <el-input-number
+                  v-model="axisForm.axisLabelFormatter.decimalCount"
+                  :precision="0"
+                  :min="0"
+                  :max="10"
+                  size="mini"
+                  @change="changeXAxisStyle('axisLabelFormatter')"
+                />
+              </el-form-item>
+
+              <el-form-item
+                v-if="axisForm.axisLabelFormatter.type !== 'percent'"
+                :label="$t('chart.value_formatter_unit')"
+                class="form-item"
+              >
+                <el-select
+                  v-model="axisForm.axisLabelFormatter.unit"
+                  :placeholder="$t('chart.pls_select_field')"
+                  size="mini"
+                  @change="changeXAxisStyle('axisLabelFormatter')"
+                >
+                  <el-option
+                    v-for="item in unitList"
+                    :key="item.value"
+                    :label="$t('chart.' + item.name)"
+                    :value="item.value"
+                  />
+                </el-select>
+              </el-form-item>
+
+              <el-form-item
+                :label="$t('chart.value_formatter_suffix')"
+                class="form-item"
+              >
+                <el-input
+                  v-model="axisForm.axisLabelFormatter.suffix"
+                  size="mini"
+                  clearable
+                  :placeholder="$t('commons.input_content')"
+                  @change="changeXAxisStyle('axisLabelFormatter')"
+                />
+              </el-form-item>
+
+              <el-form-item
+                :label="$t('chart.value_formatter_thousand_separator')"
+                class="form-item"
+              >
+                <el-checkbox
+                  v-model="axisForm.axisLabelFormatter.thousandSeparator"
+                  @change="changeXAxisStyle('axisLabelFormatter')"
+                />
+              </el-form-item>
+            </span>
+          </span>
+        </div>
+      </el-form>
+    </el-col>
+  </div>
+</template>
+
+<script>
+import {COLOR_PANEL, DEFAULT_XAXIS_STYLE} from '../../utils/map'
+import {formatterType, unitList} from '../../utils/formatter'
+
+export default {
+  name: 'XAxisSelectorAntV',
+  props: {
+    param: {
+      type: Object,
+      required: true
+    },
+    chart: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      axisForm: JSON.parse(JSON.stringify(DEFAULT_XAXIS_STYLE)),
+      isSetting: false,
+      fontSize: [],
+      predefineColors: COLOR_PANEL,
+      typeList: formatterType,
+      unitList: unitList
+    }
+  },
+  watch: {
+    'chart': {
+      handler: function () {
+        this.initData()
+      }
+    }
+  },
+  mounted() {
+    this.init()
+    this.initData()
+  },
+  methods: {
+    initData() {
+      const chart = JSON.parse(JSON.stringify(this.chart))
+      if (chart.customStyle) {
+        let customStyle = null
+        if (Object.prototype.toString.call(chart.customStyle) === '[object Object]') {
+          customStyle = JSON.parse(JSON.stringify(chart.customStyle))
+        } else {
+          customStyle = JSON.parse(chart.customStyle)
+        }
+        if (customStyle.xAxis) {
+          this.axisForm = customStyle.xAxis
+          if (!this.axisForm.splitLine) {
+            this.axisForm.splitLine = JSON.parse(JSON.stringify(DEFAULT_XAXIS_STYLE.splitLine))
+          }
+          if (!this.axisForm.nameTextStyle) {
+            this.axisForm.nameTextStyle = JSON.parse(JSON.stringify(DEFAULT_XAXIS_STYLE.nameTextStyle))
+          }
+          if (!this.axisForm.axisValue) {
+            this.axisForm.axisValue = JSON.parse(JSON.stringify(DEFAULT_XAXIS_STYLE.axisValue))
+          }
+          if (!this.axisForm.axisLabelFormatter) {
+            this.axisForm.axisLabelFormatter = JSON.parse(JSON.stringify(DEFAULT_XAXIS_STYLE.axisLabelFormatter))
+          }
+          if (!this.axisForm.axisLine) {
+            this.axisForm.axisLine = JSON.parse(JSON.stringify(DEFAULT_XAXIS_STYLE.axisLine))
+          }
+        }
+      }
+    },
+    init() {
+      const arr = []
+      for (let i = 6; i <= 40; i = i + 2) {
+        arr.push({
+          name: i + '',
+          value: i + ''
+        })
+      }
+      this.fontSize = arr
+    },
+    changeXAxisStyle(modifyName) {
+      if (!this.axisForm.show) {
+        this.isSetting = false
+      }
+      if (this.axisForm.axisValue.splitCount && (parseInt(this.axisForm.axisValue.splitCount) > 100 || parseInt(this.axisForm.axisValue.splitCount) < 0)) {
+        this.$message({
+          message: this.$t('chart.splitCount_less_100'),
+          type: 'error'
+        })
+        return
+      }
+      this.axisForm['modifyName'] = modifyName
+      this.$emit('onChangeXAxisForm', this.axisForm)
+    },
+
+  }
+}
+</script>
+
+<style scoped>
+.el-divider--horizontal {
+  margin: 10px 0
+}
+
+.shape-item {
+  padding: 6px;
+  border: none;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.form-item-slider ::v-deep .el-form-item__label {
+  font-size: 12px;
+  line-height: 38px;
+}
+
+.form-item ::v-deep .el-form-item__label {
+  font-size: 12px;
+}
+
+.form-item ::v-deep .el-checkbox__label {
+  font-size: 12px;
+}
+
+.form-item ::v-deep .el-radio__label {
+  font-size: 12px;
+}
+
+.el-select-dropdown__item {
+  padding: 0 20px;
+}
+
+span {
+  font-size: 12px
+}
+
+.el-form-item {
+  margin-bottom: 6px;
+}
+
+.switch-style {
+  position: absolute;
+  right: 10px;
+  margin-top: -4px;
+}
+
+.color-picker-style {
+  cursor: pointer;
+  z-index: 1003;
+}
+</style>
diff --git a/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/selector/YAxisExtSelectorAntV.vue b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/selector/YAxisExtSelectorAntV.vue
new file mode 100644
index 0000000000..e87b87317b
--- /dev/null
+++ b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/selector/YAxisExtSelectorAntV.vue
@@ -0,0 +1,473 @@
+<template>
+  <div style="width: 100%">
+    <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('show')"
+          >{{ $t('chart.show') }}
+          </el-checkbox>
+        </el-form-item>
+        <div v-if="axisForm.show">
+          <el-form-item
+            :label="$t('chart.name')"
+            class="form-item"
+          >
+            <el-input
+              v-model="axisForm.name"
+              size="mini"
+              @blur="changeYAxisStyle('name')"
+            />
+          </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"
+              :predefine="predefineColors"
+              @change="changeYAxisStyle('nameTextStyle')"
+            />
+          </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('nameTextStyle')"
+            >
+              <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 class="form-item">
+              <span slot="label">
+                <span class="span-box">
+                  <span>{{ $t('chart.axis_value') }}</span>
+                  <el-tooltip
+                    class="item"
+                    effect="dark"
+                    placement="bottom"
+                  >
+                    <div
+                      slot="content"
+                      v-html="$t('chart.axis_tip')"
+                    />
+                    <i
+                      class="el-icon-info"
+                      style="cursor: pointer;"
+                    />
+                  </el-tooltip>
+                </span>
+              </span>
+              <el-checkbox
+                v-model="axisForm.axisValue.auto"
+                @change="changeYAxisStyle('axisValue')"
+              >{{ $t('chart.axis_auto') }}</el-checkbox>
+            </el-form-item>
+            <span v-if="!axisForm.axisValue.auto">
+              <el-form-item
+                :label="$t('chart.axis_value_min')"
+                class="form-item"
+              >
+                <el-input
+                  v-model="axisForm.axisValue.min"
+                  @blur="changeYAxisStyle('axisValue')"
+                />
+              </el-form-item>
+              <el-form-item
+                :label="$t('chart.axis_value_max')"
+                class="form-item"
+              >
+                <el-input
+                  v-model="axisForm.axisValue.max"
+                  @blur="changeYAxisStyle('axisValue')"
+                />
+              </el-form-item>
+              <el-form-item
+                :label="$t('chart.axis_value_split_count')"
+                class="form-item"
+              >
+                <span slot="label">
+                  <span class="span-box">
+                    <span>{{ $t('chart.axis_value_split_count') }}</span>
+                    <el-tooltip
+                      class="item"
+                      effect="dark"
+                      placement="bottom"
+                    >
+                      <div slot="content">
+                        期望的坐标轴刻度数量，非最终结果。
+                      </div>
+                      <i
+                        class="el-icon-info"
+                        style="cursor: pointer;"
+                      />
+                    </el-tooltip>
+                  </span>
+                </span>
+                <el-input
+                  v-model="axisForm.axisValue.splitCount"
+                  @blur="changeYAxisStyle('axisValue')"
+                />
+              </el-form-item>
+            </span>
+          </span>
+          <el-divider/>
+          <el-form-item
+            :label="$t('chart.axis_show')"
+            class="form-item"
+          >
+            <el-checkbox
+              v-model="axisForm.axisLine.show"
+              @change="changeYAxisStyle('axisLine')"
+            >{{ $t('chart.axis_show') }}
+            </el-checkbox>
+          </el-form-item>
+          <el-form-item
+            :label="$t('chart.grid_show')"
+            class="form-item"
+          >
+            <el-checkbox
+              v-model="axisForm.splitLine.show"
+              @change="changeYAxisStyle('splitLine')"
+            >{{ $t('chart.grid_show') }}
+            </el-checkbox>
+          </el-form-item>
+          <span v-if=" axisForm.splitLine.show">
+            <el-form-item
+              :label="$t('chart.grid_color')"
+              class="form-item"
+            >
+              <el-color-picker
+                v-model="axisForm.splitLine.lineStyle.color"
+                class="el-color-picker"
+                :predefine="predefineColors"
+                @change="changeYAxisStyle('splitLine')"
+              />
+            </el-form-item>
+            <el-form-item
+              :label="$t('chart.grid_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('lineStyle')"
+              />
+            </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('axisLabel')"
+            >{{ $t('chart.axis_label_show') }}
+            </el-checkbox>
+          </el-form-item>
+          <span v-if=" 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"
+                :predefine="predefineColors"
+                @change="changeYAxisStyle('axisLabel')"
+              />
+            </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('axisLabel')"
+              />
+            </el-form-item>
+            <el-form-item
+              :label="$t('chart.axis_label_fontsize')"
+              class="form-item"
+            >
+              <el-select
+                v-model="axisForm.axisLabel.fontSize"
+                :placeholder="$t('chart.axis_label_fontsize')"
+                @change="changeYAxisStyle('axisLabel')"
+              >
+                <el-option
+                  v-for="option in fontSize"
+                  :key="option.value"
+                  :label="option.name"
+                  :value="option.value"
+                />
+              </el-select>
+            </el-form-item>
+
+            <span v-if="chart.type && !chart.type.includes('horizontal') && chart.type !== 'waterfall'">
+              <el-form-item
+                :label="$t('chart.value_formatter_type')"
+                class="form-item"
+              >
+                <el-select
+                  v-model="axisForm.axisLabelFormatter.type"
+                  @change="changeYAxisStyle('axisLabelFormatter')"
+                >
+                  <el-option
+                    v-for="type in typeList"
+                    :key="type.value"
+                    :label="$t('chart.' + type.name)"
+                    :value="type.value"
+                  />
+                </el-select>
+              </el-form-item>
+
+              <el-form-item
+                v-if="axisForm.axisLabelFormatter.type !== 'auto'"
+                :label="$t('chart.value_formatter_decimal_count')"
+                class="form-item"
+              >
+                <el-input-number
+                  v-model="axisForm.axisLabelFormatter.decimalCount"
+                  :precision="0"
+                  :min="0"
+                  :max="10"
+                  size="mini"
+                  @change="changeYAxisStyle('axisLabelFormatter')"
+                />
+              </el-form-item>
+
+              <el-form-item
+                v-if="axisForm.axisLabelFormatter.type !== 'percent'"
+                :label="$t('chart.value_formatter_unit')"
+                class="form-item"
+              >
+                <el-select
+                  v-model="axisForm.axisLabelFormatter.unit"
+                  :placeholder="$t('chart.pls_select_field')"
+                  size="mini"
+                  @change="changeYAxisStyle('axisLabelFormatter')"
+                >
+                  <el-option
+                    v-for="item in unitList"
+                    :key="item.value"
+                    :label="$t('chart.' + item.name)"
+                    :value="item.value"
+                  />
+                </el-select>
+              </el-form-item>
+
+              <el-form-item
+                :label="$t('chart.value_formatter_suffix')"
+                class="form-item"
+              >
+                <el-input
+                  v-model="axisForm.axisLabelFormatter.suffix"
+                  size="mini"
+                  clearable
+                  :placeholder="$t('commons.input_content')"
+                  @change="changeYAxisStyle('axisLabelFormatter')"
+                />
+              </el-form-item>
+
+              <el-form-item
+                :label="$t('chart.value_formatter_thousand_separator')"
+                class="form-item"
+              >
+                <el-checkbox
+                  v-model="axisForm.axisLabelFormatter.thousandSeparator"
+                  @change="changeYAxisStyle('axisLabelFormatter')"
+                />
+              </el-form-item>
+            </span>
+          </span>
+        </div>
+      </el-form>
+    </el-col>
+  </div>
+</template>
+
+<script>
+import {COLOR_PANEL, DEFAULT_YAXIS_EXT_STYLE} from '../../utils/map'
+import {formatterType, unitList} from '../../utils/formatter'
+
+export default {
+  name: 'YAxisExtSelectorAntV',
+  props: {
+    param: {
+      type: Object,
+      required: true
+    },
+    chart: {
+      type: Object,
+      required: true
+    },
+
+  },
+  data() {
+    return {
+      axisForm: JSON.parse(JSON.stringify(DEFAULT_YAXIS_EXT_STYLE)),
+      isSetting: false,
+      fontSize: [],
+      predefineColors: COLOR_PANEL,
+      typeList: formatterType,
+      unitList: unitList
+    }
+  },
+  watch: {
+    'chart': {
+      handler: function () {
+        this.initData()
+      }
+    }
+  },
+  mounted() {
+    this.init()
+    this.initData()
+  },
+  methods: {
+    initData() {
+      const chart = JSON.parse(JSON.stringify(this.chart))
+      if (chart.customStyle) {
+        // if (!chart.customStyle.yAxisExt) {
+        //   chart.customStyle.yAxisExt = JSON.parse(JSON.stringify(DEFAULT_YAXIS_EXT_STYLE))
+        // }
+        let customStyle = null
+        if (Object.prototype.toString.call(chart.customStyle) === '[object Object]') {
+          customStyle = JSON.parse(JSON.stringify(chart.customStyle))
+        } else {
+          customStyle = JSON.parse(chart.customStyle)
+        }
+        if (customStyle.yAxisExt) {
+          this.axisForm = customStyle.yAxisExt
+          if (!this.axisForm.splitLine) {
+            this.axisForm.splitLine = JSON.parse(JSON.stringify(DEFAULT_YAXIS_EXT_STYLE.splitLine))
+          }
+          if (!this.axisForm.nameTextStyle) {
+            this.axisForm.nameTextStyle = JSON.parse(JSON.stringify(DEFAULT_YAXIS_EXT_STYLE.nameTextStyle))
+          }
+          if (!this.axisForm.axisValue) {
+            this.axisForm.axisValue = JSON.parse(JSON.stringify(DEFAULT_YAXIS_EXT_STYLE.axisValue))
+          }
+          if (!this.axisForm.axisLabelFormatter) {
+            this.axisForm.axisLabelFormatter = JSON.parse(JSON.stringify(DEFAULT_YAXIS_EXT_STYLE.axisLabelFormatter))
+          }
+          if (!this.axisForm.axisLine) {
+            this.axisForm.axisLine = JSON.parse(JSON.stringify(DEFAULT_YAXIS_EXT_STYLE.axisLine))
+          }
+        }
+      }
+    },
+    init() {
+      const arr = []
+      for (let i = 6; i <= 40; i = i + 2) {
+        arr.push({
+          name: i + '',
+          value: i + ''
+        })
+      }
+      this.fontSize = arr
+    },
+    changeYAxisStyle(modifyName) {
+      if (!this.axisForm.show) {
+        this.isSetting = false
+      }
+      if (this.axisForm.axisValue.splitCount && (parseInt(this.axisForm.axisValue.splitCount) > 100 || parseInt(this.axisForm.axisValue.splitCount) < 0)) {
+        this.$message({
+          message: this.$t('chart.splitCount_less_100'),
+          type: 'error'
+        })
+        return
+      }
+      this.axisForm['modifyName'] = modifyName
+      this.$emit('onChangeYAxisExtForm', this.axisForm)
+    },
+
+  }
+}
+</script>
+
+<style scoped>
+.el-divider--horizontal {
+  margin: 10px 0
+}
+
+.shape-item {
+  padding: 6px;
+  border: none;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.form-item ::v-deep .el-checkbox__label {
+  font-size: 12px;
+}
+
+.form-item ::v-deep .el-radio__label {
+  font-size: 12px;
+}
+
+.form-item-slider ::v-deep .el-form-item__label {
+  font-size: 12px;
+  line-height: 38px;
+}
+
+.form-item ::v-deep .el-form-item__label {
+  font-size: 12px;
+}
+
+.el-select-dropdown__item {
+  padding: 0 20px;
+}
+
+span {
+  font-size: 12px
+}
+
+.el-form-item {
+  margin-bottom: 6px;
+}
+
+.switch-style {
+  position: absolute;
+  right: 10px;
+  margin-top: -4px;
+}
+
+.color-picker-style {
+  cursor: pointer;
+  z-index: 1003;
+}
+</style>
diff --git a/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/selector/YAxisSelectorAntV.vue b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/selector/YAxisSelectorAntV.vue
new file mode 100644
index 0000000000..0dce869d04
--- /dev/null
+++ b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/selector/YAxisSelectorAntV.vue
@@ -0,0 +1,473 @@
+<template>
+  <div style="width: 100%">
+    <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('show')"
+          >{{ $t('chart.show') }}
+          </el-checkbox>
+        </el-form-item>
+        <div v-if="axisForm.show">
+          <el-form-item
+            :label="$t('chart.name')"
+            class="form-item"
+          >
+            <el-input
+              v-model="axisForm.name"
+              size="mini"
+              @blur="changeYAxisStyle('name')"
+            />
+          </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"
+              :predefine="predefineColors"
+              @change="changeYAxisStyle('nameTextStyle')"
+            />
+          </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('nameTextStyle')"
+            >
+              <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 class="form-item">
+              <span slot="label">
+                <span class="span-box">
+                  <span>{{ $t('chart.axis_value') }}</span>
+                  <el-tooltip
+                    class="item"
+                    effect="dark"
+                    placement="bottom"
+                  >
+                    <div
+                      slot="content"
+                      v-html="$t('chart.axis_tip')"
+                    />
+                    <i
+                      class="el-icon-info"
+                      style="cursor: pointer;"
+                    />
+                  </el-tooltip>
+                </span>
+              </span>
+              <el-checkbox
+                v-model="axisForm.axisValue.auto"
+                @change="changeYAxisStyle('axisValue')"
+              >{{ $t('chart.axis_auto') }}</el-checkbox>
+            </el-form-item>
+            <span v-if="!axisForm.axisValue.auto">
+              <el-form-item
+                :label="$t('chart.axis_value_min')"
+                class="form-item"
+              >
+                <el-input
+                  v-model="axisForm.axisValue.min"
+                  @blur="changeYAxisStyle('axisValue')"
+                />
+              </el-form-item>
+              <el-form-item
+                :label="$t('chart.axis_value_max')"
+                class="form-item"
+              >
+                <el-input
+                  v-model="axisForm.axisValue.max"
+                  @blur="changeYAxisStyle('axisValue')"
+                />
+              </el-form-item>
+              <el-form-item class="form-item">
+                <span slot="label">
+                  <span class="span-box">
+                    <span>{{ $t('chart.axis_value_split_count') }}</span>
+                    <el-tooltip
+                      class="item"
+                      effect="dark"
+                      placement="bottom"
+                    >
+                      <div slot="content">
+                        期望的坐标轴刻度数量，非最终结果。
+                      </div>
+                      <i
+                        class="el-icon-info"
+                        style="cursor: pointer;"
+                      />
+                    </el-tooltip>
+                  </span>
+                </span>
+                <el-input
+                  v-model="axisForm.axisValue.splitCount"
+                  @blur="changeYAxisStyle('axisValue')"
+                />
+              </el-form-item>
+            </span>
+          </span>
+          <el-divider/>
+          <el-form-item
+            :label="$t('chart.axis_show')"
+            class="form-item"
+          >
+            <el-checkbox
+              v-model="axisForm.axisLine.show"
+              @change="changeYAxisStyle('axisLine')"
+            >{{ $t('chart.axis_show') }}
+            </el-checkbox>
+          </el-form-item>
+          <el-form-item
+            :label="$t('chart.grid_show')"
+            class="form-item"
+          >
+            <el-checkbox
+              v-model="axisForm.splitLine.show"
+              @change="changeYAxisStyle('splitLine')"
+            >{{ $t('chart.grid_show') }}
+            </el-checkbox>
+          </el-form-item>
+          <span v-if=" axisForm.splitLine.show">
+            <el-form-item
+              :label="$t('chart.grid_color')"
+              class="form-item"
+            >
+              <el-color-picker
+                v-model="axisForm.splitLine.lineStyle.color"
+                class="el-color-picker"
+                :predefine="predefineColors"
+                @change="changeYAxisStyle('splitLine')"
+              />
+            </el-form-item>
+            <el-form-item
+              :label="$t('chart.grid_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('splitLine')"
+              />
+            </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('axisLabel')"
+            >{{ $t('chart.axis_label_show') }}
+            </el-checkbox>
+          </el-form-item>
+          <span v-if="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"
+                :predefine="predefineColors"
+                @change="changeYAxisStyle('axisLabel')"
+              />
+            </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('axisLabel')"
+              />
+            </el-form-item>
+            <el-form-item
+              :label="$t('chart.axis_label_fontsize')"
+              class="form-item"
+            >
+              <el-select
+                v-model="axisForm.axisLabel.fontSize"
+                :placeholder="$t('chart.axis_label_fontsize')"
+                @change="changeYAxisStyle('axisLabel')"
+              >
+                <el-option
+                  v-for="option in fontSize"
+                  :key="option.value"
+                  :label="option.name"
+                  :value="option.value"
+                />
+              </el-select>
+            </el-form-item>
+
+            <span v-if="chart.type && !chart.type.includes('horizontal') && chart.type !== 'waterfall'">
+              <el-form-item
+                :label="$t('chart.value_formatter_type')"
+                class="form-item"
+              >
+                <el-select
+                  v-model="axisForm.axisLabelFormatter.type"
+                  @change="changeYAxisStyle('axisLabelFormatter')"
+                >
+                  <el-option
+                    v-for="type in typeList"
+                    :key="type.value"
+                    :label="$t('chart.' + type.name)"
+                    :value="type.value"
+                  />
+                </el-select>
+              </el-form-item>
+
+              <el-form-item
+                v-if="axisForm.axisLabelFormatter.type !== 'auto'"
+                :label="$t('chart.value_formatter_decimal_count')"
+                class="form-item"
+              >
+                <el-input-number
+                  v-model="axisForm.axisLabelFormatter.decimalCount"
+                  :precision="0"
+                  :min="0"
+                  :max="10"
+                  size="mini"
+                  @change="changeYAxisStyle('axisLabelFormatter')"
+                />
+              </el-form-item>
+
+              <el-form-item
+                v-if="axisForm.axisLabelFormatter.type !== 'percent'"
+                :label="$t('chart.value_formatter_unit')"
+                class="form-item"
+              >
+                <el-select
+                  v-model="axisForm.axisLabelFormatter.unit"
+                  :placeholder="$t('chart.pls_select_field')"
+                  size="mini"
+                  @change="changeYAxisStyle('axisLabelFormatter')"
+                >
+                  <el-option
+                    v-for="item in unitList"
+                    :key="item.value"
+                    :label="$t('chart.' + item.name)"
+                    :value="item.value"
+                  />
+                </el-select>
+              </el-form-item>
+
+              <el-form-item
+                :label="$t('chart.value_formatter_suffix')"
+                class="form-item"
+              >
+                <el-input
+                  v-model="axisForm.axisLabelFormatter.suffix"
+                  size="mini"
+                  clearable
+                  :placeholder="$t('commons.input_content')"
+                  @change="changeYAxisStyle('axisLabelFormatter')"
+                />
+              </el-form-item>
+
+              <el-form-item
+                :label="$t('chart.value_formatter_thousand_separator')"
+                class="form-item"
+              >
+                <el-checkbox
+                  v-model="axisForm.axisLabelFormatter.thousandSeparator"
+                  @change="changeYAxisStyle('axisLabelFormatter')"
+                />
+              </el-form-item>
+            </span>
+          </span>
+        </div>
+      </el-form>
+    </el-col>
+  </div>
+</template>
+
+<script>
+import {COLOR_PANEL, DEFAULT_YAXIS_STYLE} from '../../utils/map'
+import {formatterType, unitList} from '../../utils/formatter'
+
+export default {
+  name: 'YAxisSelectorAntV',
+  props: {
+    param: {
+      type: Object,
+      required: true
+    },
+    chart: {
+      type: Object,
+      required: true
+    },
+    propertyInner: {
+      type: Array,
+      required: false,
+      default: function () {
+        return []
+      }
+    }
+  },
+  data() {
+    return {
+      axisForm: JSON.parse(JSON.stringify(DEFAULT_YAXIS_STYLE)),
+      isSetting: false,
+      fontSize: [],
+      predefineColors: COLOR_PANEL,
+      typeList: formatterType,
+      unitList: unitList
+    }
+  },
+  watch: {
+    'chart': {
+      handler: function () {
+        this.initData()
+      }
+    }
+  },
+  mounted() {
+    this.init()
+    this.initData()
+  },
+  methods: {
+    initData() {
+      const chart = JSON.parse(JSON.stringify(this.chart))
+      if (chart.customStyle) {
+        let customStyle = null
+        if (Object.prototype.toString.call(chart.customStyle) === '[object Object]') {
+          customStyle = JSON.parse(JSON.stringify(chart.customStyle))
+        } else {
+          customStyle = JSON.parse(chart.customStyle)
+        }
+        if (customStyle.yAxis) {
+          this.axisForm = customStyle.yAxis
+          if (!this.axisForm.splitLine) {
+            this.axisForm.splitLine = JSON.parse(JSON.stringify(DEFAULT_YAXIS_STYLE.splitLine))
+          }
+          if (!this.axisForm.nameTextStyle) {
+            this.axisForm.nameTextStyle = JSON.parse(JSON.stringify(DEFAULT_YAXIS_STYLE.nameTextStyle))
+          }
+          if (!this.axisForm.axisValue) {
+            this.axisForm.axisValue = JSON.parse(JSON.stringify(DEFAULT_YAXIS_STYLE.axisValue))
+          }
+          if (!this.axisForm.axisLabelFormatter) {
+            this.axisForm.axisLabelFormatter = JSON.parse(JSON.stringify(DEFAULT_YAXIS_STYLE.axisLabelFormatter))
+          }
+          if (!this.axisForm.axisLine) {
+            this.axisForm.axisLine = JSON.parse(JSON.stringify(DEFAULT_YAXIS_STYLE.axisLine))
+          }
+        }
+      }
+    },
+    init() {
+      const arr = []
+      for (let i = 6; i <= 40; i = i + 2) {
+        arr.push({
+          name: i + '',
+          value: i + ''
+        })
+      }
+      this.fontSize = arr
+    },
+    changeYAxisStyle(modifyName) {
+      if (!this.axisForm.show) {
+        this.isSetting = false
+      }
+      if (this.axisForm.axisValue.splitCount && (parseInt(this.axisForm.axisValue.splitCount) > 100 || parseInt(this.axisForm.axisValue.splitCount) < 0)) {
+        this.$message({
+          message: this.$t('chart.splitCount_less_100'),
+          type: 'error'
+        })
+        return
+      }
+      this.axisForm['modifyName'] = modifyName
+      this.$emit('onChangeYAxisForm', this.axisForm)
+    },
+
+  }
+}
+</script>
+
+<style scoped>
+.el-divider--horizontal {
+  margin: 10px 0
+}
+
+.shape-item {
+  padding: 6px;
+  border: none;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.form-item-slider ::v-deep .el-form-item__label {
+  font-size: 12px;
+  line-height: 38px;
+}
+
+.form-item ::v-deep .el-form-item__label {
+  font-size: 12px;
+}
+
+.form-item ::v-deep .el-checkbox__label {
+  font-size: 12px;
+}
+
+.form-item ::v-deep .el-radio__label {
+  font-size: 12px;
+}
+
+.el-select-dropdown__item {
+  padding: 0 20px;
+}
+
+span {
+  font-size: 12px
+}
+
+.el-form-item {
+  margin-bottom: 6px;
+}
+
+.switch-style {
+  position: absolute;
+  right: 10px;
+  margin-top: -4px;
+}
+
+.color-picker-style {
+  cursor: pointer;
+  z-index: 1003;
+}
+</style>
diff --git a/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/utils/map.js b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/utils/map.js
index 5945fdf986..b13d0f26b7 100644
--- a/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/utils/map.js
+++ b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/utils/map.js
@@ -388,9 +388,9 @@ export function hexColorToRGBA(hex, alpha) {
 }
 
 
-export const DEFAULT_YAXIS_EXT_STYLE = {
+export const DEFAULT_YAXIS_STYLE = {
   show: true,
-  position: 'right',
+  position: 'left',
   name: '',
   nameTextStyle: {
     color: '#333333',
@@ -403,6 +403,14 @@ export const DEFAULT_YAXIS_EXT_STYLE = {
     rotate: 0,
     formatter: '{value}'
   },
+  axisLine: {
+    show: false,
+    lineStyle: {
+      color: '#cccccc',
+      width: 1,
+      style: 'solid'
+    }
+  },
   splitLine: {
     show: true,
     lineStyle: {
@@ -417,6 +425,59 @@ export const DEFAULT_YAXIS_EXT_STYLE = {
     max: null,
     split: null,
     splitCount: null
+  },
+  axisLabelFormatter: {
+    type: 'auto', // auto,value,percent
+    unit: 1, // 换算单位
+    suffix: '', // 单位后缀
+    decimalCount: 2, // 小数位数
+    thousandSeparator: true// 千分符
+  }
+}
+export const DEFAULT_YAXIS_EXT_STYLE = {
+  show: true,
+  position: 'right',
+  name: '',
+  nameTextStyle: {
+    color: '#333333',
+    fontSize: 12
+  },
+  axisLabel: {
+    show: true,
+    color: '#333333',
+    fontSize: '12',
+    rotate: 0,
+    formatter: '{value}'
+  },
+  axisLine: {
+    show: false,
+    lineStyle: {
+      color: '#cccccc',
+      width: 1,
+      style: 'solid'
+    }
+  },
+  splitLine: {
+    show: true,
+    lineStyle: {
+      color: '#cccccc',
+      width: 1,
+      style: 'solid'
+    }
+  },
+  axisValue: {
+    auto: true,
+    min: null,
+    max: null,
+    split: null,
+    splitCount: null
+  },
+  axisLabelFormatter: {
+    type: 'auto', // auto,value,percent
+    unit: 1, // 换算单位
+    suffix: '', // 单位后缀
+    decimalCount: 2, // 小数位数
+    thousandSeparator: true// 千分符
   }
 }
 
@@ -497,53 +558,6 @@ export const DEFAULT_XAXIS_STYLE = {
   }
 }
 
-export const DEFAULT_YAXIS_STYLE = {
-  show: true,
-  position: 'left',
-  name: '',
-  nameTextStyle: {
-    color: '#333333',
-    fontSize: 12
-  },
-  axisLabel: {
-    show: true,
-    color: '#333333',
-    fontSize: '12',
-    rotate: 0,
-    formatter: '{value}'
-  },
-  axisLine: {
-    show: false,
-    lineStyle: {
-      color: '#cccccc',
-      width: 1,
-      style: 'solid'
-    }
-  },
-  splitLine: {
-    show: true,
-    lineStyle: {
-      color: '#cccccc',
-      width: 1,
-      style: 'solid'
-    }
-  },
-  axisValue: {
-    auto: true,
-    min: null,
-    max: null,
-    split: null,
-    splitCount: null
-  },
-  axisLabelFormatter: {
-    type: 'auto', // auto,value,percent
-    unit: 1, // 换算单位
-    suffix: '', // 单位后缀
-    decimalCount: 2, // 小数位数
-    thousandSeparator: true// 千分符
-  }
-}
-
 export function transAxisPosition(chart, axis) {
   if (chart.type.includes('horizontal')) {
     switch (axis.position) {
diff --git a/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/views/antv/chartmix/index.vue b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/views/antv/chartmix/index.vue
index 7124da1491..2bc5a0c21c 100644
--- a/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/views/antv/chartmix/index.vue
+++ b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/views/antv/chartmix/index.vue
@@ -37,17 +37,15 @@ import {uuid, hexColorToRGBA, setGradientColor} from '../../../utils/chartmix'
 import ViewTrackBar from '../../../components/views/ViewTrackBar'
 import {getRemark} from "../../../components/views/utils";
 import {
-  DEFAULT_TITLE_STYLE,
   DEFAULT_XAXIS_STYLE,
   DEFAULT_YAXIS_STYLE,
   transAxisPosition,
-  getLineDash, DEFAULT_COLOR_CASE
+  getLineDash, DEFAULT_COLOR_CASE, formatterItem, DEFAULT_YAXIS_EXT_STYLE
 } from '../../../utils/map';
 import ChartTitleUpdate from '../../../components/views/ChartTitleUpdate';
 import _ from 'lodash';
 import {clear} from 'size-sensor'
 import {valueFormatter} from '../../../utils/formatter'
-import fa from "element-ui/src/locale/lang/fa";
 
 export default {
   name: 'ChartComponent',
@@ -302,6 +300,12 @@ export default {
         }
       }
 
+      const xAxis = this.getXAxis(this.chart);
+
+      const yAxis = this.getYAxis(this.chart);
+
+      const yAxisExt = this.getYAxisExt(this.chart);
+
       const names = [];
 
       let _data = this.chart.data && this.chart.data.data && this.chart.data.data.length > 0 ? _.map(_.filter(this.chart.data.data, (c, _index) => {
@@ -354,11 +358,10 @@ export default {
                 alias: t.name,
               },
             },
-            yAxis: {
-              position: 'left',
-            },
             color: color,
             label: _labelSetting,
+            xAxis: xAxis,
+            yAxis: yAxis,
           }
         }
         return this.setSizeSetting(setting);
@@ -414,11 +417,10 @@ export default {
                 alias: t.name,
               },
             },
-            yAxis: {
-              position: 'right',
-            },
             color: color,
             label: _labelSetting,
+            xAxis: false,
+            yAxis: yAxisExt,
           }
         }
         return this.setSizeSetting(setting);
@@ -481,9 +483,297 @@ export default {
 
       params.annotations = this.getAnalyse(this.chart);
 
+      params.legend = this.getLegend(this.chart);
+
+
+      console.log(params)
+
       return params;
     },
 
+    getXAxis(chart) {
+      let axis = {}
+      let customStyle
+      if (chart.customStyle) {
+        customStyle = JSON.parse(chart.customStyle)
+        // legend
+        if (customStyle.xAxis) {
+          const a = JSON.parse(JSON.stringify(customStyle.xAxis))
+          if (a.show) {
+            const title = (a.name && a.name !== '') ? {
+              text: a.name,
+              style: {
+                fill: a.nameTextStyle.color,
+                fontSize: parseInt(a.nameTextStyle.fontSize)
+              },
+              spacing: 8
+            } : null
+            const grid = a.splitLine.show ? {
+              line: {
+                style: {
+                  stroke: a.splitLine.lineStyle.color,
+                  lineWidth: parseInt(a.splitLine.lineStyle.width)
+                }
+              }
+            } : null
+            const axisCfg = a.axisLine ? a.axisLine : DEFAULT_XAXIS_STYLE.axisLine
+            const axisLine = axisCfg.show ? {
+              style: {
+                stroke: axisCfg.lineStyle.color,
+                lineWidth: parseInt(axisCfg.lineStyle.width)
+              }
+            } : null
+            const tickLine = axisCfg.show ? {
+              style: {
+                stroke: axisCfg.lineStyle.color
+              }
+            } : null
+            const rotate = parseInt(a.axisLabel.rotate)
+            const label = a.axisLabel.show ? {
+              rotate: rotate * Math.PI / 180,
+              style: {
+                textAlign: rotate > 20 ? 'start' : rotate < -20 ? 'end' : 'center',
+                fill: a.axisLabel.color,
+                fontSize: parseInt(a.axisLabel.fontSize)
+              },
+              formatter: function (value) {
+                if (chart.type.includes('horizontal')) {
+                  if (!a.axisLabelFormatter) {
+                    return valueFormatter(value, formatterItem)
+                  } else {
+                    return valueFormatter(value, a.axisLabelFormatter)
+                  }
+                } else {
+                  return value
+                }
+              }
+            } : null
+
+            axis = {
+              position: transAxisPosition(chart, a),
+              title: title,
+              grid: grid,
+              label: label,
+              line: axisLine,
+              tickLine: tickLine
+            }
+
+            // 轴值设置
+            delete axis.minLimit
+            delete axis.maxLimit
+            delete axis.tickCount
+          } else {
+            axis = false
+          }
+        }
+      }
+      return axis
+    },
+
+    getYAxis(chart) {
+      let axis = {}
+      let customStyle
+      if (chart.customStyle) {
+        customStyle = JSON.parse(chart.customStyle)
+        // legend
+        if (customStyle.yAxis) {
+          const a = JSON.parse(JSON.stringify(customStyle.yAxis))
+          if (a.show) {
+            const title = (a.name && a.name !== '') ? {
+              text: a.name,
+              style: {
+                fill: a.nameTextStyle.color,
+                fontSize: parseInt(a.nameTextStyle.fontSize)
+              },
+              spacing: 8
+            } : null
+            const grid = a.splitLine.show ? {
+              line: {
+                style: {
+                  stroke: a.splitLine.lineStyle.color,
+                  lineWidth: parseInt(a.splitLine.lineStyle.width)
+                }
+              }
+            } : null
+            const axisCfg = a.axisLine ? a.axisLine : DEFAULT_YAXIS_STYLE.axisLine
+            const axisLine = axisCfg.show ? {
+              style: {
+                stroke: axisCfg.lineStyle.color,
+                lineWidth: parseInt(axisCfg.lineStyle.width)
+              }
+            } : null
+            const tickLine = axisCfg.show ? {
+              style: {
+                stroke: axisCfg.lineStyle.color
+              }
+            } : null
+            const label = a.axisLabel.show ? {
+              rotate: parseInt(a.axisLabel.rotate) * Math.PI / 180,
+              style: {
+                fill: a.axisLabel.color,
+                fontSize: parseInt(a.axisLabel.fontSize)
+              },
+              formatter: function (value) {
+                if (chart.type === 'waterfall') {
+                  return value
+                } else {
+                  if (!chart.type.includes('horizontal')) {
+                    if (!a.axisLabelFormatter) {
+                      return valueFormatter(value, formatterItem)
+                    } else {
+                      return valueFormatter(value, a.axisLabelFormatter)
+                    }
+                  } else {
+                    return value
+                  }
+                }
+              }
+            } : null
+
+            axis = {
+              position: 'left',
+              title: title,
+              grid: grid,
+              label: label,
+              line: axisLine,
+              tickLine: tickLine
+            }
+
+            // 轴值设置
+            delete axis.minLimit
+            delete axis.maxLimit
+            delete axis.tickCount
+            const axisValue = a.axisValue
+            if (axisValue && !axisValue.auto) {
+              const yAxisSeriesMaxList = []
+              const maxList = []
+              chart.data.data.forEach(ele => {
+                maxList.push(ele.value)
+              })
+              yAxisSeriesMaxList.push(Math.max.apply(null, maxList))
+              if (yAxisSeriesMaxList.length > 0 && !isNaN(axisValue.max)) {
+                const max = Math.max.apply(null, yAxisSeriesMaxList)
+                if (max <= parseFloat(axisValue.max)) {
+                  axisValue.max && (axis.maxLimit = axis.max = parseFloat(axisValue.max))
+                }
+              }
+
+              const yAxisSeriesMinList = []
+              const minList = []
+              chart.data.data.forEach(ele => {
+                minList.push(ele.value)
+              })
+              yAxisSeriesMinList.push(Math.min.apply(null, minList))
+              if (yAxisSeriesMinList.length > 0 && !isNaN(axisValue.min)) {
+                const min = Math.min.apply(null, yAxisSeriesMinList)
+                if (min >= parseFloat(axisValue.min)) {
+                  axisValue.min && (axis.minLimit = axis.min = parseFloat(axisValue.min))
+                }
+              }
+              axisValue.splitCount && (axis.tickCount = parseFloat(axisValue.splitCount))
+            }
+
+          } else {
+            axis = false
+          }
+        }
+      } else {
+        return {position: 'left'}
+      }
+      return axis
+    },
+// yAxisExt
+    getYAxisExt(chart) {
+      let axis = {}
+      let customStyle
+      if (chart.customStyle) {
+        customStyle = JSON.parse(chart.customStyle)
+        // legend
+        if (customStyle.yAxisExt) {
+          const a = JSON.parse(JSON.stringify(customStyle.yAxisExt))
+          if (a.show) {
+            const title = (a.name && a.name !== '') ? {
+              text: a.name,
+              style: {
+                fill: a.nameTextStyle.color,
+                fontSize: parseInt(a.nameTextStyle.fontSize)
+              },
+              spacing: 8
+            } : null
+            const grid = a.splitLine.show ? {
+              line: {
+                style: {
+                  stroke: a.splitLine.lineStyle.color,
+                  lineWidth: parseInt(a.splitLine.lineStyle.width)
+                }
+              }
+            } : null
+            const axisCfg = a.axisLine ? a.axisLine : DEFAULT_YAXIS_EXT_STYLE.axisLine
+            const axisLine = axisCfg.show ? {
+              style: {
+                stroke: axisCfg.lineStyle.color,
+                lineWidth: parseInt(axisCfg.lineStyle.width)
+              }
+            } : null
+            const tickLine = axisCfg.show ? {
+              style: {
+                stroke: axisCfg.lineStyle.color
+              }
+            } : null
+            const label = a.axisLabel.show ? {
+              rotate: parseInt(a.axisLabel.rotate) * Math.PI / 180,
+              style: {
+                fill: a.axisLabel.color,
+                fontSize: parseInt(a.axisLabel.fontSize)
+              },
+              formatter: function (value) {
+                if (chart.type === 'waterfall') {
+                  return value
+                } else {
+                  if (!chart.type.includes('horizontal')) {
+                    if (!a.axisLabelFormatter) {
+                      return valueFormatter(value, formatterItem)
+                    } else {
+                      return valueFormatter(value, a.axisLabelFormatter)
+                    }
+                  } else {
+                    return value
+                  }
+                }
+              }
+            } : null
+
+            axis = {
+              position: 'right',
+              title: title,
+              grid: grid,
+              label: label,
+              line: axisLine,
+              tickLine: tickLine
+            }
+
+            // 轴值设置
+            delete axis.minLimit
+            delete axis.maxLimit
+            delete axis.tickCount
+            const axisValue = a.axisValue
+
+            if (axisValue && !axisValue.auto) {
+              axisValue.min && (axis.minLimit = parseFloat(axisValue.min))
+              axisValue.max && (axis.maxLimit = parseFloat(axisValue.max))
+              axisValue.splitCount && (axis.tickCount = parseFloat(axisValue.splitCount))
+            }
+
+          } else {
+            axis = false
+          }
+        }
+      } else {
+        return {position: 'right'}
+      }
+      return axis
+    },
+
     setSizeSetting(setting) {
       let customAttr = undefined;
       if (this.chart.customAttr) {
@@ -592,6 +882,102 @@ export default {
       return assistLine
     },
 
+    getLegend(chart) {
+      let legend = {}
+      let customStyle
+      if (chart.customStyle) {
+        customStyle = JSON.parse(chart.customStyle)
+        // legend
+        if (customStyle.legend) {
+          const l = JSON.parse(JSON.stringify(customStyle.legend))
+          if (l.show) {
+            let offsetX, offsetY, position
+            const orient = l.orient
+            const legendSymbol = l.icon
+            // fix position
+            if (l.hPosition === 'center') {
+              position = l.vPosition === 'center' ? 'top' : l.vPosition
+            } else if (l.vPosition === 'center') {
+              position = l.hPosition === 'center' ? 'left' : l.hPosition
+            } else {
+              if (orient === 'horizontal') {
+                position = l.vPosition + '-' + l.hPosition
+              } else {
+                position = l.hPosition + '-' + l.vPosition
+              }
+            }
+            // fix offset
+            if (orient === 'horizontal') {
+              if (l.hPosition === 'left') {
+                offsetX = 16
+              } else if (l.hPosition === 'right') {
+                offsetX = -16
+              } else {
+                offsetX = 0
+              }
+              if (l.vPosition === 'top') {
+                offsetY = 0
+              } else if (l.vPosition === 'bottom') {
+                if (chart.drill) {
+                  offsetY = -16
+                } else {
+                  offsetY = -4
+                }
+              } else {
+                offsetY = 0
+              }
+            } else {
+              if (l.hPosition === 'left') {
+                offsetX = 10
+              } else if (l.hPosition === 'right') {
+                offsetX = -10
+              } else {
+                offsetX = 0
+              }
+              if (l.vPosition === 'top') {
+                offsetY = 0
+              } else if (l.vPosition === 'bottom') {
+                if (chart.drill) {
+                  offsetY = -22
+                } else {
+                  offsetY = -10
+                }
+              } else {
+                offsetY = 0
+              }
+            }
+
+            legend = {
+              layout: orient,
+              position: position,
+              offsetX: offsetX,
+              offsetY: offsetY,
+              marker: {
+                symbol: legendSymbol
+              },
+              radio: false, // 柱状图图例的聚焦功能，默认先关掉
+              itemName: {
+                formatter: (text, item, index) => {
+                  if (chart.type !== 'bidirectional-bar') {
+                    return text
+                  }
+                  const yaxis = JSON.parse(chart.yaxis)[0]
+                  const yaxisExt = JSON.parse(chart.yaxisExt)[0]
+                  if (index === 0) {
+                    return yaxis.name
+                  }
+                  return yaxisExt.name
+                }
+              }
+            }
+          } else {
+            legend = false
+          }
+        }
+      }
+      return legend
+    },
+
     getSlider(chart) {
       let senior = {}
       let cfg = false
diff --git a/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/views/antv/chartmix/style.vue b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/views/antv/chartmix/style.vue
index 627c5eefb0..ffcfb6cd3d 100644
--- a/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/views/antv/chartmix/style.vue
+++ b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/views/antv/chartmix/style.vue
@@ -8,15 +8,15 @@
       <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" />
+          <color-selector :param="param" class="attr-selector" :chart="chart" @onColorChange="onColorChange"/>
         </el-collapse-item>
 
         <el-collapse-item name="size" :title="$t('chart.size')">
-          <size-selector :param="param" class="attr-selector" :chart="chart" @onSizeChange="onSizeChange" />
+          <size-selector :param="param" class="attr-selector" :chart="chart" @onSizeChange="onSizeChange"/>
         </el-collapse-item>
 
 
-        <el-collapse-item name="label" :title="$t('chart.label')" >
+        <el-collapse-item name="label" :title="$t('chart.label')">
           <label-selector
             :param="param"
             class="attr-selector"
@@ -29,7 +29,7 @@
           />
         </el-collapse-item>
 
-        <el-collapse-item name="tooltip" :title="$t('chart.tooltip')" >
+        <el-collapse-item name="tooltip" :title="$t('chart.tooltip')">
           <tooltip-selector-ant-v
             :param="param"
             class="attr-selector"
@@ -48,7 +48,32 @@
       <span class="padding-lr">{{ $t('chart.module_style') }}</span>
       <el-collapse v-model="styleActiveNames" class="style-collapse">
 
-        <el-collapse-item v-show="view.type" name="title" :title="$t('chart.title')">
+        <el-collapse-item v-if="view.type" name="XAxis" :title="$t('chart.xAxis')">
+          <XAxisSelectorAntV
+            :param="param"
+            class="attr-selector"
+            :chart="chart"
+            @onChangeXAxisForm="onChangeXAxisForm"
+          />
+        </el-collapse-item>
+        <el-collapse-item v-if="view.type" name="YAxis" :title="$t('chart.yAxis')">
+          <YAxisSelectorAntV
+            :param="param"
+            class="attr-selector"
+            :chart="chart"
+            @onChangeYAxisForm="onChangeYAxisForm"
+          />
+        </el-collapse-item>
+        <el-collapse-item v-if="view.type" name="YAxisExt" :title="$t('chart.yAxis_ext')">
+          <YAxisExtSelectorAntV
+            :param="param"
+            class="attr-selector"
+            :chart="chart"
+            @onChangeYAxisExtForm="onChangeYAxisExtForm"
+          />
+        </el-collapse-item>
+        <el-collapse-item v-if="view.type" name="title" :title="$t('chart.title')">
+
           <title-selector
             :param="param"
             class="attr-selector"
@@ -57,129 +82,164 @@
           />
         </el-collapse-item>
 
+        <!--        <el-collapse-item v-if="view.type" name="legend" :title="$t('chart.legend')">
+                  <legend-selector
+                    :param="param"
+                    class="attr-selector"
+                    :chart="chart"
+                    @onLegendChange="onLegendChange"
+                  />
+                </el-collapse-item>-->
+
       </el-collapse>
     </el-row>
   </div>
 </template>
 
 <script>
-  import ColorSelector from '../../../components/selector/ColorSelector'
-  import TitleSelector from '../../../components/selector/TitleSelector'
-  import TooltipSelectorAntV from '../../../components/selector/TooltipSelectorAntV'
-  import LabelSelector from '../../../components/selector/LabelSelector.vue'
-  import SizeSelector from '../../../components/selector/SizeSelector.vue'
-  import messages from '@/de-base/lang/messages'
-  export default {
-    components: {
-      ColorSelector,
-      TitleSelector,
-      TooltipSelectorAntV,
-      LabelSelector,
-      SizeSelector
-    },
-    data() {
-      return {
-        attrActiveNames: [],
-        styleActiveNames: [],
-      }
-    },
-    props: {
+import ColorSelector from '../../../components/selector/ColorSelector'
+import TitleSelector from '../../../components/selector/TitleSelector'
+import TooltipSelectorAntV from '../../../components/selector/TooltipSelectorAntV'
+import LabelSelector from '../../../components/selector/LabelSelector.vue'
+import SizeSelector from '../../../components/selector/SizeSelector.vue'
+import LegendSelector from '../../../components/selector/LegendSelectorAntV.vue'
+import XAxisSelectorAntV from '../../../components/selector/XAxisSelectorAntV.vue'
+import YAxisSelectorAntV from '../../../components/selector/YAxisSelectorAntV.vue'
+import YAxisExtSelectorAntV from '../../../components/selector/YAxisExtSelectorAntV.vue'
+import messages from '@/de-base/lang/messages'
 
-      obj: {
-        type: Object,
-        default: () => {}
-      }
-    },
-
-    computed: {
-      param() {
-        return this.obj.param
-      },
-      view() {
-        return this.obj.view
-      },
-      chart() {
-        return this.obj.chart
-      },
-      dimensionData() {
-        return this.obj.dimensionData
-      },
-      quotaData() {
-        return this.obj.quotaData
-      }
-    },
-    created() {
-      this.$emit('on-add-languages', messages)
-    },
-    methods: {
-      onColorChange(val) {
-        this.view.customAttr.color = val
-        this.calcStyle()
-      },
-      onSizeChange(val) {
-        this.view.customAttr.size = val
-        this.calcStyle()
-      },
-      onRefreshViewFields(val) {
-        this.view.viewFields = val
-        // this.calcStyle()
-        this.calcData()
-      },
-      onLabelChange(val) {
-        this.view.customAttr.label = val
-        this.calcStyle()
-      },
-
-      onTooltipChange(val) {
-        this.view.customAttr.tooltip = val
-        this.calcStyle()
-      },
-      onTextChange(val) {
-        this.view.customStyle.text = val
-        this.view.title = val.title
-        this.calcStyle()
-      },
-      onChangeBaseMapForm(val) {
-        this.view.customStyle.baseMapStyle = val
-        this.calcStyle()
-      },
-      onChangeBackgroundForm(val) {
-        this.view.customStyle.background = val
-        this.calcStyle()
-      },
-      onLegendChange(val) {
-        this.view.customStyle.legend = val
-        this.calcStyle()
-      },
-      calcStyle() {
-        this.$emit('plugin-call-back', {
-          eventName: 'plugins-calc-style',
-          eventParam: this.view
-        })
-      },
-      calcData(cache) {
-        this.$emit('plugin-call-back', {
-          eventName: 'calc-data',
-          eventParam: {
-            cache
-          }
-        })
-      },
+export default {
+  components: {
+    ColorSelector,
+    TitleSelector,
+    TooltipSelectorAntV,
+    LabelSelector,
+    SizeSelector,
+    LegendSelector,
+    XAxisSelectorAntV,
+    YAxisSelectorAntV,
+    YAxisExtSelectorAntV
+  },
+  data() {
+    return {
+      attrActiveNames: [],
+      styleActiveNames: [],
     }
+  },
+  props: {
+
+    obj: {
+      type: Object,
+      default: () => {
+      }
+    }
+  },
+
+  computed: {
+    param() {
+      return this.obj.param
+    },
+    view() {
+      return this.obj.view
+    },
+    chart() {
+      return this.obj.chart
+    },
+    dimensionData() {
+      return this.obj.dimensionData
+    },
+    quotaData() {
+      return this.obj.quotaData
+    }
+  },
+  created() {
+    this.$emit('on-add-languages', messages)
+  },
+  methods: {
+    onColorChange(val) {
+      this.view.customAttr.color = val
+      this.calcStyle()
+    },
+    onSizeChange(val) {
+      this.view.customAttr.size = val
+      this.calcStyle()
+    },
+    onRefreshViewFields(val) {
+      this.view.viewFields = val
+      // this.calcStyle()
+      this.calcData()
+    },
+    onLabelChange(val) {
+      this.view.customAttr.label = val
+      this.calcStyle()
+    },
+
+    onTooltipChange(val) {
+      this.view.customAttr.tooltip = val
+      this.calcStyle()
+    },
+    onTextChange(val) {
+      this.view.customStyle.text = val
+      this.view.title = val.title
+      this.calcStyle()
+    },
+    onChangeXAxisForm(val) {
+      this.view.customStyle.xAxis = val
+      this.calcStyle()
+    },
+    onChangeYAxisForm(val) {
+      this.view.customStyle.yAxis = val
+      this.calcStyle()
+    },
+
+    onChangeYAxisExtForm(val) {
+      this.view.customStyle.yAxisExt = val
+      this.calcStyle()
+    },
+    onChangeBaseMapForm(val) {
+      this.view.customStyle.baseMapStyle = val
+      this.calcStyle()
+    },
+    onChangeBackgroundForm(val) {
+      this.view.customStyle.background = val
+      this.calcStyle()
+    },
+    onLegendChange(val) {
+      this.view.customStyle.legend = val
+      this.calcStyle()
+    },
+    calcStyle() {
+      this.$emit('plugin-call-back', {
+        eventName: 'plugins-calc-style',
+        eventParam: this.view
+      })
+    },
+    calcData(cache) {
+      this.$emit('plugin-call-back', {
+        eventName: 'calc-data',
+        eventParam: {
+          cache
+        }
+      })
+    },
   }
+}
 </script>
 
 <style lang="scss" scoped>
-  .padding-lr {
-    padding: 0 6px;
-  }
-  span {
-    font-size: 12px;
-  }
-  .el-radio {
-    margin: 5px;
-  }
-  .radio-span > > > .el-radio__label {
-    margin-left: 2px;
-  }
+.padding-lr {
+  padding: 0 6px;
+}
+
+span {
+  font-size: 12px;
+}
+
+.el-radio {
+  margin: 5px;
+}
+
+.radio-span > > > .el-radio__label {
+  margin-left: 2px;
+}
 </style>

From fa81f591291042fb29e31e62323b78de574fe120 Mon Sep 17 00:00:00 2001
From: ulleo <ulleo.wang@gmail.com>
Date: Mon, 13 Nov 2023 15:30:59 +0800
Subject: [PATCH 5/8] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96tab=E8=AE=BE?=
 =?UTF-8?q?=E7=BD=AE=E9=80=89=E6=8B=A9=E9=9A=90=E8=97=8F=E6=97=B6=E7=9A=84?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#6447
---
 .../components/widget/deWidget/TabStyle.vue   | 182 +++++++++---------
 .../src/views/antv/chartmix/index.vue         |   3 -
 2 files changed, 92 insertions(+), 93 deletions(-)

diff --git a/core/frontend/src/components/widget/deWidget/TabStyle.vue b/core/frontend/src/components/widget/deWidget/TabStyle.vue
index 9a802ec8a2..730c9f8619 100644
--- a/core/frontend/src/components/widget/deWidget/TabStyle.vue
+++ b/core/frontend/src/components/widget/deWidget/TabStyle.vue
@@ -16,108 +16,110 @@
       >
         <el-checkbox v-model="styleInfo.titleHide">隐藏</el-checkbox>
       </el-form-item>
-      <el-form-item
-        label="头部字体颜色"
-        prop="headFrontColor"
-      >
-        <div
-          class="picker-color-div"
-          @click="triggerTheme('headFontColor')"
+      <template v-if="!styleInfo.titleHide">
+        <el-form-item
+          label="头部字体颜色"
+          prop="headFrontColor"
         >
-          <el-input
-            v-model="styleInfo.headFontColor"
-            readonly
-            class="theme-input"
+          <div
+            class="picker-color-div"
+            @click="triggerTheme('headFontColor')"
           >
-            <el-color-picker
-              ref="headFontColorPicker"
-              slot="prefix"
+            <el-input
               v-model="styleInfo.headFontColor"
-              class="theme-picker"
-              @change="styleChange"
-            />
-          </el-input>
-        </div>
-      </el-form-item>
-      <el-form-item
-        label="头部字体选中颜色"
-        prop="headFontActiveColor"
-      >
-        <div
-          class="picker-color-div"
-          @click="triggerTheme('headFontActiveColor')"
+              readonly
+              class="theme-input"
+            >
+              <el-color-picker
+                ref="headFontColorPicker"
+                slot="prefix"
+                v-model="styleInfo.headFontColor"
+                class="theme-picker"
+                @change="styleChange"
+              />
+            </el-input>
+          </div>
+        </el-form-item>
+        <el-form-item
+          label="头部字体选中颜色"
+          prop="headFontActiveColor"
         >
-          <el-input
-            v-model="styleInfo.headFontActiveColor"
-            readonly
-            class="theme-input"
+          <div
+            class="picker-color-div"
+            @click="triggerTheme('headFontActiveColor')"
           >
-            <el-color-picker
-              ref="headFontActiveColorPicker"
-              slot="prefix"
+            <el-input
               v-model="styleInfo.headFontActiveColor"
-              class="theme-picker"
-              @change="styleChange"
-            />
-          </el-input>
-        </div>
-      </el-form-item>
-      <el-form-item
-        label="头部边框颜色"
-        prop="headBorderColor"
-      >
-        <div
-          class="picker-color-div"
-          @click="triggerTheme('headBorderColor')"
+              readonly
+              class="theme-input"
+            >
+              <el-color-picker
+                ref="headFontActiveColorPicker"
+                slot="prefix"
+                v-model="styleInfo.headFontActiveColor"
+                class="theme-picker"
+                @change="styleChange"
+              />
+            </el-input>
+          </div>
+        </el-form-item>
+        <el-form-item
+          label="头部边框颜色"
+          prop="headBorderColor"
         >
-          <el-input
-            v-model="styleInfo.headBorderColor"
-            readonly
-            class="theme-input"
+          <div
+            class="picker-color-div"
+            @click="triggerTheme('headBorderColor')"
           >
-            <el-color-picker
-              ref="headBorderColorPicker"
-              slot="prefix"
+            <el-input
               v-model="styleInfo.headBorderColor"
-              class="theme-picker"
-              @change="styleChange"
-            />
-          </el-input>
-        </div>
-      </el-form-item>
-      <el-form-item
-        label="头部边框选中颜色"
-        prop="headBorderActiveColor"
-      >
-        <div
-          class="picker-color-div"
-          @click="triggerTheme('headBorderActiveColor')"
+              readonly
+              class="theme-input"
+            >
+              <el-color-picker
+                ref="headBorderColorPicker"
+                slot="prefix"
+                v-model="styleInfo.headBorderColor"
+                class="theme-picker"
+                @change="styleChange"
+              />
+            </el-input>
+          </div>
+        </el-form-item>
+        <el-form-item
+          label="头部边框选中颜色"
+          prop="headBorderActiveColor"
         >
-          <el-input
-            v-model="styleInfo.headBorderActiveColor"
-            readonly
-            class="theme-input"
+          <div
+            class="picker-color-div"
+            @click="triggerTheme('headBorderActiveColor')"
           >
-            <el-color-picker
-              ref="headBorderActiveColorPicker"
-              slot="prefix"
+            <el-input
               v-model="styleInfo.headBorderActiveColor"
-              class="theme-picker"
-              @change="styleChange"
-            />
-          </el-input>
-        </div>
-      </el-form-item>
-      <el-form-item :label="$t('detabs.head_position')">
-        <el-radio-group
-          v-model="styleInfo.headPosition"
-          size="mini"
-        >
-          <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>
+              readonly
+              class="theme-input"
+            >
+              <el-color-picker
+                ref="headBorderActiveColorPicker"
+                slot="prefix"
+                v-model="styleInfo.headBorderActiveColor"
+                class="theme-picker"
+                @change="styleChange"
+              />
+            </el-input>
+          </div>
+        </el-form-item>
+        <el-form-item :label="$t('detabs.head_position')">
+          <el-radio-group
+            v-model="styleInfo.headPosition"
+            size="mini"
+          >
+            <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>
+      </template>
     </el-form>
     <i
       slot="reference"
diff --git a/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/views/antv/chartmix/index.vue b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/views/antv/chartmix/index.vue
index 2bc5a0c21c..cb1134d365 100644
--- a/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/views/antv/chartmix/index.vue
+++ b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/views/antv/chartmix/index.vue
@@ -485,9 +485,6 @@ export default {
 
       params.legend = this.getLegend(this.chart);
 
-
-      console.log(params)
-
       return params;
     },
 

From 08ef70ada387a3c7b67828a45882948c477de8a9 Mon Sep 17 00:00:00 2001
From: fit2cloud-chenyw <yawen.chen@fit2cloud.com>
Date: Mon, 13 Nov 2023 15:51:19 +0800
Subject: [PATCH 6/8] =?UTF-8?q?style:=20=E4=BB=AA=E8=A1=A8=E6=9D=BF?=
 =?UTF-8?q?=E8=BF=87=E6=BB=A4=E5=99=A8=E5=BF=85=E5=A1=AB=E9=A1=B9=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/dataease/DeOutWidget.vue   |  3 ++-
 .../panel/filter/filterMain/FilterHead.vue    | 20 +++++++++++++++----
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/core/frontend/src/components/dataease/DeOutWidget.vue b/core/frontend/src/components/dataease/DeOutWidget.vue
index d68712a26c..237796980c 100644
--- a/core/frontend/src/components/dataease/DeOutWidget.vue
+++ b/core/frontend/src/components/dataease/DeOutWidget.vue
@@ -280,7 +280,7 @@ export default {
   letter-spacing: 0px !important;
   width: 100%;
   .widget-required {
-    width: calc(100% - 10px) !important;
+    width: calc(100% - 12px) !important;
     float: left !important;
   }
   .widget-required-symbol {
@@ -288,6 +288,7 @@ export default {
     height: 40px;
     line-height: 40px;
     float: right;
+    width: 12px;
   }
 }
 
diff --git a/core/frontend/src/views/panel/filter/filterMain/FilterHead.vue b/core/frontend/src/views/panel/filter/filterMain/FilterHead.vue
index 925c67809b..ea15432607 100644
--- a/core/frontend/src/views/panel/filter/filterMain/FilterHead.vue
+++ b/core/frontend/src/views/panel/filter/filterMain/FilterHead.vue
@@ -1,6 +1,8 @@
 <template>
   <el-row>
-    <el-col :span="20">
+    <el-col
+      class="filter-field-container"
+    >
       <div class="filter-field">
         <div class="field-content">
 
@@ -13,7 +15,7 @@
                 animation="300"
                 :move="onMove"
                 class="row wrap justify-space-around theme-drag"
-                style="width:100%;height: 100%;margin:0 10px;border-radius: 4px;overflow-x: auto;display: flex;align-items: center;"
+                style="width:calc(100% - 25px);height: 100%;margin:0 10px;border-radius: 4px;overflow-x: auto;display: flex;align-items: center;"
                 @end="end2"
               >
 
@@ -38,7 +40,9 @@
         </div>
       </div>
     </el-col>
-    <el-col :span="4">
+    <el-col
+      class="filter-required-container"
+    >
       <div class="de-filter-required">
         <el-checkbox
           v-model="element.options.attrs.required"
@@ -105,6 +109,14 @@ export default {
 
 </script>
 <style lang="scss" scoped>
+.filter-field-container {
+  width: calc(100% - 70px);
+  float: left;
+}
+.filter-required-container {
+  width: 70px;
+  float: right;
+}
 .de-filter-required {
   height: 40px;
   line-height: 40px;
@@ -116,7 +128,7 @@ export default {
   overflow-x: overlay;
   .field-content {
     position: relative;
-    display: table;
+    // display: table;
     width: 100%;
     height: 100%;
     white-space: nowrap;

From 65437cd93bb33e2d93886b50d3adbff4ebe2b5a1 Mon Sep 17 00:00:00 2001
From: ulleo <ulleo.wang@gmail.com>
Date: Mon, 13 Nov 2023 15:52:36 +0800
Subject: [PATCH 7/8] =?UTF-8?q?fix:=20echarts=E7=BB=84=E5=90=88=E5=9B=BE?=
 =?UTF-8?q?=E9=AB=98=E7=BA=A7=E8=AE=BE=E7=BD=AE=E6=98=BE=E7=A4=BA=E4=B8=8D?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 core/frontend/src/views/chart/view/ChartEdit.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/core/frontend/src/views/chart/view/ChartEdit.vue b/core/frontend/src/views/chart/view/ChartEdit.vue
index c0973c1265..59aba3c8b7 100644
--- a/core/frontend/src/views/chart/view/ChartEdit.vue
+++ b/core/frontend/src/views/chart/view/ChartEdit.vue
@@ -2061,11 +2061,11 @@ export default {
     },
     showCfg() {
       return includesAny(this.view.type, 'bar', 'line', 'area', 'gauge', 'table', 'liquid') && this.view.type !== 'race-bar' ||
-        equalsAny(this.view.type, 'text', 'label', 'map', 'buddle-map')
+        equalsAny(this.view.type, 'text', 'label', 'map', 'buddle-map') || this.view.render === 'echarts' && includesAny(this.view.type, 'mix')
     },
     showSeniorCfg() {
       return includesAny(this.view.type, 'bar', 'line', 'area', 'table') ||
-        equalsAny(this.view.type, 'table-normal', 'table-info', 'map')
+        equalsAny(this.view.type, 'table-normal', 'table-info', 'map') || this.view.render === 'echarts' && includesAny(this.view.type, 'mix')
     },
     showFunctionCfg() {
       return includesAny(this.view.type, 'bar', 'line', 'area', 'mix', 'table') ||
@@ -2080,7 +2080,7 @@ export default {
       }
       return includesAny(this.view.type, 'bar', 'line', 'area', 'gauge', 'liquid') ||
         equalsAny(this.view.type, 'text', 'label') ||
-        (this.view.render === 'antv' && this.view.type.includes('table'))
+        (this.view.render === 'antv' && this.view.type.includes('table')) || this.view.render === 'echarts' && includesAny(this.view.type, 'mix')
     },
     showAssistLineCfg() {
       return includesAny(this.view.type, 'bar', 'line', 'area', 'mix')

From a3d50972c65670f63a18e84846e0177ae27cf35d Mon Sep 17 00:00:00 2001
From: wisonic-s <shaochuan.wu@fit2cloud.com>
Date: Mon, 13 Nov 2023 16:17:26 +0800
Subject: [PATCH 8/8] =?UTF-8?q?feat:=20=E9=9B=B7=E8=BE=BE=E5=9B=BE?=
 =?UTF-8?q?=E5=80=BC=E8=BD=B4=E8=87=AA=E5=AE=9A=E4=B9=89=E6=9C=80=E5=A4=A7?=
 =?UTF-8?q?=E5=80=BC=E6=9C=80=E5=B0=8F=E5=80=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 core/frontend/src/views/chart/chart/chart.js  |  5 +++
 .../src/views/chart/chart/radar/radar_antv.js |  4 +++
 core/frontend/src/views/chart/chart/util.js   |  3 +-
 .../componentStyle/SplitSelectorAntV.vue      | 32 +++++++++++++++++++
 .../src/views/chart/view/ChartStyle.vue       |  2 +-
 5 files changed, 44 insertions(+), 2 deletions(-)

diff --git a/core/frontend/src/views/chart/chart/chart.js b/core/frontend/src/views/chart/chart/chart.js
index 2058b8a829..83ec93de40 100644
--- a/core/frontend/src/views/chart/chart/chart.js
+++ b/core/frontend/src/views/chart/chart/chart.js
@@ -471,6 +471,11 @@ export const DEFAULT_SPLIT = {
   },
   splitArea: {
     show: true
+  },
+  axisValue: {
+    auto: true,
+    min: 10,
+    max: 100
   }
 }
 export const DEFAULT_FUNCTION_CFG = {
diff --git a/core/frontend/src/views/chart/chart/radar/radar_antv.js b/core/frontend/src/views/chart/chart/radar/radar_antv.js
index 0336c518b9..252e929879 100644
--- a/core/frontend/src/views/chart/chart/radar/radar_antv.js
+++ b/core/frontend/src/views/chart/chart/radar/radar_antv.js
@@ -123,6 +123,10 @@ export function baseRadarOptionAntV(plot, container, chart, action) {
           }
         }
       }
+      if (s.axisValue?.auto === false) {
+        yAxis.min = yAxis.minLimit = s.axisValue.min
+        yAxis.max = yAxis.maxLimit = s.axisValue.max
+      }
     }
   }
   options.xAxis = xAxis
diff --git a/core/frontend/src/views/chart/chart/util.js b/core/frontend/src/views/chart/chart/util.js
index 347dbd41c2..d6f10314cd 100644
--- a/core/frontend/src/views/chart/chart/util.js
+++ b/core/frontend/src/views/chart/chart/util.js
@@ -1688,7 +1688,8 @@ export const TYPE_CONFIGS = [
       'split-selector-ant-v': [
         'splitForm',
         'name',
-        'lineStyle'
+        'lineStyle',
+        'axisValue'
       ]
     }
   },
diff --git a/core/frontend/src/views/chart/components/componentStyle/SplitSelectorAntV.vue b/core/frontend/src/views/chart/components/componentStyle/SplitSelectorAntV.vue
index 7d71c56edd..05ed8a35b8 100644
--- a/core/frontend/src/views/chart/components/componentStyle/SplitSelectorAntV.vue
+++ b/core/frontend/src/views/chart/components/componentStyle/SplitSelectorAntV.vue
@@ -47,6 +47,7 @@
             />
           </el-select>
         </el-form-item>
+        <el-divider />
         <el-form-item
           v-show="showProperty('lineStyle')"
           :label="$t('chart.axis_color')"
@@ -59,6 +60,34 @@
             @change="changeSplitStyle('axisLine')"
           />
         </el-form-item>
+        <el-divider />
+        <el-form-item
+          v-show="showProperty('axisValue')"
+          :label="$t('chart.axis_value')"
+          class="form-item"
+        >
+          <el-radio-group
+            v-model="splitForm.axisValue.auto"
+            @change="changeSplitStyle('axisValue')"
+          >
+            <el-radio :label="true">{{ $t('chart.axis_auto') }}</el-radio>
+            <el-radio :label="false">{{ $t('commons.custom') }}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <div v-show="showProperty('axisValue') && !splitForm.axisValue.auto">
+          <el-form-item :label="$t('chart.axis_value_min')">
+            <el-input-number
+              v-model="splitForm.axisValue.min"
+              @blur="changeSplitStyle('axisValue')"
+            />
+          </el-form-item>
+          <el-form-item :label="$t('chart.axis_value_max')">
+            <el-input-number
+              v-model="splitForm.axisValue.max"
+              @blur="changeSplitStyle('axisValue')"
+            />
+          </el-form-item>
+        </div>
       </el-form>
     </el-col>
   </div>
@@ -117,6 +146,9 @@ export default {
         }
         if (customStyle.split) {
           this.splitForm = customStyle.split
+          if (this.splitForm.axisValue === undefined) {
+            this.splitForm.axisValue = JSON.parse(JSON.stringify(DEFAULT_SPLIT.axisValue))
+          }
         } else {
           this.splitForm = JSON.parse(JSON.stringify(DEFAULT_SPLIT))
         }
diff --git a/core/frontend/src/views/chart/view/ChartStyle.vue b/core/frontend/src/views/chart/view/ChartStyle.vue
index e88dbd2b20..0f05977839 100644
--- a/core/frontend/src/views/chart/view/ChartStyle.vue
+++ b/core/frontend/src/views/chart/view/ChartStyle.vue
@@ -218,7 +218,7 @@
           <el-collapse-item
             v-show="showPropertiesCollapse(['split-selector', 'split-selector-ant-v'])"
             name="split"
-            :title="$t('chart.split')"
+            :title="$t('chart.axis_line')"
           >
             <split-selector
               v-if="showProperties('split-selector')"