feat--饼图优化

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

@@ -63,6 +63,45 @@ export const widgetPieNightingale = {
               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: '圆角属性',
@@ -201,86 +240,6 @@ export const widgetPieNightingale = {
             },
           ],
         },
-        {
-          name: '数值设定',
-          list: [
-            {
-              type: 'el-switch',
-              label: '显示',
-              name: 'isShow',
-              required: false,
-              placeholder: '',
-              value: true,
-            },
-            {
-              type: 'el-switch',
-              label: '数值',
-              name: 'numberValue',
-              require: false,
-              placeholder: '',
-              value: true,
-            },
-            {
-              type: 'el-switch',
-              label: '百分比',
-              name: 'percentage',
-              require: false,
-              placeholder: '',
-              value: false,
-            },
-            {
-              type: 'el-input-number',
-              label: '字体字号',
-              name: 'fontSize',
-              required: false,
-              placeholder: '',
-              value: 14,
-            },
-            {
-              type: 'vue-color',
-              label: '字体颜色',
-              name: 'dataColor',
-              required: false,
-              placeholder: '',
-              value: ''
-            },
-            {
-              type: 'el-select',
-              label: '字体粗细',
-              name: 'fontWeight',
-              required: false,
-              placeholder: '',
-              selectOptions: [
-                { code: 'normal', name: '正常' },
-                { code: 'bold', name: '粗体' },
-                { code: 'bolder', name: '特粗体' },
-                { code: 'lighter', name: '细体' }
-              ],
-              value: 'normal'
-            },
-          ],
-        },
-        {
-          name: '提示语设置',
-          list: [
-            {
-              type: 'el-input-number',
-              label: '字体字号',
-              name: 'tipsFontSize',
-              required: false,
-              placeholder: '',
-              value: 16
-            },
-            {
-              type: 'vue-color',
-              label: '字体颜色',
-              name: 'tipsColor',
-              required: false,
-              placeholder: '',
-              value: '#00FEFF'
-            },
-          ],
-        },
         {
           name: '图例操作',
           list: [
@@ -355,6 +314,367 @@ export const widgetPieNightingale = {
             },
           ],
         },
+        {
+          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: [
+            {
+              type: 'el-switch',
+              label: '显示',
+              name: 'isShow',
+              required: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'el-switch',
+              label: '数值显示',
+              name: 'numberValue',
+              require: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'el-switch',
+              label: '百分比显示',
+              name: 'percentage',
+              require: false,
+              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: '边距',
+              name: 'padding',
+              require: false,
+              placeholder: '',
+              value: 0,
+            },
+            {
+              type: 'el-input-number',
+              label: '角度',
+              name: 'rotate',
+              require: false,
+              placeholder: '',
+              value: 0,
+            },
+            {
+              type: 'el-input-number',
+              label: '字体字号',
+              name: 'fontSize',
+              required: false,
+              placeholder: '',
+              value: 12,
+            },
+            {
+              type: 'vue-color',
+              label: '字体颜色',
+              name: 'fontColor',
+              required: false,
+              placeholder: '',
+              value: ''
+            },
+            {
+              type: 'el-select',
+              label: '字体粗细',
+              name: 'fontWeight',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                { code: 'normal', name: '正常' },
+                { code: 'bold', name: '粗体' },
+                { code: 'bolder', name: '特粗体' },
+                { code: 'lighter', name: '细体' }
+              ],
+              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: '引导线显示',
+              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: 5,
+            },
+            {
+              type: 'el-input-number',
+              label: '第二段长度',
+              name: 'labelLineLength2',
+              required: false,
+              placeholder: '',
+              value: 15,
+            },
+            {
+              type: 'vue-color',
+              label: '线条颜色',
+              name: 'lineStyleColor',
+              required: false,
+              placeholder: '',
+              value: ''
+            },
+            {
+              type: 'el-input-number',
+              label: '线条宽度',
+              name: 'lineStyleWidth',
+              required: false,
+              placeholder: '',
+              value: 1
+            },
+            {
+              type: 'el-select',
+              label: '线条类型',
+              name: 'lineStyleType',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                { code: 'solid', name: '实线' },
+                { code: 'dashed', name: '虚线' },
+                { code: 'dotted', name: '斑点' },
+              ],
+              value: 'solid'
+            },
+          ],
+        },
+        {
+          name: '提示语设置',
+          list: [
+            {
+              type: 'el-input-number',
+              label: '字体字号',
+              name: 'tipsFontSize',
+              required: false,
+              placeholder: '',
+              value: 16
+            },
+            {
+              type: 'vue-color',
+              label: '字体颜色',
+              name: 'tipsColor',
+              required: false,
+              placeholder: '',
+              value: '#00FEFF'
+            },
+            {
+              type: 'el-select',
+              label: '字体粗细',
+              name: 'tipsFontWeight',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                { code: 'normal', name: '正常' },
+                { code: 'bold', name: '粗体' },
+                { code: 'bolder', name: '特粗体' },
+                { code: 'lighter', name: '细体' }
+              ],
+              value: 'normal'
+            },
+            {
+              type: 'el-select',
+              label: '字体风格',
+              name: 'tipsFontStyle',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                { code: 'normal', name: '正常' },
+                { code: 'italic', name: 'italic斜体' },
+                { code: 'oblique', name: 'oblique斜体' },
+              ],
+              value: 'normal'
+            },
+            {
+              type: 'el-select',
+              label: '字体系列',
+              name: 'tipsFontFamily',
+              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'
+            },
+          ],
+        },
         {
           name: '自定义配色',
           list: [
@@ -465,7 +785,7 @@ export const widgetPieNightingale = {
         name: 'height',
         required: false,
         placeholder: '该容器在1080px大屏中的高度',
-        value: 200,
+        value: 300,
       },
     ],
   }

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

@@ -261,7 +261,7 @@ export const widgetPiechart = {
               name: 'legendWidth',
               required: false,
               placeholder: '',
-              value: 15,
+              value: 14,
             },
             {
               type: 'el-select',

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

@@ -89,12 +89,12 @@ export default {
   methods: {
     // 修改图标options属性
     editorOptions() {
+      this.setOptionsPie();
       this.setOptionsTitle();
       this.setOptionsValue();
       this.setOptionsTooltip();
       this.setOptionsLegend();
       this.setOptionsColor();
-      this.setOptionsPie();
       this.setOptionsData();
     },
     // 饼图设置
@@ -102,14 +102,42 @@ export default {
       const optionsSetup = this.optionsSetup;
       const series = {
         type: "pie",
+        center: ["50%", "50%"],
         // 饼图模式 面积模式"area" 半径模式"radius"//name: "面积模式",
         roseType: optionsSetup.nightingaleRoseType,
         radius: [optionsSetup.innerNumber + "%", optionsSetup.outerNumber + "%"],
-        center: ["50%", "50%"],
+        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 + "%"],
-        },*/
+        /*        itemStyle: {
+                  borderRadius: [optionsSetup.borderRadius + "%", optionsSetup.borderRadius + "%"],
+                },*/
+        // 高亮的扇区
+        emphasis: {
+          label: {
+            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,
+          },
+        },
       };
       this.options.series[0] = series;
     },
@@ -138,72 +166,67 @@ 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}}`,
-        rich: {
-          a: {
-            padding: [-30, 15, -20, 15],
-            color: optionsSetup.dataColor,
-            fontSize: optionsSetup.fontSize,
-            fontWeight: optionsSetup.fontWeight,
-          },
-        },
+        position: optionsSetup.position,
+        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,
       };
-      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,
+        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;
     },
     // tooltip 设置
     setOptionsTooltip() {
       const optionsSetup = this.optionsSetup;
       const tooltip = {
         trigger: "item",
-        show: true,
         textStyle: {
           color: optionsSetup.tipsColor,
           fontSize: optionsSetup.tipsFontSize,
+          fontWeight: optionsSetup.tipsFontWeight,
+          fontStyle: optionsSetup.tipsFontStyle,
+          fontFamily: optionsSetup.tipsFontFamily,
         },
       };
       this.options.tooltip = tooltip;
     },
-    // 边距设置
-    setOptionsMargin() {
-      const optionsSetup = this.optionsSetup;
-      const grid = {
-        left: optionsSetup.marginLeft,
-        right: optionsSetup.marginRight,
-        bottom: optionsSetup.marginBottom,
-        top: optionsSetup.marginTop,
-        containLabel: true,
-      };
-      this.options.grid = grid;
-    },
     // 图例操作 legend
     setOptionsLegend() {
       const optionsSetup = this.optionsSetup;
-      const legend = this.options.legend;
-      legend.show = optionsSetup.isShowLegend;
-      legend.left = optionsSetup.lateralPosition;
-      legend.right = optionsSetup.lateralPosition;
-      legend.top = optionsSetup.longitudinalPosition;
-      legend.bottom =
-        optionsSetup.longitudinalPosition;
-      legend.orient = optionsSetup.layoutFront;
-      legend.textStyle = {
-        color: optionsSetup.legendColor,
-        fontSize: optionsSetup.legendFontSize,
-      };
-      legend.itemWidth = optionsSetup.legendWidth;
+      const legend = {
+        show: optionsSetup.isShowLegend,
+        left: optionsSetup.lateralPosition,
+        right: optionsSetup.lateralPosition,
+        top: optionsSetup.longitudinalPosition,
+        bottom: optionsSetup.longitudinalPosition,
+        orient: optionsSetup.layoutFront,
+        textStyle: {
+          color: optionsSetup.legendColor,
+          fontSize: optionsSetup.legendFontSize,
+        },
+        itemWidth: optionsSetup.legendWidth,
+      }
+      this.options.legend = legend;
     },
     // 图例颜色修改
     setOptionsColor() {

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

@@ -102,13 +102,13 @@ export default {
       this.setOptionsLegend();
       this.setOptionsColor();
       this.setOptionsData();
-      this.setOptionsPiechartStyle();
     },
     // 饼图设置
     setOptionsPie() {
       const optionsSetup = this.optionsSetup;
       const series = {
         type: "pie",
+        center: ["50%", "50%"],
         radius: [optionsSetup.innerNumber + "%", optionsSetup.outerNumber + "%"],
         clockwise: optionsSetup.clockwise,
         startAngle: optionsSetup.startAngle,
@@ -218,19 +218,20 @@ export default {
     // 图例操作 legend
     setOptionsLegend() {
       const optionsSetup = this.optionsSetup;
-      const legend = this.options.legend;
-      legend.show = optionsSetup.isShowLegend;
-      legend.left = optionsSetup.lateralPosition;
-      legend.right = optionsSetup.lateralPosition;
-      legend.top = optionsSetup.longitudinalPosition;
-      legend.bottom =
-        optionsSetup.longitudinalPosition;
-      legend.orient = optionsSetup.layoutFront;
-      legend.textStyle = {
-        color: optionsSetup.legendColor,
-        fontSize: optionsSetup.legendFontSize,
-      };
-      legend.itemWidth = optionsSetup.legendWidth;
+      const legend = {
+        show: optionsSetup.isShowLegend,
+        left: optionsSetup.lateralPosition,
+        right: optionsSetup.lateralPosition,
+        top: optionsSetup.longitudinalPosition,
+        bottom: optionsSetup.longitudinalPosition,
+        orient: optionsSetup.layoutFront,
+        textStyle: {
+          color: optionsSetup.legendColor,
+          fontSize: optionsSetup.legendFontSize,
+        },
+        itemWidth: optionsSetup.legendWidth,
+      }
+      this.options.legend = legend;
     },
     // 图例颜色修改
     setOptionsColor() {