diff --git a/core/frontend/src/lang/en.js b/core/frontend/src/lang/en.js
index fee6c30ffa..077ac68f1c 100644
--- a/core/frontend/src/lang/en.js
+++ b/core/frontend/src/lang/en.js
@@ -1557,6 +1557,8 @@ export default {
reserve_two: '2',
proportion: 'Proportion',
label_content: 'Label Content',
+ show_conversion: 'Show Conversion',
+ conversion_label: 'Conversion Label',
percent: 'Percent',
table_index_desc: 'Index Header Name',
table_row_tooltip: 'Row Tooltip',
diff --git a/core/frontend/src/lang/tw.js b/core/frontend/src/lang/tw.js
index 897675a705..d65f9e383f 100644
--- a/core/frontend/src/lang/tw.js
+++ b/core/frontend/src/lang/tw.js
@@ -1554,6 +1554,8 @@ export default {
reserve_two: '兩位',
proportion: '佔比',
label_content: '標籤展示',
+ show_conversion: '轉換率展示',
+ conversion_label: '轉換率標籤',
percent: '占比',
table_index_desc: '表頭名稱',
table_row_tooltip: '行頭提示',
diff --git a/core/frontend/src/lang/zh.js b/core/frontend/src/lang/zh.js
index 949c1b4d07..41b2190dcb 100644
--- a/core/frontend/src/lang/zh.js
+++ b/core/frontend/src/lang/zh.js
@@ -1554,6 +1554,8 @@ export default {
reserve_two: '两位',
proportion: '占比',
label_content: '标签展示',
+ show_conversion: '转换率展示',
+ conversion_label: '转换率标签',
percent: '占比',
table_index_desc: '表头名称',
table_row_tooltip: '行头提示',
diff --git a/core/frontend/src/views/chart/chart/chart.js b/core/frontend/src/views/chart/chart/chart.js
index b362f61553..4f65a12353 100644
--- a/core/frontend/src/views/chart/chart/chart.js
+++ b/core/frontend/src/views/chart/chart/chart.js
@@ -209,7 +209,9 @@ export const DEFAULT_LABEL = {
thousandSeparator: true// 千分符
},
reserveDecimalCount: 2,
- labelContent: ['dimension', 'proportion']
+ labelContent: ['dimension', 'proportion'],
+ showConversion: false,
+ conversionLabel: '转换率'
}
export const DEFAULT_TOOLTIP = {
show: true,
diff --git a/core/frontend/src/views/chart/chart/funnel/funnel_antv.js b/core/frontend/src/views/chart/chart/funnel/funnel_antv.js
index 3adb30d4aa..308e7e1c47 100644
--- a/core/frontend/src/views/chart/chart/funnel/funnel_antv.js
+++ b/core/frontend/src/views/chart/chart/funnel/funnel_antv.js
@@ -19,6 +19,17 @@ export function baseFunnelOptionAntV(container, chart, action) {
const legend = getLegend(chart)
// data
const data = chart.data.data
+ // conversion tag
+ const labelAttr = JSON.parse(chart.customAttr).label
+ let conversionTag = labelAttr.showConversion
+ if (conversionTag) {
+ conversionTag = {
+ formatter: datum => {
+ const rate = ((datum[Funnel.CONVERSATION_FIELD][1] / datum[Funnel.CONVERSATION_FIELD][0]) * 100).toFixed(2)
+ return `${labelAttr.conversionLabel ?? ''}${rate}%`;
+ }
+ }
+ }
// options
const options = {
theme: theme,
@@ -29,7 +40,7 @@ export function baseFunnelOptionAntV(container, chart, action) {
label: label,
tooltip: tooltip,
legend: legend,
- conversionTag: false,
+ conversionTag,
interactions: [
{
type: 'legend-active', cfg: {
diff --git a/core/frontend/src/views/chart/chart/util.js b/core/frontend/src/views/chart/chart/util.js
index eaf2510e61..08bd5d2af8 100644
--- a/core/frontend/src/views/chart/chart/util.js
+++ b/core/frontend/src/views/chart/chart/util.js
@@ -1985,7 +1985,9 @@ export const TYPE_CONFIGS = [
'show',
'fontSize',
'color',
- 'position-h'
+ 'position-h',
+ 'conversion',
+ 'conversionLabel'
],
'tooltip-selector-ant-v': [
'show',
diff --git a/core/frontend/src/views/chart/components/shapeAttr/LabelSelectorAntV.vue b/core/frontend/src/views/chart/components/shapeAttr/LabelSelectorAntV.vue
index 4493f33917..cbc255e9b8 100644
--- a/core/frontend/src/views/chart/components/shapeAttr/LabelSelectorAntV.vue
+++ b/core/frontend/src/views/chart/components/shapeAttr/LabelSelectorAntV.vue
@@ -15,7 +15,7 @@