feat: AntV 组合图增加横轴、纵轴设置

#6099

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/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/map.js

@@ -388,9 +388,9 @@ export function hexColorToRGBA(hex, alpha) {
 }
 
 
-export const DEFAULT_YAXIS_EXT_STYLE = {
+export const DEFAULT_YAXIS_STYLE = {
   show: true,
-  position: 'right',
+  position: 'left',
   name: '',
   nameTextStyle: {
     color: '#333333',
@@ -403,6 +403,14 @@ export const DEFAULT_YAXIS_EXT_STYLE = {
     rotate: 0,
     formatter: '{value}'
   },
+  axisLine: {
+    show: false,
+    lineStyle: {
+      color: '#cccccc',
+      width: 1,
+      style: 'solid'
+    }
+  },
   splitLine: {
     show: true,
     lineStyle: {
@@ -417,6 +425,59 @@ export const DEFAULT_YAXIS_EXT_STYLE = {
     max: null,
     split: null,
     splitCount: null
+  },
+  axisLabelFormatter: {
+    type: 'auto', // auto,value,percent
+    unit: 1, // 换算单位
+    suffix: '', // 单位后缀
+    decimalCount: 2, // 小数位数
+    thousandSeparator: true// 千分符
+  }
+}
+export const DEFAULT_YAXIS_EXT_STYLE = {
+  show: true,
+  position: 'right',
+  name: '',
+  nameTextStyle: {
+    color: '#333333',
+    fontSize: 12
+  },
+  axisLabel: {
+    show: true,
+    color: '#333333',
+    fontSize: '12',
+    rotate: 0,
+    formatter: '{value}'
+  },
+  axisLine: {
+    show: false,
+    lineStyle: {
+      color: '#cccccc',
+      width: 1,
+      style: 'solid'
+    }
+  },
+  splitLine: {
+    show: true,
+    lineStyle: {
+      color: '#cccccc',
+      width: 1,
+      style: 'solid'
+    }
+  },
+  axisValue: {
+    auto: true,
+    min: null,
+    max: null,
+    split: null,
+    splitCount: null
+  },
+  axisLabelFormatter: {
+    type: 'auto', // auto,value,percent
+    unit: 1, // 换算单位
+    suffix: '', // 单位后缀
+    decimalCount: 2, // 小数位数
+    thousandSeparator: true// 千分符
   }
 }
 
@@ -497,53 +558,6 @@ export const DEFAULT_XAXIS_STYLE = {
   }
 }
 
-export const DEFAULT_YAXIS_STYLE = {
-  show: true,
-  position: 'left',
-  name: '',
-  nameTextStyle: {
-    color: '#333333',
-    fontSize: 12
-  },
-  axisLabel: {
-    show: true,
-    color: '#333333',
-    fontSize: '12',
-    rotate: 0,
-    formatter: '{value}'
-  },
-  axisLine: {
-    show: false,
-    lineStyle: {
-      color: '#cccccc',
-      width: 1,
-      style: 'solid'
-    }
-  },
-  splitLine: {
-    show: true,
-    lineStyle: {
-      color: '#cccccc',
-      width: 1,
-      style: 'solid'
-    }
-  },
-  axisValue: {
-    auto: true,
-    min: null,
-    max: null,
-    split: null,
-    splitCount: null
-  },
-  axisLabelFormatter: {
-    type: 'auto', // auto,value,percent
-    unit: 1, // 换算单位
-    suffix: '', // 单位后缀
-    decimalCount: 2, // 小数位数
-    thousandSeparator: true// 千分符
-  }
-}
-
 export function transAxisPosition(chart, axis) {
   if (chart.type.includes('horizontal')) {
     switch (axis.position) {

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

@@ -37,17 +37,15 @@ import {uuid, hexColorToRGBA, setGradientColor} from '../../../utils/chartmix'
 import ViewTrackBar from '../../../components/views/ViewTrackBar'
 import {getRemark} from "../../../components/views/utils";
 import {
-  DEFAULT_TITLE_STYLE,
   DEFAULT_XAXIS_STYLE,
   DEFAULT_YAXIS_STYLE,
   transAxisPosition,
-  getLineDash, DEFAULT_COLOR_CASE
+  getLineDash, DEFAULT_COLOR_CASE, formatterItem, DEFAULT_YAXIS_EXT_STYLE
 } from '../../../utils/map';
 import ChartTitleUpdate from '../../../components/views/ChartTitleUpdate';
 import _ from 'lodash';
 import {clear} from 'size-sensor'
 import {valueFormatter} from '../../../utils/formatter'
-import fa from "element-ui/src/locale/lang/fa";
 
 export default {
   name: 'ChartComponent',
@@ -302,6 +300,12 @@ export default {
         }
       }
 
+      const xAxis = this.getXAxis(this.chart);
+
+      const yAxis = this.getYAxis(this.chart);
+
+      const yAxisExt = this.getYAxisExt(this.chart);
+
       const names = [];
 
       let _data = this.chart.data && this.chart.data.data && this.chart.data.data.length > 0 ? _.map(_.filter(this.chart.data.data, (c, _index) => {
@@ -354,11 +358,10 @@ export default {
                 alias: t.name,
               },
             },
-            yAxis: {
-              position: 'left',
-            },
             color: color,
             label: _labelSetting,
+            xAxis: xAxis,
+            yAxis: yAxis,
           }
         }
         return this.setSizeSetting(setting);
@@ -414,11 +417,10 @@ export default {
                 alias: t.name,
               },
             },
-            yAxis: {
-              position: 'right',
-            },
             color: color,
             label: _labelSetting,
+            xAxis: false,
+            yAxis: yAxisExt,
           }
         }
         return this.setSizeSetting(setting);
@@ -481,9 +483,297 @@ export default {
 
       params.annotations = this.getAnalyse(this.chart);
 
+      params.legend = this.getLegend(this.chart);
+
+
+      console.log(params)
+
       return params;
     },
 
+    getXAxis(chart) {
+      let axis = {}
+      let customStyle
+      if (chart.customStyle) {
+        customStyle = JSON.parse(chart.customStyle)
+        // legend
+        if (customStyle.xAxis) {
+          const a = JSON.parse(JSON.stringify(customStyle.xAxis))
+          if (a.show) {
+            const title = (a.name && a.name !== '') ? {
+              text: a.name,
+              style: {
+                fill: a.nameTextStyle.color,
+                fontSize: parseInt(a.nameTextStyle.fontSize)
+              },
+              spacing: 8
+            } : null
+            const grid = a.splitLine.show ? {
+              line: {
+                style: {
+                  stroke: a.splitLine.lineStyle.color,
+                  lineWidth: parseInt(a.splitLine.lineStyle.width)
+                }
+              }
+            } : null
+            const axisCfg = a.axisLine ? a.axisLine : DEFAULT_XAXIS_STYLE.axisLine
+            const axisLine = axisCfg.show ? {
+              style: {
+                stroke: axisCfg.lineStyle.color,
+                lineWidth: parseInt(axisCfg.lineStyle.width)
+              }
+            } : null
+            const tickLine = axisCfg.show ? {
+              style: {
+                stroke: axisCfg.lineStyle.color
+              }
+            } : null
+            const rotate = parseInt(a.axisLabel.rotate)
+            const label = a.axisLabel.show ? {
+              rotate: rotate * Math.PI / 180,
+              style: {
+                textAlign: rotate > 20 ? 'start' : rotate < -20 ? 'end' : 'center',
+                fill: a.axisLabel.color,
+                fontSize: parseInt(a.axisLabel.fontSize)
+              },
+              formatter: function (value) {
+                if (chart.type.includes('horizontal')) {
+                  if (!a.axisLabelFormatter) {
+                    return valueFormatter(value, formatterItem)
+                  } else {
+                    return valueFormatter(value, a.axisLabelFormatter)
+                  }
+                } else {
+                  return value
+                }
+              }
+            } : null
+
+            axis = {
+              position: transAxisPosition(chart, a),
+              title: title,
+              grid: grid,
+              label: label,
+              line: axisLine,
+              tickLine: tickLine
+            }
+
+            // 轴值设置
+            delete axis.minLimit
+            delete axis.maxLimit
+            delete axis.tickCount
+          } else {
+            axis = false
+          }
+        }
+      }
+      return axis
+    },
+
+    getYAxis(chart) {
+      let axis = {}
+      let customStyle
+      if (chart.customStyle) {
+        customStyle = JSON.parse(chart.customStyle)
+        // legend
+        if (customStyle.yAxis) {
+          const a = JSON.parse(JSON.stringify(customStyle.yAxis))
+          if (a.show) {
+            const title = (a.name && a.name !== '') ? {
+              text: a.name,
+              style: {
+                fill: a.nameTextStyle.color,
+                fontSize: parseInt(a.nameTextStyle.fontSize)
+              },
+              spacing: 8
+            } : null
+            const grid = a.splitLine.show ? {
+              line: {
+                style: {
+                  stroke: a.splitLine.lineStyle.color,
+                  lineWidth: parseInt(a.splitLine.lineStyle.width)
+                }
+              }
+            } : null
+            const axisCfg = a.axisLine ? a.axisLine : DEFAULT_YAXIS_STYLE.axisLine
+            const axisLine = axisCfg.show ? {
+              style: {
+                stroke: axisCfg.lineStyle.color,
+                lineWidth: parseInt(axisCfg.lineStyle.width)
+              }
+            } : null
+            const tickLine = axisCfg.show ? {
+              style: {
+                stroke: axisCfg.lineStyle.color
+              }
+            } : null
+            const label = a.axisLabel.show ? {
+              rotate: parseInt(a.axisLabel.rotate) * Math.PI / 180,
+              style: {
+                fill: a.axisLabel.color,
+                fontSize: parseInt(a.axisLabel.fontSize)
+              },
+              formatter: function (value) {
+                if (chart.type === 'waterfall') {
+                  return value
+                } else {
+                  if (!chart.type.includes('horizontal')) {
+                    if (!a.axisLabelFormatter) {
+                      return valueFormatter(value, formatterItem)
+                    } else {
+                      return valueFormatter(value, a.axisLabelFormatter)
+                    }
+                  } else {
+                    return value
+                  }
+                }
+              }
+            } : null
+
+            axis = {
+              position: 'left',
+              title: title,
+              grid: grid,
+              label: label,
+              line: axisLine,
+              tickLine: tickLine
+            }
+
+            // 轴值设置
+            delete axis.minLimit
+            delete axis.maxLimit
+            delete axis.tickCount
+            const axisValue = a.axisValue
+            if (axisValue && !axisValue.auto) {
+              const yAxisSeriesMaxList = []
+              const maxList = []
+              chart.data.data.forEach(ele => {
+                maxList.push(ele.value)
+              })
+              yAxisSeriesMaxList.push(Math.max.apply(null, maxList))
+              if (yAxisSeriesMaxList.length > 0 && !isNaN(axisValue.max)) {
+                const max = Math.max.apply(null, yAxisSeriesMaxList)
+                if (max <= parseFloat(axisValue.max)) {
+                  axisValue.max && (axis.maxLimit = axis.max = parseFloat(axisValue.max))
+                }
+              }
+
+              const yAxisSeriesMinList = []
+              const minList = []
+              chart.data.data.forEach(ele => {
+                minList.push(ele.value)
+              })
+              yAxisSeriesMinList.push(Math.min.apply(null, minList))
+              if (yAxisSeriesMinList.length > 0 && !isNaN(axisValue.min)) {
+                const min = Math.min.apply(null, yAxisSeriesMinList)
+                if (min >= parseFloat(axisValue.min)) {
+                  axisValue.min && (axis.minLimit = axis.min = parseFloat(axisValue.min))
+                }
+              }
+              axisValue.splitCount && (axis.tickCount = parseFloat(axisValue.splitCount))
+            }
+
+          } else {
+            axis = false
+          }
+        }
+      } else {
+        return {position: 'left'}
+      }
+      return axis
+    },
+// yAxisExt
+    getYAxisExt(chart) {
+      let axis = {}
+      let customStyle
+      if (chart.customStyle) {
+        customStyle = JSON.parse(chart.customStyle)
+        // legend
+        if (customStyle.yAxisExt) {
+          const a = JSON.parse(JSON.stringify(customStyle.yAxisExt))
+          if (a.show) {
+            const title = (a.name && a.name !== '') ? {
+              text: a.name,
+              style: {
+                fill: a.nameTextStyle.color,
+                fontSize: parseInt(a.nameTextStyle.fontSize)
+              },
+              spacing: 8
+            } : null
+            const grid = a.splitLine.show ? {
+              line: {
+                style: {
+                  stroke: a.splitLine.lineStyle.color,
+                  lineWidth: parseInt(a.splitLine.lineStyle.width)
+                }
+              }
+            } : null
+            const axisCfg = a.axisLine ? a.axisLine : DEFAULT_YAXIS_EXT_STYLE.axisLine
+            const axisLine = axisCfg.show ? {
+              style: {
+                stroke: axisCfg.lineStyle.color,
+                lineWidth: parseInt(axisCfg.lineStyle.width)
+              }
+            } : null
+            const tickLine = axisCfg.show ? {
+              style: {
+                stroke: axisCfg.lineStyle.color
+              }
+            } : null
+            const label = a.axisLabel.show ? {
+              rotate: parseInt(a.axisLabel.rotate) * Math.PI / 180,
+              style: {
+                fill: a.axisLabel.color,
+                fontSize: parseInt(a.axisLabel.fontSize)
+              },
+              formatter: function (value) {
+                if (chart.type === 'waterfall') {
+                  return value
+                } else {
+                  if (!chart.type.includes('horizontal')) {
+                    if (!a.axisLabelFormatter) {
+                      return valueFormatter(value, formatterItem)
+                    } else {
+                      return valueFormatter(value, a.axisLabelFormatter)
+                    }
+                  } else {
+                    return value
+                  }
+                }
+              }
+            } : null
+
+            axis = {
+              position: 'right',
+              title: title,
+              grid: grid,
+              label: label,
+              line: axisLine,
+              tickLine: tickLine
+            }
+
+            // 轴值设置
+            delete axis.minLimit
+            delete axis.maxLimit
+            delete axis.tickCount
+            const axisValue = a.axisValue
+
+            if (axisValue && !axisValue.auto) {
+              axisValue.min && (axis.minLimit = parseFloat(axisValue.min))
+              axisValue.max && (axis.maxLimit = parseFloat(axisValue.max))
+              axisValue.splitCount && (axis.tickCount = parseFloat(axisValue.splitCount))
+            }
+
+          } else {
+            axis = false
+          }
+        }
+      } else {
+        return {position: 'right'}
+      }
+      return axis
+    },
+
     setSizeSetting(setting) {
       let customAttr = undefined;
       if (this.chart.customAttr) {
@@ -592,6 +882,102 @@ export default {
       return assistLine
     },
 
+    getLegend(chart) {
+      let legend = {}
+      let customStyle
+      if (chart.customStyle) {
+        customStyle = JSON.parse(chart.customStyle)
+        // legend
+        if (customStyle.legend) {
+          const l = JSON.parse(JSON.stringify(customStyle.legend))
+          if (l.show) {
+            let offsetX, offsetY, position
+            const orient = l.orient
+            const legendSymbol = l.icon
+            // fix position
+            if (l.hPosition === 'center') {
+              position = l.vPosition === 'center' ? 'top' : l.vPosition
+            } else if (l.vPosition === 'center') {
+              position = l.hPosition === 'center' ? 'left' : l.hPosition
+            } else {
+              if (orient === 'horizontal') {
+                position = l.vPosition + '-' + l.hPosition
+              } else {
+                position = l.hPosition + '-' + l.vPosition
+              }
+            }
+            // fix offset
+            if (orient === 'horizontal') {
+              if (l.hPosition === 'left') {
+                offsetX = 16
+              } else if (l.hPosition === 'right') {
+                offsetX = -16
+              } else {
+                offsetX = 0
+              }
+              if (l.vPosition === 'top') {
+                offsetY = 0
+              } else if (l.vPosition === 'bottom') {
+                if (chart.drill) {
+                  offsetY = -16
+                } else {
+                  offsetY = -4
+                }
+              } else {
+                offsetY = 0
+              }
+            } else {
+              if (l.hPosition === 'left') {
+                offsetX = 10
+              } else if (l.hPosition === 'right') {
+                offsetX = -10
+              } else {
+                offsetX = 0
+              }
+              if (l.vPosition === 'top') {
+                offsetY = 0
+              } else if (l.vPosition === 'bottom') {
+                if (chart.drill) {
+                  offsetY = -22
+                } else {
+                  offsetY = -10
+                }
+              } else {
+                offsetY = 0
+              }
+            }
+
+            legend = {
+              layout: orient,
+              position: position,
+              offsetX: offsetX,
+              offsetY: offsetY,
+              marker: {
+                symbol: legendSymbol
+              },
+              radio: false, // 柱状图图例的聚焦功能，默认先关掉
+              itemName: {
+                formatter: (text, item, index) => {
+                  if (chart.type !== 'bidirectional-bar') {
+                    return text
+                  }
+                  const yaxis = JSON.parse(chart.yaxis)[0]
+                  const yaxisExt = JSON.parse(chart.yaxisExt)[0]
+                  if (index === 0) {
+                    return yaxis.name
+                  }
+                  return yaxisExt.name
+                }
+              }
+            }
+          } else {
+            legend = false
+          }
+        }
+      }
+      return legend
+    },
+
     getSlider(chart) {
       let senior = {}
       let cfg = false

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

@@ -8,15 +8,15 @@
       <span class="padding-lr">{{ $t('chart.shape_attr') }}</span>
       <el-collapse v-model="attrActiveNames" class="style-collapse">
         <el-collapse-item name="color" :title="$t('chart.color')">
-          <color-selector :param="param" class="attr-selector" :chart="chart" @onColorChange="onColorChange" />
+          <color-selector :param="param" class="attr-selector" :chart="chart" @onColorChange="onColorChange"/>
         </el-collapse-item>
 
         <el-collapse-item name="size" :title="$t('chart.size')">
-          <size-selector :param="param" class="attr-selector" :chart="chart" @onSizeChange="onSizeChange" />
+          <size-selector :param="param" class="attr-selector" :chart="chart" @onSizeChange="onSizeChange"/>
         </el-collapse-item>
 
 
-        <el-collapse-item name="label" :title="$t('chart.label')" >
+        <el-collapse-item name="label" :title="$t('chart.label')">
           <label-selector
             :param="param"
             class="attr-selector"
@@ -29,7 +29,7 @@
           />
         </el-collapse-item>
 
-        <el-collapse-item name="tooltip" :title="$t('chart.tooltip')" >
+        <el-collapse-item name="tooltip" :title="$t('chart.tooltip')">
           <tooltip-selector-ant-v
             :param="param"
             class="attr-selector"
@@ -48,7 +48,32 @@
       <span class="padding-lr">{{ $t('chart.module_style') }}</span>
       <el-collapse v-model="styleActiveNames" class="style-collapse">
 
-        <el-collapse-item v-show="view.type" name="title" :title="$t('chart.title')">
+        <el-collapse-item v-if="view.type" name="XAxis" :title="$t('chart.xAxis')">
+          <XAxisSelectorAntV
+            :param="param"
+            class="attr-selector"
+            :chart="chart"
+            @onChangeXAxisForm="onChangeXAxisForm"
+          />
+        </el-collapse-item>
+        <el-collapse-item v-if="view.type" name="YAxis" :title="$t('chart.yAxis')">
+          <YAxisSelectorAntV
+            :param="param"
+            class="attr-selector"
+            :chart="chart"
+            @onChangeYAxisForm="onChangeYAxisForm"
+          />
+        </el-collapse-item>
+        <el-collapse-item v-if="view.type" name="YAxisExt" :title="$t('chart.yAxis_ext')">
+          <YAxisExtSelectorAntV
+            :param="param"
+            class="attr-selector"
+            :chart="chart"
+            @onChangeYAxisExtForm="onChangeYAxisExtForm"
+          />
+        </el-collapse-item>
+        <el-collapse-item v-if="view.type" name="title" :title="$t('chart.title')">
+
           <title-selector
             :param="param"
             class="attr-selector"
@@ -57,129 +82,164 @@
           />
         </el-collapse-item>
 
+        <!--        <el-collapse-item v-if="view.type" name="legend" :title="$t('chart.legend')">
+                  <legend-selector
+                    :param="param"
+                    class="attr-selector"
+                    :chart="chart"
+                    @onLegendChange="onLegendChange"
+                  />
+                </el-collapse-item>-->
+
       </el-collapse>
     </el-row>
   </div>
 </template>
 
 <script>
-  import ColorSelector from '../../../components/selector/ColorSelector'
+import 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 SizeSelector from '../../../components/selector/SizeSelector.vue'
+import SizeSelector from '../../../components/selector/SizeSelector.vue'
-  import messages from '@/de-base/lang/messages'
+import LegendSelector from '../../../components/selector/LegendSelectorAntV.vue'
-  export default {
+import XAxisSelectorAntV from '../../../components/selector/XAxisSelectorAntV.vue'
-    components: {
+import YAxisSelectorAntV from '../../../components/selector/YAxisSelectorAntV.vue'
-      ColorSelector,
+import YAxisExtSelectorAntV from '../../../components/selector/YAxisExtSelectorAntV.vue'
-      TitleSelector,
+import messages from '@/de-base/lang/messages'
-      TooltipSelectorAntV,
-      LabelSelector,
-      SizeSelector
-    },
-    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()
-      },
-      onSizeChange(val) {
-        this.view.customAttr.size = val
-        this.calcStyle()
-      },
-      onRefreshViewFields(val) {
-        this.view.viewFields = val
-        // this.calcStyle()
-        this.calcData()
-      },
-      onLabelChange(val) {
-        this.view.customAttr.label = val
-        this.calcStyle()
-      },
-
-      onTooltipChange(val) {
-        this.view.customAttr.tooltip = val
-        this.calcStyle()
-      },
-      onTextChange(val) {
-        this.view.customStyle.text = val
-        this.view.title = val.title
-        this.calcStyle()
-      },
-      onChangeBaseMapForm(val) {
-        this.view.customStyle.baseMapStyle = val
-        this.calcStyle()
-      },
-      onChangeBackgroundForm(val) {
-        this.view.customStyle.background = val
-        this.calcStyle()
-      },
-      onLegendChange(val) {
-        this.view.customStyle.legend = val
-        this.calcStyle()
-      },
-      calcStyle() {
-        this.$emit('plugin-call-back', {
-          eventName: 'plugins-calc-style',
-          eventParam: this.view
-        })
-      },
-      calcData(cache) {
-        this.$emit('plugin-call-back', {
-          eventName: 'calc-data',
-          eventParam: {
-            cache
-          }
-        })
-      },
     }
+  },
+  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>