feat--百分比图系列优化

report-ui/src/views/bigscreenDesigner/designer/tools/configure/percentCharts/widget-gauge.js

@@ -31,142 +31,261 @@ export const widgetGauge = {
         placeholder: '',
         value: ''
       },
-      {
-        type: 'el-input-number',
-        label: '最大值',
-        name: 'maxValue',
-        require: false,
-        placeholder: '',
-        value: 100,
-      },
       [
         {
-          name: "圆环设置",
+          name: '标题设置',
           list: [
             {
               type: 'el-switch',
-              label: '显示',
-              name: 'ringShow',
+              label: '标题显示',
+              name: 'isShowTitle',
               required: false,
               placeholder: '',
               value: true,
             },
             {
-              type: 'el-input-number',
-              label: '圆环宽度',
-              name: 'pieWeight',
-              require: false,
+              type: 'el-input-text',
+              label: '标题名',
+              name: 'text',
+              required: false,
               placeholder: '',
-              value: 10,
+              value: '',
             },
-          ]
-        },
-        {
-          name: '0%~30%渐变色',
-          list: [
             {
               type: 'vue-color',
-              label: '0处颜色',
-              name: 'color30p0',
+              label: '字体颜色',
+              name: 'textColor',
               required: false,
               placeholder: '',
-              value: 'rgba(0, 237, 3,0.1)'
+              value: '#FFD700'
             },
             {
-              type: 'vue-color',
-              label: '0.5处颜色',
-              name: 'color30p5',
+              type: 'el-input-number',
+              label: '字体字号',
+              name: 'textFontSize',
               required: false,
               placeholder: '',
-              value: 'rgba(0, 237, 3,0.6)'
+              value: 20
             },
             {
-              type: 'vue-color',
-              label: '1处颜色',
-              name: 'color30p10',
+              type: 'el-select',
+              label: '字体粗细',
+              name: 'textFontWeight',
               required: false,
               placeholder: '',
-              value: 'rgba(0, 237, 3,1)'
+              selectOptions: [
+                {code: 'normal', name: '正常'},
+                {code: 'bold', name: '粗体'},
+                {code: 'bolder', name: '特粗体'},
+                {code: 'lighter', name: '细体'}
+              ],
+              value: 'normal'
             },
-          ]
-        },
-        {
-          name: '30%~70%渐变色',
-          list: [
             {
-              type: 'vue-color',
-              label: '0处颜色',
-              name: 'color70p0',
+              type: 'el-select',
+              label: '字体风格',
+              name: 'textFontStyle',
               required: false,
               placeholder: '',
-              value: 'rgba(255, 184, 0,0.1)'
+              selectOptions: [
+                {code: 'normal', name: '正常'},
+                {code: 'italic', name: 'italic斜体'},
+                {code: 'oblique', name: 'oblique斜体'},
+              ],
+              value: 'normal'
             },
             {
-              type: 'vue-color',
-              label: '0.5处颜色',
-              name: 'color70p5',
+              type: 'el-select',
+              label: '字体系列',
+              name: 'textFontFamily',
               required: false,
               placeholder: '',
-              value: 'rgba(255, 184, 0,0.6)'
+              selectOptions: [
+                {code: 'sans-serif', name: 'sans-serif'},
+                {code: 'serif', name: 'serif'},
+                {code: 'Arial', name: 'Arial'},
+                {code: 'Courier New', name: 'Courier New'},
+              ],
+              value: 'sans-serif'
+            },
+            {
+              type: 'el-input-text',
+              label: '副标题名',
+              name: 'subtext',
+              required: false,
+              placeholder: '',
+              value: ''
             },
             {
               type: 'vue-color',
-              label: '1处颜色',
-              name: 'color70p10',
+              label: '字体颜色',
+              name: 'subtextColor',
               required: false,
               placeholder: '',
-              value: 'rgba(255, 184, 0,1)'
+              value: 'rgba(30, 144, 255, 1)'
             },
-          ]
+            {
+              type: 'el-input-number',
+              label: '字体字号',
+              name: 'subtextFontSize',
+              required: false,
+              placeholder: '',
+              value: 20
+            },
+            {
+              type: 'el-select',
+              label: '字体粗细',
+              name: 'subtextFontWeight',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'normal', name: '正常'},
+                {code: 'bold', name: '粗体'},
+                {code: 'bolder', name: '特粗体'},
+                {code: 'lighter', name: '细体'}
+              ],
+              value: 'normal'
+            },
+            {
+              type: 'el-select',
+              label: '字体风格',
+              name: 'subtextFontStyle',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'normal', name: '正常'},
+                {code: 'italic', name: 'italic斜体'},
+                {code: 'oblique', name: 'oblique斜体'},
+              ],
+              value: 'normal'
+            },
+            {
+              type: 'el-select',
+              label: '字体系列',
+              name: 'subtextFontFamily',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'sans-serif', name: 'sans-serif'},
+                {code: 'serif', name: 'serif'},
+                {code: 'Arial', name: 'Arial'},
+                {code: 'Courier New', name: 'Courier New'},
+              ],
+              value: 'sans-serif'
+            },
+            {
+              type: 'el-select',
+              label: '左右位置',
+              name: 'titleLeft',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'center', name: '居中'},
+                {code: 'left', name: '左对齐'},
+                {code: 'right', name: '右对齐'},
+              ],
+              value: 'center'
+            },
+            {
+              type: 'el-slider',
+              label: '上下间距',
+              name: 'titleTop',
+              required: false,
+              placeholder: '',
+              value: 0,
+            },
+            {
+              type: 'el-input-number',
+              label: '主副标题间距',
+              name: 'titleItemGap',
+              required: false,
+              placeholder: '',
+              value: 0
+            },
+          ],
         },
         {
-          name: '70%~100%渐变色',
+          name: "仪表盘设置",
           list: [
             {
-              type: 'vue-color',
-              label: '0处颜色',
-              name: 'color100p0',
+              type: 'el-switch',
+              label: '顺时针渲染',
+              name: 'clockwise',
               required: false,
               placeholder: '',
-              value: 'rgba(175, 36, 74,0.1)'
+              value: true,
             },
             {
-              type: 'vue-color',
-              label: '0.5处颜色',
-              name: 'color100p5',
+              type: 'el-input-number',
+              label: '起始角度',
+              name: 'startAngle',
               required: false,
               placeholder: '',
-              value: 'rgba(255, 36, 74,0.6)'
+              selectOptions: '',
+              value: 225
             },
             {
-              type: 'vue-color',
-              label: '1处颜色',
-              name: 'color100p10',
+              type: 'el-input-number',
+              label: '结束角度',
+              name: 'endAngle',
               required: false,
               placeholder: '',
-              value: 'rgba(255, 36, 74,1)'
+              selectOptions: '',
+              value: -45
+            },
+            {
+              type: 'el-input-number',
+              label: '最大值',
+              name: 'maxValue',
+              require: false,
+              placeholder: '',
+              value: 100,
             },
           ]
         },
         {
-          name: "刻度线",
+          name: "圆环设置",
           list: [
             {
               type: 'el-switch',
-              label: '显示',
+              label: '圆环显示',
+              name: 'ringShow',
+              required: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'el-input-number',
+              label: '圆环宽度',
+              name: 'pieWeight',
+              require: false,
+              placeholder: '',
+              value: 10,
+            },
+            {
+              type: 'el-switch',
+              label: '刻度线显示',
               name: 'tickShow',
               required: false,
               placeholder: '',
               value: true,
             },
             {
+              type: 'el-input-number',
+              label: '刻度数',
+              name: 'tickSplitNumber',
+              required: false,
+              placeholder: '',
+              value: 5,
+            },
+            /*            {
               type: 'el-input-number',
               label: '距离',
               name: 'tickDistance',
               require: false,
               placeholder: '',
               value: 0,
-            },
+            },*/
             {
               type: 'el-input-number',
               label: '长度',
@@ -183,27 +302,35 @@ export const widgetGauge = {
               placeholder: '',
               value: 2,
             },
-          ]
-        },
-        {
-          name: "指标线",
-          list: [
+            {
+              type: 'el-select',
+              label: '刻度线类型',
+              name: 'tickType',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'solid', name: '实线'},
+                {code: 'dashed', name: '虚线'},
+                {code: 'dotted', name: '斑点'},
+              ],
+              value: 'solid'
+            },
             {
               type: 'el-switch',
-              label: '显示',
+              label: '指标线显示',
               name: 'splitShow',
               required: false,
               placeholder: '',
               value: true,
             },
-            {
+/*            {
               type: 'el-input-number',
               label: '距离',
               name: 'splitDistance',
               require: false,
               placeholder: '',
               value: 0,
-            },
+            },*/
             {
               type: 'el-input-number',
               label: '长度',
@@ -220,47 +347,60 @@ export const widgetGauge = {
               placeholder: '',
               value: 4,
             },
+            {
+              type: 'el-select',
+              label: '指标线类型',
+              name: 'splitType',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'solid', name: '实线'},
+                {code: 'dashed', name: '虚线'},
+                {code: 'dotted', name: '斑点'},
+              ],
+              value: 'solid'
+            },
           ]
         },
         {
-          name: "指标",
+          name: "数值设定",
           list: [
             {
               type: 'el-switch',
-              label: '显示',
-              name: 'labelShow',
+              label: '数值显示',
+              name: 'isShow',
               required: false,
               placeholder: '',
               value: true,
             },
+            {
+              type: 'el-switch',
+              label: '百分比显示',
+              name: 'percentage',
+              require: false,
+              placeholder: '',
+              value: true,
+            },
             {
               type: 'el-input-number',
-              label: '距离',
-              name: 'labelDistance',
+              label: '数值字号',
+              name: 'detailFontSize',
               require: false,
               placeholder: '',
-              value: 0,
+              value: 24,
             },
             {
               type: 'vue-color',
-              label: '颜色',
-              name: 'labelColor',
+              label: '数值颜色',
+              name: 'detailColor',
               required: false,
               placeholder: '',
               value: '#fff',
             },
-            {
-              type: 'el-input-number',
-              label: '字号',
-              name: 'labelFontSize',
-              require: false,
-              placeholder: '',
-              value: 10,
-            },
             {
               type: 'el-select',
               label: '字体粗细',
-              name: 'labelFontWeight',
+              name: 'detailFontWeight',
               required: false,
               placeholder: '',
               selectOptions: [
@@ -274,7 +414,7 @@ export const widgetGauge = {
             {
               type: 'el-select',
               label: '字体风格',
-              name: 'labelFontStyle',
+              name: 'detailFontStyle',
               required: false,
               placeholder: '',
               selectOptions: [
@@ -284,31 +424,56 @@ export const widgetGauge = {
               ],
               value: 'normal'
             },
-          ]
-        },
-        {
-          name: "数值",
-          list: [
+            {
+              type: 'el-select',
+              label: '字体系列',
+              name: 'detailFontFamily',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'sans-serif', name: 'sans-serif'},
+                {code: 'serif', name: 'serif'},
+                {code: 'Arial', name: 'Arial'},
+                {code: 'Courier New', name: 'Courier New'},
+              ],
+              value: 'sans-serif'
+            },
+            {
+              type: 'el-switch',
+              label: '指标显示',
+              name: 'labelShow',
+              required: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'el-input-number',
+              label: '距离',
+              name: 'labelDistance',
+              require: false,
+              placeholder: '',
+              value: 5,
+            },
             {
               type: 'vue-color',
-              label: '颜色',
-              name: 'detailColor',
+              label: '指标颜色',
+              name: 'labelColor',
               required: false,
               placeholder: '',
               value: '#fff',
             },
             {
               type: 'el-input-number',
-              label: '字号',
-              name: 'detailFontSize',
+              label: '指标字号',
+              name: 'labelFontSize',
               require: false,
               placeholder: '',
-              value: 14,
+              value: 10,
             },
             {
               type: 'el-select',
               label: '字体粗细',
-              name: 'detailFontWeight',
+              name: 'labelFontWeight',
               required: false,
               placeholder: '',
               selectOptions: [
@@ -322,7 +487,7 @@ export const widgetGauge = {
             {
               type: 'el-select',
               label: '字体风格',
-              name: 'detailFontStyle',
+              name: 'labelFontStyle',
               required: false,
               placeholder: '',
               selectOptions: [
@@ -332,6 +497,107 @@ export const widgetGauge = {
               ],
               value: 'normal'
             },
+            {
+              type: 'el-select',
+              label: '字体系列',
+              name: 'labelFontFamily',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'sans-serif', name: 'sans-serif'},
+                {code: 'serif', name: 'serif'},
+                {code: 'Arial', name: 'Arial'},
+                {code: 'Courier New', name: 'Courier New'},
+              ],
+              value: 'sans-serif'
+            },
+          ]
+        },
+        {
+          name: '0%~30%渐变色',
+          list: [
+            {
+              type: 'vue-color',
+              label: '0处颜色',
+              name: 'color30p0',
+              required: false,
+              placeholder: '',
+              value: 'rgba(0, 237, 3,0.1)'
+            },
+            {
+              type: 'vue-color',
+              label: '0.5处颜色',
+              name: 'color30p5',
+              required: false,
+              placeholder: '',
+              value: 'rgba(0, 237, 3,0.6)'
+            },
+            {
+              type: 'vue-color',
+              label: '1处颜色',
+              name: 'color30p10',
+              required: false,
+              placeholder: '',
+              value: 'rgba(0, 237, 3,1)'
+            },
+          ]
+        },
+        {
+          name: '30%~70%渐变色',
+          list: [
+            {
+              type: 'vue-color',
+              label: '0处颜色',
+              name: 'color70p0',
+              required: false,
+              placeholder: '',
+              value: 'rgba(255, 184, 0,0.1)'
+            },
+            {
+              type: 'vue-color',
+              label: '0.5处颜色',
+              name: 'color70p5',
+              required: false,
+              placeholder: '',
+              value: 'rgba(255, 184, 0,0.6)'
+            },
+            {
+              type: 'vue-color',
+              label: '1处颜色',
+              name: 'color70p10',
+              required: false,
+              placeholder: '',
+              value: 'rgba(255, 184, 0,1)'
+            },
+          ]
+        },
+        {
+          name: '70%~100%渐变色',
+          list: [
+            {
+              type: 'vue-color',
+              label: '0处颜色',
+              name: 'color100p0',
+              required: false,
+              placeholder: '',
+              value: 'rgba(175, 36, 74,0.1)'
+            },
+            {
+              type: 'vue-color',
+              label: '0.5处颜色',
+              name: 'color100p5',
+              required: false,
+              placeholder: '',
+              value: 'rgba(255, 36, 74,0.6)'
+            },
+            {
+              type: 'vue-color',
+              label: '1处颜色',
+              name: 'color100p10',
+              required: false,
+              placeholder: '',
+              value: 'rgba(255, 36, 74,1)'
+            },
           ]
         },
       ],
@@ -422,7 +688,7 @@ export const widgetGauge = {
         name: 'height',
         required: false,
         placeholder: '该容器在1080px大屏中的高度',
-        value: 200,
+        value: 300,
       },
     ],
   }

report-ui/src/views/bigscreenDesigner/designer/widget/percent/widgetGauge.vue

@@ -111,7 +111,7 @@ export default {
             },
             detail: {
               valueAnimation: true,
-              formatter: function(value) {
+              formatter: function (value) {
                 const max = series[0].max; // 获取最大值
                 const formattedValue = (value / max * 100).toFixed(0); // 计算格式化后的数值
                 return formattedValue + ' %'; // 拼接百分号
@@ -173,13 +173,42 @@ export default {
   },
   methods: {
     editorOptions() {
+      this.setOptionsTitle();
       this.setOptions();
       this.setOptionsData();
     },
+    // 标题修改
+    setOptionsTitle() {
+      const optionsSetup = this.optionsSetup;
+      const title = {
+        text: optionsSetup.text,
+        show: optionsSetup.isShowTitle,
+        left: optionsSetup.titleLeft,
+        top: optionsSetup.titleTop + "%",
+        itemGap: optionsSetup.titleItemGap,
+        textStyle: {
+          color: optionsSetup.textColor,
+          fontSize: optionsSetup.textFontSize,
+          fontWeight: optionsSetup.textFontWeight,
+          fontStyle: optionsSetup.textFontStyle,
+          fontFamily: optionsSetup.textFontFamily,
+        },
+        subtext: optionsSetup.subtext,
+        subtextStyle: {
+          color: optionsSetup.subtextColor,
+          fontWeight: optionsSetup.subtextFontWeight,
+          fontSize: optionsSetup.subtextFontSize,
+          fontStyle: optionsSetup.subtextFontStyle,
+          fontFamily: optionsSetup.subtextFontFamily
+        },
+      };
+      this.options.title = title;
+    },
     setOptions() {
       const optionsSetup = this.optionsSetup;
       const series = this.options.series;
       if (series[0].type == "gauge") {
+        // 轴线相关
         const axisLine = {
           show: optionsSetup.ringShow,
           lineStyle: {
@@ -239,24 +268,30 @@ export default {
             ],
           },
         };
+        // 刻度线
         const axisTick = {
           show: optionsSetup.tickShow,
-          distance: optionsSetup.tickDistance,
+          splitNumber: optionsSetup.tickSplitNumber,
+          //distance: optionsSetup.tickDistance, echartsV5.0.0开始支持
           length: optionsSetup.tickLength,
           lineStyle: {
             color: "auto",
             width: optionsSetup.tickWidth,
+            type: optionsSetup.tickType,
           },
         };
+        // 分隔线-指标线
         const splitLine = {
           show: optionsSetup.splitShow,
-          distance: optionsSetup.splitDistance,
+          // distance: optionsSetup.splitDistance,echartsV5.0.0开始支持
           length: optionsSetup.splitLength,
           lineStyle: {
             color: "auto",
             width: optionsSetup.splitWidth,
+            type: optionsSetup.splitType,
           },
         };
+        // 刻度标签
         const axisLabel = {
           show: optionsSetup.labelShow,
           color: optionsSetup.labelColor,
@@ -264,18 +299,26 @@ export default {
           fontSize: optionsSetup.labelFontSize,
           fontWeight: optionsSetup.labelFontWeight,
           fontStyle: optionsSetup.labelFontStyle,
+          fontFamily: optionsSetup.labelFontFamily,
         };
         const detail = {
-          valueAnimation: true,
-          formatter: function(value) {
+          show: optionsSetup.isShow,
+          //valueAnimation: true, echartsV5.0.0开始支持
+          formatter: function (value) {
             const max = series[0].max; // 获取最大值
             const formattedValue = (value / max * 100).toFixed(0); // 计算格式化后的数值
-            return formattedValue + ' %'; // 拼接百分号
+            // 拼接百分号
+            if (optionsSetup.percentage) {
+              return formattedValue + ' %';
+            } else {
+              return formattedValue;
+            }
           },
           color: optionsSetup.detailColor,
           fontSize: optionsSetup.detailFontSize,
           fontWeight: optionsSetup.detailFontWeight,
           fontStyle: optionsSetup.detailFontStyle,
+          fontFamily: optionsSetup.detailFontFamily,
         };
         series[0].axisLine = axisLine;
         series[0].axisTick = axisTick;
@@ -283,6 +326,9 @@ export default {
         series[0].axisLabel = axisLabel;
         series[0].detail = detail;
         series[0].max = optionsSetup.maxValue;
+        series[0].startAngle = optionsSetup.startAngle;
+        series[0].endAngle = optionsSetup.endAngle;
+        series[0].clockwise = optionsSetup.clockwise;
       }
     },
     setOptionsData(e, paramsConfig) {