装饰图调整

report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/widget-decorate-pie.js

@@ -94,6 +94,35 @@ export const widgetDecoratePie = {
             },
           ]
         },
+        {
+          name: '三分环设置',
+          list: [
+            {
+              type: 'vue-color',
+              label: '一段颜色',
+              name: 'three1Color',
+              required: false,
+              placeholder: '',
+              value: '#fc8d89'
+            },
+            {
+              type: 'vue-color',
+              label: '二段颜色',
+              name: 'three2Color',
+              required: false,
+              placeholder: '',
+              value: '#46d3f3'
+            },
+            {
+              type: 'vue-color',
+              label: '三段颜色',
+              name: 'three3Color',
+              required: false,
+              placeholder: '',
+              value: 'rgba(203,203,203,.2)'
+            },
+          ]
+        },
       ],
     ],
     // 坐标

report-ui/src/views/report/bigscreen/designer/widget/decorate/widgetDecoratePieChart.vue

@@ -5,6 +5,8 @@
 </template>
 
 <script>
+import echarts from "echarts";
+
 export default {
   name: "widgetRotatePieChart",
   components: {},
@@ -104,7 +106,6 @@ export default {
             color: ["#fc8d89", "#46d3f3", "rgba(203,203,203,.2)"],
             startAngle: 50,
             hoverAnimation: false,
-            // animation:false,    //charts3 no
             label: {
               normal: {
                 show: false
@@ -113,7 +114,7 @@ export default {
             data: [50, 20, 40]
           },
           {
-            name: "刻度环",
+            name: "长刻度环",
             type: 'gauge',
             splitNumber: 30, //刻度数量
             min: 0,
@@ -159,7 +160,7 @@ export default {
             },
           },
           {
-            name: '刻度环',
+            name: '短刻度环',
             type: 'gauge',
             splitNumber: 30, //刻度数量
             min: 0,
@@ -293,6 +294,7 @@ export default {
       this.setOptionsLastRing();
       this.setOptionsEightRing();
       this.setOptionsDottedRing();
+      this.setOptionsThreeRing();
     },
     // 最外外环1
     setOptionsLastRing() {
@@ -341,7 +343,7 @@ export default {
             value: 25,
             itemStyle: {
               normal: {
-                color: optionsSetup.eightColor,
+                color: eightColor,
                 borderWidth: 0,
                 borderColor: 'rgba(0,0,0,0)'
               }
@@ -361,6 +363,7 @@ export default {
       }
       return dataArr
     },
+    // 八分环
     setOptionsEightRing() {
       const series = this.options.series;
       series[1].data = this.setRingPie2();
@@ -402,30 +405,29 @@ export default {
       }
       return dataArr
     },
+    // 虚线环
     setOptionsDottedRing() {
       const series = this.options.series;
       series[3].data = this.setRingPie3()
     },
-    // 标题修改
+    // 三分环
-    setOptionsTitle() {
+    setOptionsThreeRing() {
-      const optionsCollapse = this.optionsSetup;
+      const optionsSetup = this.optionsSetup;
-      const title = {};
+      const series = this.options.series;
-      title.text = optionsCollapse.titleText;
+      let three1Color = optionsSetup.three1Color;
-      title.show = optionsCollapse.isNoTitle;
+      let three2Color = optionsSetup.three2Color;
-      title.left = optionsCollapse.textAlign;
+      let three3Color = optionsSetup.three3Color;
-      title.textStyle = {
+      if (three1Color == "") {
-        color: optionsCollapse.textColor,
+        three1Color = 'rgba(0,0,0,0)'
-        fontSize: optionsCollapse.textFontSize,
+      }
-        fontWeight: optionsCollapse.textFontWeight
+      if (three2Color == "") {
-      };
+        three2Color = 'rgba(0,0,0,0)'
-      title.subtext = optionsCollapse.subText;
+      }
-      title.subtextStyle = {
+      if (three3Color == "") {
-        color: optionsCollapse.subTextColor,
+        three3Color = 'rgba(0,0,0,0)'
-        fontWeight: optionsCollapse.subTextFontWeight,
+      }
-        fontSize: optionsCollapse.subTextFontSize
+      series[4].color = [three1Color,three2Color,three3Color]
-      };
+    }
-      this.options.title = title;
-    },
   }
 }
 </script>