refactor(视图): 玫瑰图，饼图，环形图，玫瑰环形图优化

优化默认样式，默认样式修改为：显示标签: 分类+占比，不显示图例，饼图和环形图可设置占比保留小数 https://www.tapd.cn/55578866/prong/stories/view/1155578866001009362
https://www.tapd.cn/55578866/prong/stories/view/1155578866001010169

frontend/babel.config.js

@@ -2,5 +2,8 @@ module.exports = {
   presets: [
     '@vue/app'
   ],
-  plugins: ['@babel/plugin-proposal-optional-chaining']
+  plugins: [
+    '@babel/plugin-proposal-optional-chaining',
+    '@babel/plugin-proposal-nullish-coalescing-operator'
+  ]
 }

frontend/package.json

@@ -83,6 +83,7 @@
   "devDependencies": {
     "@babel/core": "^7.4.0-0",
     "@babel/plugin-proposal-optional-chaining": "^7.18.6",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
     "@babel/register": "7.0.0",
     "@vue/cli-plugin-babel": "3.6.0",
     "@vue/cli-plugin-eslint": "^5.0.4",

frontend/src/lang/en.js

@@ -1424,7 +1424,12 @@ export default {
     aggregation: 'Aggregation',
     filter_between: 'Between',
     field_not_empty: 'Field can not be empty',
-    summary_not_empty: 'Summary can not be empty'
+    summary_not_empty: 'Summary can not be empty',
+    reserve_zero: '0',
+    reserve_one: '1',
+    reserve_two: '2',
+    proportion: 'Proportion',
+    label_content: 'Label Content'
   },
   dataset: {
     parse_filed: 'Parse Field',

frontend/src/lang/tw.js

@@ -1424,7 +1424,12 @@ export default {
     aggregation: '聚合方式',
     filter_between: '介於',
     field_not_empty: '字段不能為空',
-    summary_not_empty: '聚合方式不能為空'
+    summary_not_empty: '聚合方式不能為空',
+    reserve_zero: '取整',
+    reserve_one: '一位',
+    reserve_two: '两位',
+    proportion: '佔比',
+    label_content: '標籤展示'
   },
   dataset: {
     parse_filed: '解析字段',

frontend/src/lang/zh.js

@@ -1423,7 +1423,12 @@ export default {
     aggregation: '聚合方式',
     filter_between: '介于',
     field_not_empty: '字段不能为空',
-    summary_not_empty: '聚合方式不能为空'
+    summary_not_empty: '聚合方式不能为空',
+    reserve_zero: '取整',
+    reserve_one: '一位',
+    reserve_two: '两位',
+    proportion: '占比',
+    label_content: '标签展示'
   },
   dataset: {
     parse_filed: '解析字段',

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

@@ -132,7 +132,8 @@ export const DEFAULT_LABEL = {
     decimalCount: 2, // 小数位数
     thousandSeparator: true// 千分符
   },
-  reserveDecimalCount: 2 // 百分比堆叠柱状图保留小数位数
+  reserveDecimalCount: 2, // 百分比堆叠柱状图,饼图，环形图保留小数位数
+  labelContent: ['dimension', 'proportion'] // 饼图，环形图指标展示项
 }
 export const DEFAULT_TOOLTIP = {
   show: true,

frontend/src/views/chart/chart/common/common_antv.js

@@ -1,6 +1,7 @@
 import { hexColorToRGBA } from '@/views/chart/chart/util'
 import { formatterItem, valueFormatter } from '@/views/chart/chart/formatter'
 import { DEFAULT_XAXIS_STYLE, DEFAULT_YAXIS_EXT_STYLE, DEFAULT_YAXIS_STYLE } from '@/views/chart/chart/chart'
+import { equalsAny } from '@/utils/StringUtils'
 
 export function getPadding(chart) {
   if (chart.drill) {
@@ -120,7 +121,7 @@ export function getLabel(chart) {
     if (customAttr.label) {
       const l = JSON.parse(JSON.stringify(customAttr.label))
       if (l.show) {
-        if (chart.type === 'pie') {
+        if (equalsAny(chart.type, 'pie', 'pie-donut')) {
           label = {
             type: l.position,
             autoRotate: false
@@ -130,6 +131,13 @@ export function getLabel(chart) {
             position: l.position,
             offsetY: -8
           }
+        } else if (equalsAny(chart.type, 'pie-rose', 'pie-donut-rose')) {
+          label = {
+            autoRotate: true
+          }
+          if (l.position === 'inner') {
+            label.offset = -10
+          }
         } else {
           label = {
             position: l.position
@@ -195,10 +203,32 @@ export function getLabel(chart) {
               for (let i = 0; i < yAxis.length; i++) {
                 const f = yAxis[i]
                 if (f.name === param.category) {
+                  let formatterCfg = formatterItem
                   if (f.formatterCfg) {
-                    res = valueFormatter(param.value, f.formatterCfg)
+                    formatterCfg = f.formatterCfg
+                  }
+                  // 饼图和环形图格式优化
+                  if (equalsAny(chart.type, 'pie', 'pie-donut')) {
+                    // 这边默认值取指标是为了兼容存量的视图
+                    const labelContent = l.labelContent ?? ['quota']
+                    const contentItems = []
+                    if (labelContent.includes('dimension')) {
+                      contentItems.push(param.field)
+                    }
+                    if (labelContent.includes('quota')) {
+                      contentItems.push(valueFormatter(param.value, formatterCfg))
+                    }
+                    if (labelContent.includes('proportion')) {
+                      const percentage = `${(Math.round(param.percent * 10000) / 100).toFixed(l.reserveDecimalCount)}%`
+                      if (labelContent.length === 3) {
+                        contentItems.push(`(${percentage})`)
                       } else {
-                    res = valueFormatter(param.value, formatterItem)
+                        contentItems.push(percentage)
+                      }
+                    }
+                    res = contentItems.join(' ')
+                  } else {
+                    res = valueFormatter(param.value, formatterCfg)
                   }
                   break
                 }

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

@@ -1083,7 +1083,9 @@ export const TYPE_CONFIGS = [
         'show',
         'fontSize',
         'color',
-        'position-pie'
+        'position-pie',
+        'label-content',
+        'reserve-decimal-count'
       ],
       'tooltip-selector-ant-v': [
         'show',
@@ -1141,7 +1143,9 @@ export const TYPE_CONFIGS = [
         'show',
         'fontSize',
         'color',
-        'position-pie'
+        'position-pie',
+        'label-content',
+        'reserve-decimal-count'
       ],
       'tooltip-selector-ant-v': [
         'show',

frontend/src/views/chart/components/shape-attr/LabelSelectorAntV.vue

@@ -18,6 +18,25 @@
           >{{ $t('chart.show') }}</el-checkbox>
         </el-form-item>
         <div v-show="labelForm.show">
+          <el-form-item
+            v-show="showProperty('label-content')"
+            :label="$t('chart.label_content')"
+            class="form-item"
+          >
+            <el-checkbox-group
+              v-model="labelForm.labelContent"
+              :label="$t('chart.label_content')"
+              :min="1"
+              :max="3"
+              @change="changeLabelAttr('labelContent')"
+            >
+              <el-checkbox
+                v-for="option in labelContentOptions"
+                :key="option.value"
+                :label="option.value"
+              >{{ option.name }}</el-checkbox>
+            </el-checkbox-group>
+          </el-form-item>
           <el-form-item
             v-show="showProperty('fontSize')"
             :label="$t('chart.text_fontsize')"
@@ -104,7 +123,7 @@
             </el-select>
           </el-form-item>
           <el-form-item
-            v-show="showProperty('reserve-decimal-count')"
+            v-show="showProperty('reserve-decimal-count') && (chart.type.includes('percentage') || labelForm.labelContent.includes('proportion'))"
             :label="$t('chart.label_reserve_decimal_count')"
             class="form-item"
           >
@@ -292,9 +311,14 @@ export default {
       typeList: formatterType,
       unitList: unitList,
       reserveDecimalCountOptions: [
-        { name: '取整', value: 0 },
+        { name: this.$t('chart.reserve_zero'), value: 0 },
-        { name: '一位', value: 1 },
+        { name: this.$t('chart.reserve_one'), value: 1 },
-        { name: '两位', value: 2 }
+        { name: this.$t('chart.reserve_two'), value: 2 }
+      ],
+      labelContentOptions: [
+        { name: this.$t('chart.dimension'), value: 'dimension' },
+        { name: this.$t('chart.quota'), value: 'quota' },
+        { name: this.$t('chart.proportion'), value: 'proportion' }
       ]
     }
   },
@@ -332,6 +356,12 @@ export default {
           if (!this.labelForm.gaugeLabelFormatter) {
             this.labelForm.gaugeLabelFormatter = JSON.parse(JSON.stringify(DEFAULT_LABEL.gaugeLabelFormatter))
           }
+          if ((this.labelForm.reserveDecimalCount ?? '') === '') {
+            this.labelForm.reserveDecimalCount = 2
+          }
+          if (!this.labelForm.labelContent) {
+            this.labelForm.labelContent = ['quota']
+          }
         }
       }
     },

frontend/src/views/chart/group/Group.vue

@@ -1036,7 +1036,11 @@ export default {
         if (view.render === 'echarts') {
           attr.label.position = 'inside'
         } else {
-          attr.label.position = 'inner'
+          const customStyle = JSON.parse(view.customStyle)
+          customStyle.legend.show = false
+          view.customStyle = JSON.stringify(customStyle)
+          attr.label.show = true
+          attr.label.position = 'outer'
         }
         // 环形图默认内径，玫瑰图为 外径 * 0.5，饼图为 外径 * 0.7
         if (type === 'pie-donut') {

frontend/src/views/chart/view/ChartEdit.vue

@@ -3078,11 +3078,22 @@ export default {
 
     setChartDefaultOptions() {
       const type = this.view.type
+      const customAttr = this.view.customAttr
+      const customStyle = this.view.customStyle
       if (type.includes('pie')) {
         if (this.view.render === 'echarts') {
-          this.view.customAttr.label.position = 'inside'
+          customAttr.label.position = 'inside'
         } else {
-          this.view.customAttr.label.position = 'inner'
+          customStyle.legend.show = false
+          customAttr.label.show = true
+          customAttr.label.position = 'outer'
+        }
+        // 环形图默认内径，玫瑰图为 外径 * 0.5，饼图为 外径 * 0.7
+        if (type === 'pie-donut') {
+          customAttr.size.pieInnerRadius = Math.round(customAttr.size.pieOuterRadius * 0.7)
+        }
+        if (type === 'pie-donut-rose') {
+          customAttr.size.pieInnerRadius = Math.round(customAttr.size.pieOuterRadius * 0.5)
         }
       } else if (type.includes('line')) {
         this.view.customAttr.label.position = 'top'