From 3ba69be557fc4c9c99674badab94d9a2d9a34d11 Mon Sep 17 00:00:00 2001
From: ulleo <ulleo.wang@gmail.com>
Date: Wed, 6 Sep 2023 16:05:29 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20[AntV=E7=BB=84=E5=90=88=E5=9B=BE]=20?=
 =?UTF-8?q?=E6=9F=B1=E7=8A=B6=E5=9B=BE=E4=B8=8D=E8=83=BD=E8=AE=BE=E7=BD=AE?=
 =?UTF-8?q?=E6=A0=87=E7=AD=BE=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/selector/LabelSelector.vue | 35 +++++++++++++++-
 .../src/views/antv/chartmix/index.vue         | 42 ++++++++++++++-----
 2 files changed, 65 insertions(+), 12 deletions(-)

diff --git a/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/selector/LabelSelector.vue b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/selector/LabelSelector.vue
index 16b95033cc..d937f484f2 100644
--- a/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/selector/LabelSelector.vue
+++ b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/selector/LabelSelector.vue
@@ -16,6 +16,34 @@
             <el-color-picker v-model="labelForm.color" class="color-picker-style" :predefine="predefineColors"
                              @change="changeLabelAttr"/>
           </el-form-item>
+          <el-form-item
+            class="form-item"
+          >
+            <template #label>
+              {{ $t('chart.label_position') }}
+              <el-tooltip
+                effect="dark"
+                content="仅对柱状图生效"
+              >
+                <i
+                  class="el-icon-info"
+                  style="cursor: pointer;"
+                />
+              </el-tooltip>
+            </template>
+            <el-select
+              v-model="labelForm.position"
+              :placeholder="$t('chart.label_position')"
+              @change="changeLabelAttr"
+            >
+              <el-option
+                v-for="option in labelPositionV"
+                :key="option.value"
+                :label="option.name"
+                :value="option.value"
+              />
+            </el-select>
+          </el-form-item>
           <!--          <el-form-item :label="$t('chart.label')" class="form-item">
                       <el-select v-model="values" :placeholder="$t('commons.please_select')" multiple collapse-tags
                                  @change="changeFields">
@@ -125,7 +153,12 @@ export default {
       ],
       predefineColors: COLOR_PANEL,
       values: null,
-      busiType: 'labelAxis'
+      busiType: 'labelAxis',
+      labelPositionV: [
+        {name: this.$t('chart.text_pos_top'), value: 'top'},
+        {name: this.$t('chart.center'), value: 'middle'},
+        {name: this.$t('chart.text_pos_bottom'), value: 'bottom'}
+      ],
     }
   },
   watch: {
diff --git a/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/views/antv/chartmix/index.vue b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/views/antv/chartmix/index.vue
index 88e62a3d6e..1005301e69 100644
--- a/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/views/antv/chartmix/index.vue
+++ b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/views/antv/chartmix/index.vue
@@ -36,7 +36,13 @@ import {Mix} from '@antv/g2plot'
 import {uuid, hexColorToRGBA} 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} from '@/utils/map';
+import {
+  DEFAULT_TITLE_STYLE,
+  DEFAULT_XAXIS_STYLE,
+  DEFAULT_YAXIS_STYLE,
+  transAxisPosition,
+  getLineDash
+} from '@/utils/map';
 import ChartTitleUpdate from '@/components/views/ChartTitleUpdate';
 import _ from 'lodash';
 import {clear} from 'size-sensor'
@@ -294,6 +300,7 @@ export default {
       let customAttr = undefined;
       let colors = undefined;
       let labelSetting = undefined;
+      let labelPosition = 'middle';
       if (this.chart.customAttr) {
         customAttr = JSON.parse(this.chart.customAttr);
         if (customAttr) {
@@ -302,15 +309,12 @@ export default {
           }
           if (customAttr.label) {
             labelSetting = customAttr.label.show ? {
-              callback: function (x) {
-                return {
-                  style: {
-                    fill: customAttr.label.color,
-                    fontSize: parseInt(customAttr.label.fontSize),
-                  },
-                };
+              style: {
+                fill: customAttr.label.color,
+                fontSize: parseInt(customAttr.label.fontSize),
               },
             } : false
+            labelPosition = customAttr.label.position;
           }
         }
       }
@@ -330,8 +334,16 @@ export default {
 
         names.push(t.name);
 
+        const _chartType = this.getChartType(yaxisList[_index].chartType);
+
+        if (_chartType === "column") {
+          _labelSetting.position = labelPosition;
+        } else {
+          _labelSetting.position = undefined;
+        }
+
         return {
-          type: this.getChartType(yaxisList[_index].chartType),
+          type: _chartType,
           name: t.name,
           options: {
             data: _.map(t.data, (v) => {
@@ -374,8 +386,17 @@ export default {
 
         names.push(t.name);
 
+
+        const _chartType = this.getChartType(yaxisExtList[_index].chartType);
+
+        if (_chartType === "column") {
+          _labelSetting.position = labelPosition;
+        } else {
+          _labelSetting.position = undefined;
+        }
+
         return {
-          type: this.getChartType(yaxisExtList[_index].chartType),
+          type: _chartType,
           name: t.name,
           options: {
             data: _.map(t.data, (v) => {
@@ -444,7 +465,6 @@ export default {
                   item.value = valueFormatter(item.data.value, yaxisExtList[item.data.i].formatterCfg)
                 }
               })
-              console.log(originalItems)
               return _.filter(originalItems, (item) => {
                 const v = item.data.key;
                 if (item.title === v && item.title === item.value && item.name === "key" || !names.includes(item.name)) {