feat(图表): 桑基图提示信息支持配置总出占比显示 #16476

core/core-frontend/src/locales/en.ts

@@ -2093,7 +2093,8 @@ export default {
     quota_col_label: 'Quota Column Label',
     table_grand_total_label: 'Total Alias',
     table_field_total_label: 'Field Alias',
-    table_row_header_freeze: 'Row Header Freeze'
+    table_row_header_freeze: 'Row Header Freeze',
+    value_formatter_total_out_percent: 'Show percentage'
   },
   dataset: {
     field_value: 'Field Value',

core/core-frontend/src/locales/tw.ts

@@ -2034,7 +2034,8 @@ export default {
     quota_col_label: '指標列名',
     table_grand_total_label: '總計別名',
     table_field_total_label: '字段別名',
-    table_row_header_freeze: '行頭凍結'
+    table_row_header_freeze: '行頭凍結',
+    value_formatter_total_out_percent: '顯示佔比'
   },
   dataset: {
     field_value: '欄位值',

core/core-frontend/src/locales/zh-CN.ts

@@ -2040,7 +2040,8 @@ export default {
     quota_col_label: '指标列名',
     table_grand_total_label: '总计别名',
     table_field_total_label: '字段别名',
-    table_row_header_freeze: '行头冻结'
+    table_row_header_freeze: '行头冻结',
+    value_formatter_total_out_percent: '显示占比'
   },
   dataset: {
     field_value: '字段值',

core/core-frontend/src/models/chart/chart.d.ts

@@ -114,6 +114,10 @@ declare interface BaseFormatter {
    * 千分符
    */
   thousandSeparator: boolean
+  /**
+   * 显示总出占比
+   */
+  showTotalPercent: boolean
 }
 
 /**

core/core-frontend/src/views/chart/components/editor/editor-style/components/TooltipSelector.vue

@@ -456,6 +456,9 @@ watch(
     }
   }
 )
+const showTotalPercent = computed(() => {
+  return props.chart.type === 'sankey'
+})
 onMounted(() => {
   init()
   useEmitt({ name: 'addAxis', callback: updateSeriesTooltipFormatter })
@@ -697,6 +700,15 @@ onMounted(() => {
           :label="t('chart.value_formatter_thousand_separator')"
         />
       </el-form-item>
+      <el-form-item v-if="showTotalPercent" class="form-item" :class="'form-item-' + themes">
+        <el-checkbox
+          size="small"
+          :effect="props.themes"
+          v-model="state.tooltipForm.tooltipFormatter.showTotalPercent"
+          @change="changeTooltipAttr('tooltipFormatter.showTotalPercent')"
+          :label="t('chart.value_formatter_total_out_percent')"
+        />
+      </el-form-item>
     </template>
     <div v-if="showSeriesTooltipFormatter">
       <el-form-item>

core/core-frontend/src/views/chart/components/js/panel/charts/others/sankey.ts

@@ -176,6 +176,13 @@ export class SankeyBar extends G2PlotChartView<SankeyOptions, Sankey> {
       if (customAttr.tooltip) {
         const t = JSON.parse(JSON.stringify(customAttr.tooltip))
         if (t.show) {
+          // 计算每个source节点的总出
+          const outTotal = {}
+          if (Array.isArray(options.data)) {
+            options.data?.forEach(d => {
+              outTotal[d.source] = (outTotal[d.source] || 0) + d.value
+            })
+          }
           tooltip = {
             showTitle: false,
             showMarkers: false,
@@ -186,6 +193,16 @@ export class SankeyBar extends G2PlotChartView<SankeyOptions, Sankey> {
             },
             formatter: (datum: Datum) => {
               const { source, target, value } = datum
+              // 总出占比
+              if (t.tooltipFormatter.showTotalPercent) {
+                const decimalCount =
+                  t.tooltipFormatter.type !== 'auto' ? t.tooltipFormatter.decimalCount : 2
+                const ratio = (value / outTotal[source]).toFixed(decimalCount)
+                return {
+                  name: source + ' -> ' + target,
+                  value: valueFormatter(value, t.tooltipFormatter) + ` (${ratio}%)`
+                }
+              }
               return {
                 name: source + ' -> ' + target,
                 value: valueFormatter(value, t.tooltipFormatter)