diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js index 7b790f675a..42db324cf2 100644 --- a/frontend/src/lang/en.js +++ b/frontend/src/lang/en.js @@ -736,7 +736,10 @@ export default { change_ds: 'Change Dataset', change_ds_tip: 'Tips:Change Dataset will change fields,you need rebuild chart', axis_name_color: 'Name Color', - axis_name_fontsize: 'Name Fontsize' + axis_name_fontsize: 'Name Fontsize', + pie_label_line_show: 'Line', + outside: 'Outside', + center: 'Center' }, dataset: { sheet_warn: 'There are multiple sheet pages, and the first one is extracted by default', diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js index b502e06ce7..235c84a14f 100644 --- a/frontend/src/lang/tw.js +++ b/frontend/src/lang/tw.js @@ -778,7 +778,10 @@ export default { change_ds: '更換數據集', change_ds_tip: '提示:更換數據集將導致字段發生變化,需重新製作視圖', axis_name_color: '名稱顏色', - axis_name_fontsize: '名稱字體' + axis_name_fontsize: '名稱字體', + pie_label_line_show: '引導線', + outside: '外', + center: '中心' }, dataset: { sheet_warn: '有多個sheet頁面,默認抽取第一個', diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js index 0fedbf0d74..2f2f0a20ea 100644 --- a/frontend/src/lang/zh.js +++ b/frontend/src/lang/zh.js @@ -736,7 +736,10 @@ export default { change_ds: '更换数据集', change_ds_tip: '提示:更换数据集将导致字段发生变化,需重新制作视图', axis_name_color: '名称颜色', - axis_name_fontsize: '名称字体' + axis_name_fontsize: '名称字体', + pie_label_line_show: '引导线', + outside: '外', + center: '中心' }, dataset: { sheet_warn: '有多个 Sheet 页,默认抽取第一个', diff --git a/frontend/src/views/chart/chart/chart.js b/frontend/src/views/chart/chart/chart.js index 4bf4092f16..66cce7fb14 100644 --- a/frontend/src/views/chart/chart/chart.js +++ b/frontend/src/views/chart/chart/chart.js @@ -20,7 +20,7 @@ export const DEFAULT_SIZE = { lineSmooth: false, lineArea: false, pieInnerRadius: 0, - pieOuterRadius: 60, + pieOuterRadius: 80, pieRoseType: 'radius', pieRoseRadius: 5, funnelWidth: 80, @@ -45,7 +45,10 @@ export const DEFAULT_LABEL = { color: '#909399', fontSize: '10', formatter: '{c}', - gaugeFormatter: '{value}' + gaugeFormatter: '{value}', + labelLine: { + show: true + } } export const DEFAULT_TOOLTIP = { show: true, diff --git a/frontend/src/views/chart/chart/pie/pie.js b/frontend/src/views/chart/chart/pie/pie.js index 8188bffab7..0b8bb92469 100644 --- a/frontend/src/views/chart/chart/pie/pie.js +++ b/frontend/src/views/chart/chart/pie/pie.js @@ -29,6 +29,7 @@ export function basePieOption(chart_option, chart) { // label if (customAttr.label) { chart_option.series[0].label = customAttr.label + chart_option.series[0].labelLine = customAttr.label.labelLine } const valueArr = chart.data.series[0].data for (let i = 0; i < valueArr.length; i++) { diff --git a/frontend/src/views/chart/components/shape-attr/LabelSelector.vue b/frontend/src/views/chart/components/shape-attr/LabelSelector.vue index b72b29c882..a370f053f6 100644 --- a/frontend/src/views/chart/components/shape-attr/LabelSelector.vue +++ b/frontend/src/views/chart/components/shape-attr/LabelSelector.vue @@ -12,6 +12,9 @@ + + {{ $t('chart.pie_label_line_show') }} + @@ -21,13 +24,9 @@ - - {{ $t('chart.inside') }} - {{ $t('chart.text_pos_top') }} - {{ $t('chart.text_pos_bottom') }} - {{ $t('chart.text_pos_left') }} - {{ $t('chart.text_pos_right') }} - + + + @@ -35,7 +34,7 @@ {{ $t('chart.content_formatter') }}
- 字符串支持用 \n 换行
字符串模板 模板变量有:
{a}:系列名。
{b}:数据名。
{c}:数据值。 + 字符串支持用 \n 换行
字符串模板 模板变量有:
{a}:系列名。
{b}:数据名。
{c}:数据值。
{d}:百分比(用于饼图等)。
@@ -97,7 +96,16 @@ export default { return { labelForm: JSON.parse(JSON.stringify(DEFAULT_LABEL)), fontSize: [], - isSetting: false + isSetting: false, + labelPosition: [ + { name: this.$t('chart.inside'), value: 'inside' }, + { name: this.$t('chart.outside'), value: 'outside' }, + { name: this.$t('chart.center'), value: 'center' }, + { name: this.$t('chart.text_pos_top'), value: 'top' }, + { name: this.$t('chart.text_pos_bottom'), value: 'bottom' }, + { name: this.$t('chart.text_pos_left'), value: 'left' }, + { name: this.$t('chart.text_pos_right'), value: 'right' } + ] } }, watch: { @@ -113,6 +121,9 @@ export default { } if (customAttr.label) { this.labelForm = customAttr.label + if (!this.labelForm.labelLine) { + this.labelForm.labelLine = JSON.parse(JSON.stringify(DEFAULT_LABEL.labelLine)) + } } } }