Merge pull request #6659 from ulleo/dev

feat: antv 组合图

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) {

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"

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',

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>

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>

extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/selector/SizeSelectorAntV.vue

@@ -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>

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;
 }

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;
 }

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;
 }

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>

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>

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>

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
+}
+
 
 
 

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,
+  barWidthPercent: 50,
-  barGap: 0.4,
   lineWidth: 2,
   lineType: 'solid',
-  lineSymbol: 'marker',
+  lineSymbol: 'circle',
   lineSymbolSize: 4,
   lineSmooth: true,
-  lineArea: false,
+  scatterSymbol: 'circle',
-  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',
   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',
@@ -406,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',
@@ -421,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: {
@@ -435,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// 千分符
   }
 }
 
@@ -515,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) {

extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/views/antv/chartmix/index.vue

@@ -33,15 +33,14 @@
 
 <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 {
-  DEFAULT_TITLE_STYLE,
   DEFAULT_XAXIS_STYLE,
   DEFAULT_YAXIS_STYLE,
   transAxisPosition,
-  getLineDash
+  getLineDash, DEFAULT_COLOR_CASE, formatterItem, DEFAULT_YAXIS_EXT_STYLE
 } from '../../../utils/map';
 import ChartTitleUpdate from '../../../components/views/ChartTitleUpdate';
 import _ from 'lodash';
@@ -276,7 +275,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 +285,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 ? {
@@ -297,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) => {
@@ -322,7 +331,12 @@ export default {
           }
         }
 
-        return {
+        let color = colors && _index < colors.length ? hexColorToRGBA(colors[_index], alpha) : undefined;
+        if (color && gradient) {
+          color = setGradientColor(color, true, 270)
+        }
+
+        const setting = {
           type: _chartType,
           name: t.name,
           options: {
@@ -344,13 +358,13 @@ export default {
                 alias: t.name,
               },
             },
-            yAxis: {
+            color: color,
-              position: 'left',
-            },
-            color: colors && _index < colors.length ? colors[_index] : undefined,
             label: _labelSetting,
+            xAxis: xAxis,
+            yAxis: yAxis,
           }
         }
+        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) => {
@@ -366,7 +380,6 @@ export default {
 
         names.push(t.name);
 
-
         const _chartType = this.getChartType(yaxisExtList[_index].chartType);
 
         if (_labelSetting) {
@@ -377,7 +390,12 @@ export default {
           }
         }
 
-        return {
+        let color = colors && (yaxisCount + _index) < colors.length ? hexColorToRGBA(colors[yaxisCount + _index], alpha) : undefined;
+        if (color && gradient) {
+          color = setGradientColor(color, true, 270)
+        }
+
+        const setting = {
           type: _chartType,
           name: t.name,
           options: {
@@ -399,13 +417,13 @@ export default {
                 alias: t.name,
               },
             },
-            yAxis: {
+            color: color,
-              position: 'right',
-            },
-            color: colors && (yaxisCount + _index) < colors.length ? colors[yaxisCount + _index] : undefined,
             label: _labelSetting,
+            xAxis: false,
+            yAxis: yAxisExt,
           }
         }
+        return this.setSizeSetting(setting);
       }) : [];
 
 
@@ -465,9 +483,332 @@ 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) {
+        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 = []
@@ -541,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

extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/views/antv/chartmix/style.vue

@@ -8,11 +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"/>
         </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"
@@ -25,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"
@@ -44,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"
@@ -53,123 +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 ColorSelector from '../../../components/selector/ColorSelector'
-  import TitleSelector from '../../../components/selector/TitleSelector'
+import TitleSelector from '../../../components/selector/TitleSelector'
-  import TooltipSelectorAntV from '../../../components/selector/TooltipSelectorAntV'
+import TooltipSelectorAntV from '../../../components/selector/TooltipSelectorAntV'
-  import LabelSelector from '../../../components/selector/LabelSelector.vue'
+import LabelSelector from '../../../components/selector/LabelSelector.vue'
-  import messages from '@/de-base/lang/messages'
+import SizeSelector from '../../../components/selector/SizeSelector.vue'
-  export default {
+import LegendSelector from '../../../components/selector/LegendSelectorAntV.vue'
-    components: {
+import XAxisSelectorAntV from '../../../components/selector/XAxisSelectorAntV.vue'
-      ColorSelector,
+import YAxisSelectorAntV from '../../../components/selector/YAxisSelectorAntV.vue'
-      TitleSelector,
+import YAxisExtSelectorAntV from '../../../components/selector/YAxisExtSelectorAntV.vue'
-      TooltipSelectorAntV,
+import messages from '@/de-base/lang/messages'
-      LabelSelector
-    },
-    data() {
-      return {
-        attrActiveNames: [],
-        styleActiveNames: [],
-      }
-    },
-    props: {
 
-      obj: {
+export default {
-        type: Object,
+  components: {
-        default: () => {}
+    ColorSelector,
-      }
+    TitleSelector,
-    },
+    TooltipSelectorAntV,
-
+    LabelSelector,
-    computed: {
+    SizeSelector,
-      param() {
+    LegendSelector,
-        return this.obj.param
+    XAxisSelectorAntV,
-      },
+    YAxisSelectorAntV,
-      view() {
+    YAxisExtSelectorAntV
-        return this.obj.view
+  },
-      },
+  data() {
-      chart() {
+    return {
-        return this.obj.chart
+      attrActiveNames: [],
-      },
+      styleActiveNames: [],
-      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()
-      },
-      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
-          }
-        })
-      },
     }
+  },
+  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-lr {
-    padding: 0 6px;
+  padding: 0 6px;
-  }
+}
-  span {
+
-    font-size: 12px;
+span {
-  }
+  font-size: 12px;
-  .el-radio {
+}
-    margin: 5px;
+
-  }
+.el-radio {
-  .radio-span > > > .el-radio__label {
+  margin: 5px;
-    margin-left: 2px;
+}
-  }
+
+.radio-span > > > .el-radio__label {
+  margin-left: 2px;
+}
 </style>