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 @@ {{ $t('chart.show') }} + >
+ + + + + +