feat: antv组合图插件大小设置

#6189
2023-11-10 13:45:44 +08:00 · 2023-11-10 13:45:44 +08:00 · beafeb4f7a
commit beafeb4f7a
parent ddf7207fc4
6 changed files with 366 additions and 179 deletions
--- a/core/frontend/src/views/chart/components/normal/LabelNormal.vue
+++ b/core/frontend/src/views/chart/components/normal/LabelNormal.vue
@ -203,7 +203,6 @@ export default {
      }
      if (this.chart.customStyle) {
        const customStyle = JSON.parse(this.chart.customStyle)
-        console.log(customStyle)
        if (customStyle.text) {
          this.title_show = customStyle.text.show
          this.title_class.fontSize = customStyle.text.fontSize + 'px'
@ -229,7 +228,6 @@ export default {
    },

    colorThreshold(valueColor, setBg) {
-      console.log(valueColor, setBg)
      if (this.chart.senior) {
        const senior = JSON.parse(this.chart.senior)
        if (senior.threshold && senior.threshold.labelThreshold && senior.threshold.labelThreshold.length > 0) {
--- a/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/selector/SizeSelector.vue
+++ b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/selector/SizeSelector.vue
@ -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>
--- a/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/selector/SizeSelectorAntV.vue
+++ b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/selector/SizeSelectorAntV.vue
@ -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>
--- a/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/utils/map.js
+++ b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/utils/map.js
@ -12,53 +12,14 @@ export const DEFAULT_COLOR_CASE = {
 }
 export const DEFAULT_SIZE = {
  barDefault: true,
-  barWidth: 40,
-  barGap: 0.4,
+  barWidthPercent: 50,
  lineWidth: 2,
  lineType: 'solid',
-  lineSymbol: 'marker',
+  lineSymbol: 'circle',
  lineSymbolSize: 4,
  lineSmooth: true,
-  lineArea: false,
-  pieInnerRadius: 0,
-  pieOuterRadius: 80,
-  pieRoseType: 'radius',
-  pieRoseRadius: 5,
-  funnelWidth: 80,
-  radarShape: 'polygon',
-  radarSize: 80,
-  tableTitleFontSize: 12,
-  tableItemFontSize: 12,
-  tableTitleHeight: 36,
-  tableItemHeight: 36,
-  tablePageSize: '20',
-  tableColumnMode: 'custom',
-  tableColumnWidth: 100,
-  tableHeaderAlign: 'left',
-  tableItemAlign: 'right',
-  gaugeMin: 0,
-  gaugeMax: 100,
-  gaugeStartAngle: 225,
-  gaugeEndAngle: -45,
-  dimensionFontSize: 18,
-  quotaFontSize: 18,
-  spaceSplit: 10,
-  dimensionShow: true,
-  quotaShow: true,
-  scatterSymbol: 'marker',
+  scatterSymbol: 'circle',
  scatterSymbolSize: 15,
-  symbolOpacity: 5,
-  symbolStrokeWidth: 1,
-  treemapWidth: 80,
-  treemapHeight: 80,
-  liquidMax: 100,
-  liquidSize: 80,
-  liquidOutlineBorder: 4,
-  liquidOutlineDistance: 8,
-  liquidWaveLength: 128,
-  liquidWaveCount: 3,
-  liquidShape: 'circle',
-  tablePageMode: 'page'
 }
 export const COLOR_PANEL = [
  '#ff4500',
@ -73,6 +34,27 @@ export const COLOR_PANEL = [
  '#FFFFFF'
 ]

+export const CHART_FONT_FAMILY = [
+  { name: '微软雅黑', value: 'Microsoft YaHei' },
+  { name: '宋体', value: 'SimSun' },
+  { name: '黑体', value: 'SimHei' },
+  { name: '楷体', value: 'KaiTi' }
+]
+
+export const CHART_FONT_LETTER_SPACE = [
+  { name: '0px', value: '0' },
+  { name: '1px', value: '1' },
+  { name: '2px', value: '2' },
+  { name: '3px', value: '3' },
+  { name: '4px', value: '4' },
+  { name: '5px', value: '5' },
+  { name: '6px', value: '6' },
+  { name: '7px', value: '7' },
+  { name: '8px', value: '8' },
+  { name: '9px', value: '9' },
+  { name: '10px', value: '10' }
+]
+
 export const DEFAULT_LABEL = {
  show: true,
  position: 'middle',
--- a/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/views/antv/chartmix/index.vue
+++ b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/views/antv/chartmix/index.vue
@ -330,10 +330,9 @@ export default {
        let color = colors && _index < colors.length ? hexColorToRGBA(colors[_index], alpha) : undefined;
        if (color && gradient) {
          color = setGradientColor(color, true, 270)
-          console.log(color)
        }

-        return {
+        const setting = {
          type: _chartType,
          name: t.name,
          options: {
@ -362,6 +361,7 @@ export default {
            label: _labelSetting,
          }
        }
+        return this.setSizeSetting(setting);
      }) : [];

      let _dataExt = this.chart.data && this.chart.data.data && this.chart.data.data.length > 0 ? _.map(_.filter(this.chart.data.data, (c, _index) => {
@ -390,10 +390,9 @@ export default {
        let color = colors && (yaxisCount + _index) < colors.length ? hexColorToRGBA(colors[yaxisCount + _index], alpha) : undefined;
        if (color && gradient) {
          color = setGradientColor(color, true, 270)
-          console.log(color)
        }

-        return {
+        const setting = {
          type: _chartType,
          name: t.name,
          options: {
@ -422,6 +421,7 @@ export default {
            label: _labelSetting,
          }
        }
+        return this.setSizeSetting(setting);
      }) : [];


@ -484,6 +484,41 @@ export default {
      return params;
    },

+    setSizeSetting(setting) {
+      let customAttr = undefined;
+      if (this.chart.customAttr) {
+        customAttr = JSON.parse(this.chart.customAttr);
+      }
+      if (customAttr && customAttr.size) {
+        setting.options.columnWidthRatio = undefined;
+        setting.options.smooth = undefined;
+        setting.options.point = undefined;
+        setting.options.lineStyle = undefined;
+        setting.options.size = undefined;
+        setting.options.shape = undefined;
+
+        if (setting.type === 'column' && !customAttr.size.barDefault) {
+          setting.options.columnWidthRatio = customAttr.size.barWidthPercent / 100.0
+        }
+        if (setting.type === 'line') {
+          setting.options.smooth = customAttr.size.lineSmooth
+          setting.options.point = {
+            size: parseInt(customAttr.size.lineSymbolSize),
+            shape: customAttr.size.lineSymbol
+          }
+          setting.options.lineStyle = {
+            lineWidth: parseInt(customAttr.size.lineWidth)
+          }
+        }
+        if (setting.type === 'scatter') {
+          setting.options.size = parseInt(customAttr.size.scatterSymbolSize)
+          setting.options.shape = customAttr.size.scatterSymbol
+        }
+      }
+
+      return setting;
+    },
+
    getAnalyse(chart) {
      let senior = {}
      const assistLine = []
--- a/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/views/antv/chartmix/style.vue
+++ b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/views/antv/chartmix/style.vue
@ -11,6 +11,10 @@
          <color-selector :param="param" class="attr-selector" :chart="chart" @onColorChange="onColorChange" />
        </el-collapse-item>

+        <el-collapse-item name="size" :title="$t('chart.size')">
+          <size-selector :param="param" class="attr-selector" :chart="chart" @onSizeChange="onSizeChange" />
+        </el-collapse-item>
+

        <el-collapse-item name="label" :title="$t('chart.label')" >
          <label-selector
@ -63,13 +67,15 @@
  import TitleSelector from '../../../components/selector/TitleSelector'
  import TooltipSelectorAntV from '../../../components/selector/TooltipSelectorAntV'
  import LabelSelector from '../../../components/selector/LabelSelector.vue'
+  import SizeSelector from '../../../components/selector/SizeSelector.vue'
  import messages from '@/de-base/lang/messages'
  export default {
    components: {
      ColorSelector,
      TitleSelector,
      TooltipSelectorAntV,
-      LabelSelector
+      LabelSelector,
+      SizeSelector
    },
    data() {
      return {
@ -110,6 +116,10 @@
        this.view.customAttr.color = val
        this.calcStyle()
      },
+      onSizeChange(val) {
+        this.view.customAttr.size = val
+        this.calcStyle()
+      },
      onRefreshViewFields(val) {
        this.view.viewFields = val
        // this.calcStyle()