大屏图表-百分比图调整

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

@@ -32,6 +32,67 @@ export const widgetPiePercentage = {
         value: ''
       },
       [
+        {
+          name: '圆环设置',
+          list: [
+            {
+              type: 'el-slider',
+              label: '内半径',
+              name: 'innerNumber',
+              required: false,
+              placeholder: '',
+              value: 65,
+            },
+            {
+              type: 'el-slider',
+              label: '外半径',
+              name: 'outerNumber',
+              required: false,
+              placeholder: '',
+              value: 80,
+            },
+            {
+              type: 'el-input-number',
+              label: '刻度数量',
+              name: 'lineNumber',
+              required: false,
+              placeholder: '',
+              value: 12
+            },
+            {
+              type: 'el-input-number',
+              label: '刻度长度',
+              name: 'lineLength',
+              required: false,
+              placeholder: '',
+              value: 20
+            },
+            {
+              type: 'el-input-number',
+              label: '刻度宽度',
+              name: 'lineWidth',
+              required: false,
+              placeholder: '',
+              value: 2
+            },
+            {
+              type: 'el-input-number',
+              label: '圆环刻度距离',
+              name: 'lineDistance',
+              required: false,
+              placeholder: '',
+              value: -10
+            },
+            {
+              type: 'vue-color',
+              label: '刻度颜色',
+              name: 'lineColor',
+              required: false,
+              placeholder: '',
+              value: '#061740'
+            },
+          ]
+        },
         {
           name: '数值设置',
           list: [
@@ -151,43 +212,6 @@ export const widgetPiePercentage = {
             },
           ],
         },
-        {
-          name: '圆环设置',
-          list: [
-            {
-              type: 'el-input-number',
-              label: '刻度数量',
-              name: 'lineNumber',
-              required: false,
-              placeholder: '',
-              value: 12
-            },
-            {
-              type: 'el-input-number',
-              label: '刻度长度',
-              name: 'lineLength',
-              required: false,
-              placeholder: '',
-              value: 20
-            },
-            {
-              type: 'el-input-number',
-              label: '刻度宽度',
-              name: 'lineWidth',
-              required: false,
-              placeholder: '',
-              value: 2
-            },
-            {
-              type: 'vue-color',
-              label: '刻度颜色',
-              name: 'lineColor',
-              required: false,
-              placeholder: '',
-              value: '#061740'
-            },
-          ]
-        },
         {
           name: '渐变色',
           list: [

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

@@ -75,12 +75,11 @@ export default {
           {
             //name: '圆环',
             type: "pie",
-            radius: ["58%", "45%"],
+            radius: ["80%", "65%"],
             silent: true,
             clockwise: true,
             startAngle: 90,
             z: 0,
-            zlevel: 0,
             label: {
               normal: {
                 position: "center",
@@ -128,19 +127,20 @@ export default {
           {
             name: "percent",
             type: "gauge",
-            radius: "58%",
+            radius: "80%",
             center: ["50%", "50%"],
             startAngle: 0,
-            endAngle: 359.9,
-            splitNumber: 8,
+            endAngle: 360,
             hoverAnimation: true,
+            splitNumber: 12,
             axisTick: {
               show: false,
             },
             splitLine: {
               length: 15,
+              distance: -10,
               lineStyle: {
-                width: 5,
+                width: 2,
                 color: "#061740",
               },
             },
@@ -217,6 +217,7 @@ export default {
       this.setOptionsColor();
       this.setOptionsData();
       this.setOptionLine();
+      this.setOptionRadius();
       this.setOptionSurplusColor();
     },
     setOptionsTitle() {
@@ -273,15 +274,22 @@ export default {
     },
     setOptionLine() {
       const optionsSetup = this.optionsSetup;
-      const line = this.options.series[1]["splitLine"];
-      const num = this.options.series[1];
-      num.splitNumber = optionsSetup.lineNumber;
-      line.length = optionsSetup.lineLength;
-      const lineStyle = {
-        width: optionsSetup.lineWidth,
-        color: optionsSetup.lineColor,
-      };
-      line["lineStyle"] = lineStyle;
+      const series = this.options.series[1];
+      const splitLine= {
+        length: optionsSetup.lineLength,
+        distance: optionsSetup.lineDistance,
+          lineStyle: {
+            width: optionsSetup.lineWidth,
+            color: optionsSetup.lineColor,
+        },
+      }
+      series.splitNumber = optionsSetup.lineNumber;
+      series.splitLine = splitLine;
+    },
+    setOptionRadius(){
+      const optionsSetup = this.optionsSetup;
+      this.options.series[0].radius = [optionsSetup.innerNumber + "%", optionsSetup.outerNumber + "%"]
+      this.options.series[1].radius = optionsSetup.outerNumber + "%"
     },
     // 数据解析
     setOptionsData(e, paramsConfig) {