feat(视图): ECharts 组合图支持单独控制主副轴标签

core/frontend/src/lang/en.js

@@ -1707,7 +1707,9 @@ export default {
     regression_loess: 'LOESS',
     regression_algo: 'Algorithm',
     trend_line: 'Trend Line',
-    field_enum: 'Enumeration values'
+    field_enum: 'Enumeration values',
+    main_axis_label: 'Main Axis Label',
+    sub_axis_label: 'Sub Axis Label'
   },
   dataset: {
     scope_edit: 'Effective only when editing',

core/frontend/src/lang/tw.js

@@ -1700,7 +1700,9 @@ export default {
     regression_loess: '局部加權',
     regression_algo: '算法',
     trend_line: '趨勢線',
-    field_enum: '枚舉值'
+    field_enum: '枚舉值',
+    main_axis_label: '主軸標籤',
+    sub_axis_label: '副軸標籤'
   },
   dataset: {
     scope_edit: '僅編輯時生效',

core/frontend/src/lang/zh.js

@@ -1699,7 +1699,9 @@ export default {
     regression_loess: '局部加权',
     regression_algo: '算法',
     trend_line: '趋势线',
-    field_enum: '枚举值'
+    field_enum: '枚举值',
+    main_axis_label: '主轴标签',
+    sub_axis_label: '副轴标签'
   },
   dataset: {
     scope_edit: '仅编辑时生效',

core/frontend/src/views/chart/chart/chart.js

@@ -199,10 +199,15 @@ export const DEFAULT_LABEL = {
   color: '#909399',
   fontSize: '10',
   formatter: '{c}',
-  gaugeFormatter: '{value}',
+  subShow: false,
+  subPosition: 'top',
+  subColor: '#909399',
+  subFontSize: '10',
+  subFormatter: '{c}',
   labelLine: {
     show: true
   },
+  gaugeFormatter: '{value}',
   gaugeLabelFormatter: {
     type: 'value', // auto,value,percent
     unit: 1, // 换算单位

core/frontend/src/views/chart/chart/mix/mix.js

@@ -65,7 +65,25 @@ export function baseMixOption(chart_option, chart) {
       }
       // label
       if (customAttr.label) {
-        y.label = customAttr.label
+        const { label } = customAttr
+        const mainLabel = {
+          show: label.show,
+          color: label.color,
+          position: label.position,
+          fontsize: label.fontSize,
+          formatter: label.formatter
+        }
+        let subLabel = {
+          show: label.subShow,
+          color: label.subColor,
+          position: label.subPosition,
+          fontSize: label.subFontSize,
+          formatter: label.subFormatter
+        }
+        if (label.subShow === undefined) {
+          subLabel = mainLabel
+        }
+        y.label = i >= yAxis.length ? subLabel : mainLabel
       }
       chart_option.legend.data.push(y.name)
       i >= yAxis.length ? (y.yAxisIndex = 1) : (y.yAxisIndex = 0)

core/frontend/src/views/chart/chart/util.js

@@ -2519,11 +2519,18 @@ export const TYPE_CONFIGS = [
         'mix'
       ],
       'label-selector': [
+        'mainLabel',
         'show',
         'fontSize',
         'color',
         'position-v',
-        'formatter'
+        'formatter',
+        'subLabel',
+        'subShow',
+        'subFontSize',
+        'subColor',
+        'sub-position-v',
+        'subFormatter'
       ],
       'tooltip-selector': [
         'show',

core/frontend/src/views/chart/components/shapeAttr/LabelSelector.vue

@@ -7,6 +7,12 @@
         label-width="80px"
         size="mini"
       >
+        <el-divider
+          v-if="showProperty('mainLabel')"
+          content-position="left"
+        >
+          <span style="font-size: 12px">{{ $t('chart.main_axis_label') }}</span>
+        </el-divider>
         <el-form-item
           v-show="showProperty('show')"
           :label="$t('chart.show')"
@@ -178,6 +184,102 @@
             />
           </el-form-item>
         </div>
+        <el-divider
+          v-if="showProperty('subLabel')"
+          content-position="left"
+        >
+          <span style="font-size: 12px">{{ $t('chart.sub_axis_label') }}</span>
+        </el-divider>
+        <el-form-item
+          v-show="showProperty('subShow')"
+          :label="$t('chart.show')"
+          class="form-item"
+        >
+          <el-checkbox
+            v-model="labelForm.subShow"
+            @change="changeLabelAttr('subShow')"
+          >{{ $t('chart.show') }}</el-checkbox>
+        </el-form-item>
+        <div v-show="labelForm.subShow">
+          <el-form-item
+            v-show="showProperty('subFontSize')"
+            :label="$t('chart.text_fontsize')"
+            class="form-item"
+          >
+            <el-select
+              v-model="labelForm.subFontSize"
+              :placeholder="$t('chart.text_fontsize')"
+              size="mini"
+              @change="changeLabelAttr('subFontSize')"
+            >
+              <el-option
+                v-for="option in fontSize"
+                :key="option.value"
+                :label="option.name"
+                :value="option.value"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item
+            v-show="showProperty('subColor')"
+            :label="$t('chart.text_color')"
+            class="form-item"
+          >
+            <el-color-picker
+              v-model="labelForm.subColor"
+              class="color-picker-style"
+              :predefine="predefineColors"
+              @change="changeLabelAttr('subColor')"
+            />
+          </el-form-item>
+          <el-form-item
+            v-show="showProperty('sub-position-v') "
+            :label="$t('chart.label_position')"
+            class="form-item"
+          >
+            <el-select
+              v-model="labelForm.subPosition"
+              :placeholder="$t('chart.label_position')"
+              @change="changeLabelAttr('subPosition')"
+            >
+              <el-option
+                v-for="option in labelPositionV"
+                :key="option.value"
+                :label="option.name"
+                :value="option.value"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item
+            v-show="showProperty('subFormatter')"
+            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">
+                    字符串模板 模板变量有：<br>{a}：系列名。<br>{b}：数据名。<br>{c}：数据值。<br>{d}：百分比（用于饼图等）。
+                  </div>
+                  <i
+                    class="el-icon-info"
+                    style="cursor: pointer;"
+                  />
+                </el-tooltip>
+              </span>
+            </span>
+            <el-input
+              v-model="labelForm.subFormatter"
+              type="textarea"
+              :autosize="{ minRows: 4, maxRows: 4}"
+              @blur="changeLabelAttr('subFormatter')"
+            />
+          </el-form-item>
+        </div>
         <el-form-item
           v-show="showProperty('gaugeFormatter')"
           class="form-item"
@@ -274,6 +376,11 @@ export default {
           this.labelForm = customAttr.label
           if (!this.labelForm.labelLine) {
             this.labelForm.labelLine = JSON.parse(JSON.stringify(DEFAULT_LABEL.labelLine))
+            this.labelForm.subShow = this.labelForm.subShow ?? this.labelForm.show
+            this.labelForm.subFontSize = this.labelForm.subFontSize ?? this.labelForm.fontSize
+            this.labelForm.subColor = this.labelForm.subColor ?? this.labelForm.color
+            this.labelForm.subPosition = this.labelForm.subPosition ?? this.labelForm.position
+            this.labelForm.subFormatter = this.labelForm.subFormatter ?? this.labelForm.formatter
           }
         }
       }