feat--饼图数值换行

report-ui/src/views/bigscreenDesigner/designer/tools/configure/pieCharts/widget-piechart.js

@@ -41,7 +41,7 @@ export const widgetPiechart = {
               name: 'innerNumber',
               required: false,
               placeholder: '',
-              value: 0,
+              value: 30,
             },
             {
               type: 'el-slider',
@@ -51,6 +51,45 @@ export const widgetPiechart = {
               placeholder: '',
               value: 60,
             },
+            {
+              type: 'el-switch',
+              label: '顺时针排布',
+              name: 'clockwise',
+              required: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'el-select',
+              label: '起始角度',
+              name: 'startAngle',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                { code: 0, name: '0度' },
+                { code: 30, name: '30度' },
+                { code: 90, name: '90度' },
+                { code: 180, name: '180度' },
+                { code: 360, name: '360度' }
+              ],
+              value: 90
+            },
+            {
+              type: 'el-slider',
+              label: '最小角度',
+              name: 'minAngle',
+              require: false,
+              placeholder: '',
+              value: 0,
+            },
+            {
+              type: 'el-slider',
+              label: '不显示标签角度',
+              name: 'minShowLabelAngle',
+              require: false,
+              placeholder: '',
+              value: 0,
+            },
 /*            {
               type: 'el-slider',
               label: '圆角属性',
@@ -216,6 +255,27 @@ export const widgetPiechart = {
               placeholder: '',
               value: false,
             },
+            {
+              type: 'el-input-number',
+              label: '小数点位数',
+              name: 'percentPrecision',
+              required: false,
+              placeholder: '',
+              value: 2,
+            },
+            {
+              type: 'el-select',
+              label: '文本位置',
+              name: 'position',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                { code: 'outside', name: '扇区外侧' },
+                { code: 'inside', name: '扇区内侧' },
+                { code: 'center', name: '扇区中心' }
+              ],
+              value: 'outside'
+            },
             {
               type: 'el-input-number',
               label: '字体字号',
@@ -246,6 +306,38 @@ export const widgetPiechart = {
               ],
               value: 'normal'
             },
+            {
+              type: 'el-switch',
+              label: '引导线显示',
+              name: 'isShowLabelLine',
+              required: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'el-switch',
+              label: '平滑引导线',
+              name: 'labelLineSmooth',
+              required: false,
+              placeholder: '',
+              value: false,
+            },
+            {
+              type: 'el-input-number',
+              label: '第一段长度',
+              name: 'labelLineLength',
+              required: false,
+              placeholder: '',
+              value: 15,
+            },
+            {
+              type: 'el-input-number',
+              label: '第二段长度',
+              name: 'labelLineLength2',
+              required: false,
+              placeholder: '',
+              value: 15,
+            },
           ],
         },
         {
@@ -453,7 +545,7 @@ export const widgetPiechart = {
         name: 'height',
         required: false,
         placeholder: '该容器在1080px大屏中的高度',
-        value: 200,
+        value: 300,
       },
     ],
   }

report-ui/src/views/bigscreenDesigner/designer/widget/pie/widgetPieNightingaleRose.vue

@@ -106,9 +106,10 @@ export default {
         roseType: optionsSetup.nightingaleRoseType,
         radius: [optionsSetup.innerNumber + "%", optionsSetup.outerNumber + "%"],
         center: ["50%", "50%"],
-        itemStyle: {
+        // echarts v5.0.0开始支持
+/*        itemStyle: {
           borderRadius: [optionsSetup.borderRadius + "%", optionsSetup.borderRadius + "%"],
-        },
+        },*/
       };
       this.options.series[0] = series;
     },

report-ui/src/views/bigscreenDesigner/designer/widget/pie/widgetPiechart.vue

@@ -110,15 +110,27 @@ export default {
       const series = {
         type: "pie",
         radius: [optionsSetup.innerNumber + "%", optionsSetup.outerNumber + "%"],
-        itemStyle: {
+        clockwise: optionsSetup.clockwise,
+        startAngle: optionsSetup.startAngle,
+        minAngle: optionsSetup.minAngle,
+        minShowLabelAngle: optionsSetup.minShowLabelAngle,
+        percentPrecision: optionsSetup.percentPrecision,
+        // echarts v5.0.0开始支持
+/*        itemStyle: {
           borderRadius: [optionsSetup.borderRadius + "%", optionsSetup.borderRadius + "%"],
         },
+        */
         emphasis: {
           itemStyle: {
             shadowBlur: 10,
             shadowOffsetX: 0,
             shadowColor: "rgba(0, 0, 0, 0.5)",
           },
+          label: {
+            show: true,
+            fontSize: 14,
+            fontWeight: 'bold'
+          },
         },
       };
       this.options.series[0] = series;
@@ -148,12 +160,12 @@ export default {
     // 数值设定
     setOptionsValue() {
       const optionsSetup = this.optionsSetup;
-      const series = this.options.series;
-      const numberValue = optionsSetup.numberValue ? "{c}" : "";
-      const percentage = optionsSetup.percentage ? "({d})%" : "";
+      const numberValue = optionsSetup.numberValue ? "\n{c}" : "";
+      const percentage = optionsSetup.percentage ? "\n({d}%)" : "";
       const label = {
         show: optionsSetup.isShow,
-        formatter: `{a|{b}：${numberValue} ${percentage}}`,
+        position: optionsSetup.position,
+        formatter: `{b}:${numberValue}${percentage}`,
         rich: {
           a: {
             padding: [-30, 15, -20, 15],
@@ -165,12 +177,15 @@ export default {
         fontSize: optionsSetup.fontSize,
         fontWeight: optionsSetup.optionsSetup,
       };
-      for (const key in series) {
-        if (series[key].type == "pie") {
-          series[key].label = label;
-          series[key].labelLine = {show: optionsSetup.isShow};
-        }
+      // 引导线
+      const labelLine = {
+        show: optionsSetup.isShowLabelLine,
+        length: optionsSetup.labelLineLength,
+        length2: optionsSetup.labelLineLength2,
+        smooth: optionsSetup.labelLineSmooth,
       }
+      this.options.series[0].label = label;
+      this.options.series[0].labelLine = labelLine;
     },
     // 提示语设置 tooltip
     setOptionsTooltip() {