From df3353b972f141d1088de1c487db9eed470bc88b Mon Sep 17 00:00:00 2001
From: ulleo <ulleo.wang@gmail.com>
Date: Thu, 28 Mar 2024 13:54:30 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E8=A7=86=E5=9B=BE):=20AntV=E7=BB=84?=
 =?UTF-8?q?=E5=90=88=E5=9B=BE=E6=8F=92=E4=BB=B6=E6=A0=87=E7=AD=BE=E8=AE=BE?=
 =?UTF-8?q?=E7=BD=AE=E6=94=AF=E6=8C=81=E4=B8=BB=E5=89=AF=E8=BD=B4=E6=A0=87?=
 =?UTF-8?q?=E7=AD=BE=E5=8C=BA=E5=88=86=E8=AE=BE=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#8328
---
 .../src/components/selector/LabelSelector.vue | 92 ++++++++++++-------
 .../view-chartmix-frontend/src/utils/map.js   |  4 +
 .../src/views/antv/chartmix/index.vue         | 17 +++-
 3 files changed, 76 insertions(+), 37 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 a9592f7b98..f34963a6b3 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
@@ -2,6 +2,9 @@
   <div style="width: 100%;">
     <el-col>
       <el-form ref="labelForm" :model="labelForm" label-width="80px" size="mini">
+
+        <el-divider content-position="left"><span style="font-size: 12px">主轴标签</span></el-divider>
+
         <el-form-item :label="$t('chart.show')" class="form-item">
           <el-checkbox v-model="labelForm.show" @change="changeLabelAttr">{{ $t('chart.show') }}</el-checkbox>
         </el-form-item>
@@ -44,39 +47,52 @@
               />
             </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">
-                        <el-option-group
-                          v-for="group in fieldOptions"
-                          :key="group.label"
-                          :label="group.label"
-                        >
-                          <el-option
-                            v-for="item in group.options"
-                            :key="item.id"
-                            :label="item.name"
-                            :value="item.id"
-                            :disabled="item.disabled">
-                          </el-option>
-                        </el-option-group>
-                      </el-select>
-                    </el-form-item>
-                    <el-form-item class="form-item">
-                      <span slot="label">
-                        <span class="span-box">
-                          <span>{{ $t('chart.content_formatter') }}</span>
-                          <el-tooltip class="item" effect="dark" placement="bottom">
-                            <div slot="content">
-                              {{ $t('plugin_view_chartmix.tooltip_format_tip') }}
-                            </div>
-                            <i class="el-icon-info" style="cursor: pointer;"/>
-                          </el-tooltip>
-                        </span>
-                      </span>
-                      <el-input v-model="labelForm.labelTemplate" type="textarea" :placeholder="defaultPlaceholder"
-                                :autosize="{ minRows: 4, maxRows: 4}" @blur="changeLabelAttr"/>
-                    </el-form-item>-->
+        </div>
+
+        <el-divider content-position="left"><span style="font-size: 12px">副轴标签</span></el-divider>
+
+        <el-form-item :label="$t('chart.show')" class="form-item">
+          <el-checkbox v-model="labelForm.subShow" @change="changeLabelAttr">{{ $t('chart.show') }}</el-checkbox>
+        </el-form-item>
+        <div v-show="labelForm.subShow">
+          <el-form-item :label="$t('chart.text_fontsize')" class="form-item">
+            <el-select v-model="labelForm.subFontSize" :placeholder="$t('chart.text_fontsize')" size="mini"
+                       @change="changeLabelAttr">
+              <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="labelForm.subColor" 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.subPosition"
+              :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>
         </div>
       </el-form>
 
@@ -85,7 +101,7 @@
 </template>
 
 <script>
-import {COLOR_PANEL, DEFAULT_LABEL, getDefaultTemplate} from '@/utils/map'
+import {COLOR_PANEL, DEFAULT_LABEL, getDefaultTemplate} from '../../utils/map'
 
 export default {
   name: 'LabelSelector',
@@ -195,6 +211,13 @@ export default {
           if (!this.labelForm.labelLine) {
             this.labelForm.labelLine = JSON.parse(JSON.stringify(DEFAULT_LABEL.labelLine))
           }
+          if (this.labelForm.subShow === undefined) {
+            this.labelForm.subShow = DEFAULT_LABEL.subShow
+            this.labelForm.subPosition = DEFAULT_LABEL.subPosition
+            this.labelForm.subColor = DEFAULT_LABEL.subColor
+            this.labelForm.subFontSize = DEFAULT_LABEL.subFontSize
+          }
+
           if (!customAttr.label.initialized) {
             this.changeLabelAttr();
           }
@@ -270,6 +293,7 @@ export default {
 .form-item ::v-deep .el-checkbox__label {
   font-size: 12px;
 }
+
 .form-item ::v-deep .el-radio__label {
   font-size: 12px;
 }
diff --git a/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/utils/map.js b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/utils/map.js
index bc7880cc59..2674f80c1e 100644
--- a/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/utils/map.js
+++ b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/utils/map.js
@@ -60,6 +60,10 @@ export const DEFAULT_LABEL = {
   position: 'middle',
   color: '#000000',
   fontSize: '10',
+  subShow: true,
+  subPosition: 'middle',
+  subColor: '#000000',
+  subFontSize: '10',
   formatter: '{c}',
   gaugeFormatter: '{value}',
   labelLine: {
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 6edc2c3f21..ea135ba506 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
@@ -39,7 +39,8 @@ import {
   DEFAULT_XAXIS_STYLE,
   DEFAULT_YAXIS_STYLE,
   transAxisPosition,
-  getLineDash, DEFAULT_COLOR_CASE, formatterItem, DEFAULT_YAXIS_EXT_STYLE
+  getLineDash, DEFAULT_COLOR_CASE, formatterItem, DEFAULT_YAXIS_EXT_STYLE,
+  DEFAULT_LABEL
 } from '../../../utils/map';
 import ChartTitleUpdate from '../../../components/views/ChartTitleUpdate';
 import {map, filter, join, flatten, cloneDeep} from 'lodash-es';
@@ -279,7 +280,9 @@ export default {
       let colors = undefined;
       let alpha = DEFAULT_COLOR_CASE.alpha;
       let labelSetting = undefined;
-      let labelPosition = 'middle';
+      let labelPosition = DEFAULT_LABEL.position;
+      let subLabelSetting = undefined;
+      let subLabelPosition = DEFAULT_LABEL.subPosition;
       if (this.chart.customAttr) {
         customAttr = JSON.parse(this.chart.customAttr);
         if (customAttr) {
@@ -296,6 +299,14 @@ export default {
               },
             } : false
             labelPosition = customAttr.label.position;
+
+            subLabelSetting = customAttr.label.subShow ? {
+              style: {
+                fill: customAttr.label.subColor,
+                fontSize: parseInt(customAttr.label.subFontSize),
+              },
+            } : false
+            subLabelPosition = customAttr.label.subPosition;
           }
         }
       }
@@ -348,7 +359,7 @@ export default {
         }
       ) : [];
 
-      const yExtData = [this.getYExtData(flatten(yExtChartData), labelSetting, labelPosition, yaxisExtList, colors, gradient, alpha, xAxis, yAxisExt, yaxisCount)];
+      const yExtData = [this.getYExtData(flatten(yExtChartData), subLabelSetting, subLabelPosition, yaxisExtList, colors, gradient, alpha, xAxis, yAxisExt, yaxisCount)];
 
       const params = {
         tooltip: false,