feat--饼图配置项调整优化

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

@@ -228,6 +228,195 @@ export const widgetPiechart = {
             },
           ],
         },
+        {
+          name: '图例操作',
+          list: [
+            {
+              type: 'el-switch',
+              label: '图例',
+              name: 'isShowLegend',
+              required: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'vue-color',
+              label: '字体颜色',
+              name: 'legendColor',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+            {
+              type: 'el-input-number',
+              label: '字体字号',
+              name: 'legendFontSize',
+              required: false,
+              placeholder: '',
+              value: 12,
+            },
+            {
+              type: 'el-input-number',
+              label: '图例宽度',
+              name: 'legendWidth',
+              required: false,
+              placeholder: '',
+              value: 15,
+            },
+            {
+              type: 'el-select',
+              label: '横向位置',
+              name: 'lateralPosition',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                { code: 'center', name: '居中' },
+                { code: 'left', name: '左对齐' },
+                { code: 'right', name: '右对齐' },
+              ],
+              value: 'center'
+            },
+            {
+              type: 'el-select',
+              label: '纵向位置',
+              name: 'longitudinalPosition',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                { code: 'top', name: '顶部' },
+                { code: 'bottom', name: '底部' },
+              ],
+              value: 'top'
+            },
+            {
+              type: 'el-select',
+              label: '布局前置',
+              name: 'layoutFront',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                { code: 'vertical', name: '竖排' },
+                { code: 'horizontal', name: '横排' },
+              ],
+              value: 'horizontal'
+            },
+          ],
+        },
+        {
+          name: '扇区设置',
+          list: [
+            {
+              type: 'el-switch',
+              label: '文字高亮',
+              name: 'isShowEmphasisLabel',
+              required: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'el-input-number',
+              label: '字体字号',
+              name: 'emphasisLabelFontSize',
+              required: false,
+              placeholder: '',
+              value: 24,
+            },
+            {
+              type: 'vue-color',
+              label: '字体颜色',
+              name: 'emphasisLabelFontColor',
+              required: false,
+              placeholder: '',
+              value: ''
+            },
+            {
+              type: 'el-select',
+              label: '字体粗细',
+              name: 'emphasisLabelFontWeight',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                { code: 'normal', name: '正常' },
+                { code: 'bold', name: '粗体' },
+                { code: 'bolder', name: '特粗体' },
+                { code: 'lighter', name: '细体' }
+              ],
+              value: 'bold'
+            },
+            {
+              type: 'el-select',
+              label: '字体风格',
+              name: 'emphasisLabelFontStyle',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                { code: 'normal', name: '正常' },
+                { code: 'italic', name: 'italic斜体' },
+                { code: 'oblique', name: 'oblique斜体' },
+              ],
+              value: 'normal'
+            },
+            {
+              type: 'el-select',
+              label: '字体系列',
+              name: 'emphasisLabelFontFamily',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                { code: 'Microsoft YaHei', name: '微软雅黑' },
+                { code: 'serif', name: 'serif字体' },
+                { code: 'Arial', name: 'Arial字体' },
+                { code: 'Courier New', name: 'Courier New字体' },
+              ],
+              value: 'Microsoft YaHei'
+            },
+            {
+              type: 'vue-color',
+              label: '描边颜色',
+              name: 'borderColor',
+              required: false,
+              placeholder: '',
+              value: ''
+            },
+            {
+              type: 'el-input-number',
+              label: '描边宽度',
+              name: 'borderWidth',
+              required: false,
+              placeholder: '',
+              value: 1
+            },
+            {
+              type: 'el-select',
+              label: '描边类型',
+              name: 'borderType',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                { code: 'solid', name: '实线' },
+                { code: 'dashed', name: '虚线' },
+                { code: 'dotted', name: '斑点' },
+              ],
+              value: 'solid'
+            },
+            {
+              type: 'el-input-number',
+              label: '阴影系数',
+              name: 'shadowBlur',
+              required: false,
+              placeholder: '',
+              value: 10
+            },
+            {
+              type: 'vue-color',
+              label: '阴影颜色',
+              name: 'shadowColor',
+              required: false,
+              placeholder: '',
+              value: 'rgba(0, 0, 0, 0.5)'
+            },
+          ],
+        },
         {
           name: '数值设定',
           list: [
@@ -241,7 +430,7 @@ export const widgetPiechart = {
             },
             {
               type: 'el-switch',
-              label: '数值',
+              label: '数值显示',
               name: 'numberValue',
               require: false,
               placeholder: '',
@@ -249,7 +438,7 @@ export const widgetPiechart = {
             },
             {
               type: 'el-switch',
-              label: '百分比',
+              label: '百分比显示',
               name: 'percentage',
               require: false,
               placeholder: '',
@@ -265,7 +454,7 @@ export const widgetPiechart = {
             },
             {
               type: 'el-select',
-              label: '文本位置',
+              label: '位置',
               name: 'position',
               required: false,
               placeholder: '',
@@ -276,6 +465,22 @@ export const widgetPiechart = {
               ],
               value: 'outside'
             },
+            {
+              type: 'el-input-number',
+              label: '边距',
+              name: 'padding',
+              require: false,
+              placeholder: '',
+              value: 0,
+            },
+            {
+              type: 'el-input-number',
+              label: '角度',
+              name: 'rotate',
+              require: false,
+              placeholder: '',
+              value: 0,
+            },
             {
               type: 'el-input-number',
               label: '字体字号',
@@ -287,7 +492,7 @@ export const widgetPiechart = {
             {
               type: 'vue-color',
               label: '字体颜色',
-              name: 'dataColor',
+              name: 'fontColor',
               required: false,
               placeholder: '',
               value: ''
@@ -306,6 +511,33 @@ export const widgetPiechart = {
               ],
               value: 'normal'
             },
+            {
+              type: 'el-select',
+              label: '字体风格',
+              name: 'fontStyle',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                { code: 'normal', name: '正常' },
+                { code: 'italic', name: 'italic斜体' },
+                { code: 'oblique', name: 'oblique斜体' },
+              ],
+              value: 'normal'
+            },
+            {
+              type: 'el-select',
+              label: '字体系列',
+              name: 'fontFamily',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                { code: 'Microsoft YaHei', name: '微软雅黑' },
+                { code: 'serif', name: 'serif字体' },
+                { code: 'Arial', name: 'Arial字体' },
+                { code: 'Courier New', name: 'Courier New字体' },
+              ],
+              value: 'Microsoft YaHei'
+            },
             {
               type: 'el-switch',
               label: '引导线显示',
@@ -328,7 +560,7 @@ export const widgetPiechart = {
               name: 'labelLineLength',
               required: false,
               placeholder: '',
-              value: 15,
+              value: 5,
             },
             {
               type: 'el-input-number',
@@ -338,100 +570,96 @@ export const widgetPiechart = {
               placeholder: '',
               value: 15,
             },
-          ],
-        },
-        {
-          name: '提示语设置',
-          list: [
-            {
-              type: 'el-input-number',
-              label: '字体字号',
-              name: 'tipsFontSize',
-              required: false,
-              placeholder: '',
-              value: 16
-            },
             {
               type: 'vue-color',
-              label: '字体颜色',
-              name: 'tipsColor',
+              label: '线条颜色',
+              name: 'lineStyleColor',
               required: false,
               placeholder: '',
-              value: '#00FEFF'
+              value: ''
             },
-          ],
-        },
-        {
-          name: '图例操作',
-          list: [
             {
-              type: 'el-switch',
-              label: '图例',
-              name: 'isShowLegend',
+              type: 'el-input-number',
+              label: '线条宽度',
+              name: 'lineStyleWidth',
               required: false,
               placeholder: '',
-              value: true,
+              value: 1
             },
             {
-              type: 'vue-color',
-              label: '字体颜色',
-              name: 'legendColor',
+              type: 'el-select',
+              label: '线条类型',
+              name: 'lineStyleType',
               required: false,
               placeholder: '',
-              value: '#fff',
+              selectOptions: [
+                { code: 'solid', name: '实线' },
+                { code: 'dashed', name: '虚线' },
+                { code: 'dotted', name: '斑点' },
+              ],
+              value: 'solid'
             },
+          ],
+        },
+        {
+          name: '提示语设置',
+          list: [
             {
               type: 'el-input-number',
               label: '字体字号',
-              name: 'legendFontSize',
+              name: 'tipsFontSize',
               required: false,
               placeholder: '',
-              value: 12,
+              value: 16
             },
             {
-              type: 'el-input-number',
-              label: '图例宽度',
-              name: 'legendWidth',
+              type: 'vue-color',
+              label: '字体颜色',
+              name: 'tipsColor',
               required: false,
               placeholder: '',
-              value: 15,
+              value: '#00FEFF'
             },
             {
               type: 'el-select',
-              label: '横向位置',
-              name: 'lateralPosition',
+              label: '字体粗细',
+              name: 'tipsFontWeight',
               required: false,
               placeholder: '',
               selectOptions: [
-                { code: 'center', name: '居中' },
-                { code: 'left', name: '左对齐' },
-                { code: 'right', name: '右对齐' },
+                { code: 'normal', name: '正常' },
+                { code: 'bold', name: '粗体' },
+                { code: 'bolder', name: '特粗体' },
+                { code: 'lighter', name: '细体' }
               ],
-              value: 'center'
+              value: 'normal'
             },
             {
               type: 'el-select',
-              label: '纵向位置',
-              name: 'longitudinalPosition',
+              label: '字体风格',
+              name: 'tipsFontStyle',
               required: false,
               placeholder: '',
               selectOptions: [
-                { code: 'top', name: '顶部' },
-                { code: 'bottom', name: '底部' },
+                { code: 'normal', name: '正常' },
+                { code: 'italic', name: 'italic斜体' },
+                { code: 'oblique', name: 'oblique斜体' },
               ],
-              value: 'top'
+              value: 'normal'
             },
             {
               type: 'el-select',
-              label: '布局前置',
-              name: 'layoutFront',
+              label: '字体系列',
+              name: 'tipsFontFamily',
               required: false,
               placeholder: '',
               selectOptions: [
-                { code: 'vertical', name: '竖排' },
-                { code: 'horizontal', name: '横排' },
+                { code: 'Microsoft YaHei', name: '微软雅黑' },
+                { code: 'serif', name: 'serif字体' },
+                { code: 'Arial', name: 'Arial字体' },
+                { code: 'Courier New', name: 'Courier New字体' },
               ],
-              value: 'horizontal'
+              value: 'Microsoft YaHei'
             },
           ],
         },

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

@@ -116,20 +116,31 @@ export default {
         minShowLabelAngle: optionsSetup.minShowLabelAngle,
         percentPrecision: optionsSetup.percentPrecision,
         // echarts v5.0.0开始支持
-/*        itemStyle: {
-          borderRadius: [optionsSetup.borderRadius + "%", optionsSetup.borderRadius + "%"],
-        },
-        */
+        /*        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'
+            show: optionsSetup.isShowEmphasisLabel,
+            color: optionsSetup.emphasisLabelFontColor == '' ? null : optionsSetup.EmphasisLabelFontColor,
+            fontSize: optionsSetup.emphasisLabelFontSize,
+            fontWeight: optionsSetup.emphasisLabelFontWeight,
+            fontStyle: optionsSetup.emphasisLabelFontStyle,
+            fontFamily: optionsSetup.emphasisLabelFontFamily,
+          },
+          // 视觉引导线
+          labelLine: {
+            show: false,
+          },
+          // 色块描边
+          itemStyle: {
+            borderColor: optionsSetup.borderColor == '' ? null : optionsSetup.borderColor,
+            borderWidth: optionsSetup.borderWidth,
+            borderType: optionsSetup.borderType,
+            shadowBlur: optionsSetup.shadowBlur,
+            shadowColor: optionsSetup.shadowColor,
           },
         },
       };
@@ -165,17 +176,14 @@ export default {
       const label = {
         show: optionsSetup.isShow,
         position: optionsSetup.position,
-        formatter: `{b}:${numberValue}${percentage}`,
-        rich: {
-          a: {
-            padding: [-30, 15, -20, 15],
-            color: optionsSetup.dataColor,
-            fontSize: optionsSetup.fontSize,
-            fontWeight: optionsSetup.fontWeight,
-          },
-        },
+        rotate: optionsSetup.rotate,
+        formatter: `{b}${numberValue}${percentage}`,
+        padding: optionsSetup.padding,
         fontSize: optionsSetup.fontSize,
-        fontWeight: optionsSetup.optionsSetup,
+        color: optionsSetup.fontColor == '' ? null : optionsSetup.fontColor,
+        fontWeight: optionsSetup.fontWeight,
+        fontStyle: optionsSetup.fontStyle,
+        fontFamily: optionsSetup.fontFamily,
       };
       // 引导线
       const labelLine = {
@@ -183,6 +191,11 @@ export default {
         length: optionsSetup.labelLineLength,
         length2: optionsSetup.labelLineLength2,
         smooth: optionsSetup.labelLineSmooth,
+        lineStyle: {
+          color: optionsSetup.lineStyleColor == '' ? null : optionsSetup.lineStyleColor,
+          width: optionsSetup.lineStyleWidth,
+          type: optionsSetup.lineStyleType,
+        }
       }
       this.options.series[0].label = label;
       this.options.series[0].labelLine = labelLine;
@@ -195,6 +208,9 @@ export default {
         textStyle: {
           color: optionsSetup.tipsColor,
           fontSize: optionsSetup.tipsFontSize,
+          fontWeight: optionsSetup.tipsFontWeight,
+          fontStyle: optionsSetup.tipsFontStyle,
+          fontFamily: optionsSetup.tipsFontFamily,
         },
       };
       this.options.tooltip = tooltip;