Merge pull request #134 from dataease/pr@dev@饼图标签增加引导线选项

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',

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頁面，默認抽取第一個',

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 页，默认抽取第一个',

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,

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++) {

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

@@ -12,6 +12,9 @@
             <!--            <el-form-item :label="$t('chart.show')" class="form-item">-->
             <!--              <el-checkbox v-model="labelForm.show" @change="changeLabelAttr">{{ $t('chart.show') }}</el-checkbox>-->
             <!--            </el-form-item>-->
+            <el-form-item :label="$t('chart.pie_label_line_show')" class="form-item">
+              <el-checkbox v-model="labelForm.labelLine.show" @change="changeLabelAttr">{{ $t('chart.pie_label_line_show') }}</el-checkbox>
+            </el-form-item>
             <el-form-item :label="$t('chart.text_fontsize')" class="form-item">
               <el-select v-model="labelForm.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeLabelAttr">
                 <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
@@ -21,13 +24,9 @@
               <colorPicker v-model="labelForm.color" style="margin-top: 6px;cursor: pointer;z-index: 999;border: solid 1px black" @change="changeLabelAttr" />
             </el-form-item>
             <el-form-item :label="$t('chart.label_position')" class="form-item">
-              <el-radio-group v-model="labelForm.position" size="mini" @change="changeLabelAttr">
-                <el-radio-button label="inside">{{ $t('chart.inside') }}</el-radio-button>
-                <el-radio-button label="top">{{ $t('chart.text_pos_top') }}</el-radio-button>
-                <el-radio-button label="bottom">{{ $t('chart.text_pos_bottom') }}</el-radio-button>
-                <el-radio-button label="left">{{ $t('chart.text_pos_left') }}</el-radio-button>
-                <el-radio-button label="right">{{ $t('chart.text_pos_right') }}</el-radio-button>
-              </el-radio-group>
+              <el-select v-model="labelForm.position" :placeholder="$t('chart.label_position')" @change="changeLabelAttr">
+                <el-option v-for="option in labelPosition" :key="option.value" :label="option.name" :value="option.value" />
+              </el-select>
             </el-form-item>
             <el-form-item class="form-item">
               <span slot="label">
@@ -35,7 +34,7 @@
                   <span>{{ $t('chart.content_formatter') }}</span>
                   <el-tooltip class="item" effect="dark" placement="bottom">
                     <div slot="content">
-                      字符串支持用 \n 换行<br>字符串模板 模板变量有：<br>{a}：系列名。<br>{b}：数据名。<br>{c}：数据值。
+                      字符串支持用 \n 换行<br>字符串模板 模板变量有：<br>{a}：系列名。<br>{b}：数据名。<br>{c}：数据值。<br>{d}：百分比（用于饼图等）。
                     </div>
                     <i class="el-icon-info" style="cursor: pointer;" />
                   </el-tooltip>
@@ -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))
+            }
           }
         }
       }