饼图调整

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

@@ -56,111 +56,43 @@ export const widgetDecoratePie = {
               name: 'lastRing100Color',
               required: false,
               placeholder: '',
-              value: 'rgba(235, 10, 10, 1)'
+              value: '#28E8FA'
             },
           ]
         },
         {
-          name: '标题设置',
+          name: '八分环设置',
           list: [
-            {
-              type: 'el-switch',
-              label: '标题',
-              name: 'isNoTitle',
-              required: false,
-              placeholder: '',
-              value: true
-            },
-            {
-              type: 'el-input-text',
-              label: '标题',
-              name: 'titleText',
-              required: false,
-              placeholder: '',
-              value: ''
-            },
             {
               type: 'vue-color',
-              label: '字体颜色',
-              name: 'textColor',
+              label: '颜色',
+              name: 'eightColor',
               required: false,
               placeholder: '',
-              value: '#fff'
-            },
-            {
-              type: 'el-select',
-              label: '字体粗细',
-              name: 'textFontWeight',
-              required: false,
-              placeholder: '',
-              selectOptions: [
-                {code: 'normal', name: '正常'},
-                {code: 'bold', name: '粗体'},
-                {code: 'bolder', name: '特粗体'},
-                {code: 'lighter', name: '细体'}
-              ],
-              value: 'normal'
+              value: '#4FADFD'
             },
+          ]
+        },
+        {
+          name: '虚线环设置',
+          list: [
             {
               type: 'el-input-number',
-              label: '字体大小',
-              name: 'textFontSize',
+              label: '虚线数量',
+              name: 'dottedNum',
               required: false,
               placeholder: '',
-              value: 20
-            },
-            {
-              type: 'el-select',
-              label: '字体位置',
-              name: 'textAlign',
-              required: false,
-              placeholder: '',
-              selectOptions: [
-                {code: 'center', name: '居中'},
-                {code: 'left', name: '左对齐'},
-                {code: 'right', name: '右对齐'},
-              ],
-              value: 'left'
-            },
-            {
-              type: 'el-input-text',
-              label: '副标题',
-              name: 'subText',
-              required: false,
-              placeholder: '',
-              value: ''
+              value: 40
             },
             {
               type: 'vue-color',
-              label: '字体颜色',
-              name: 'subTextColor',
-              required: false,
-              placeholder: '',
-              value: ''
-            },
-            {
-              type: 'el-select',
-              label: '字体粗细',
-              name: 'subTextFontWeight',
+              label: '颜色',
+              name: 'dottedColor',
               required: false,
               placeholder: '',
-              selectOptions: [
-                {code: 'normal', name: '正常'},
-                {code: 'bold', name: '粗体'},
-                {code: 'bolder', name: '特粗体'},
-                {code: 'lighter', name: '细体'}
-              ],
-              value: 'normal'
+              value: '#28E8FA'
             },
-            {
-              type: 'el-input-number',
-              label: '字体大小',
-              name: 'subTextFontSize',
-              required: false,
-              placeholder: '',
-              value: 12
-            },
-          ],
+          ]
         },
       ],
     ],

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

@@ -34,30 +34,19 @@ export default {
             },
             itemStyle: {
               normal: {
-                color: {
-                  colorStops: [
-                    {
-                      offset: 0,
-                      color: '#4FADFD', // 0% 处的颜色
-                    },
-                    {
-                      offset: 1,
-                      color: 'rgba(235, 10, 10, 1)', // 100% 处的颜色
-                    },
-                  ],
-                },
+                show: false,
               },
             },
             data: [0]
           },
           {
+            name: '外四环',
             type: 'pie',
             zlevel: 2,
             silent: true,
             radius: ['90%', '91%'],
             startAngle: 50,
             hoverAnimation: false,
-            // animation:false,    //charts3 no
             label: {
               normal: {
                 show: false
@@ -68,9 +57,10 @@ export default {
                 show: false
               }
             },
-            data: this.pie2()
+            data: [0]
           },
           {
+            name: '里四环',
             type: 'pie',
             zlevel: 3,
             silent: true,
@@ -85,9 +75,10 @@ export default {
                 show: false
               }
             },
-            data: this.pie2()
+            data: [0]
           },
           {
+            name: '虚线环',
             type: 'pie',
             zlevel: 4,
             silent: true,
@@ -102,9 +93,10 @@ export default {
                 show: false
               }
             },
-            data: this.pie3()
+            data: [0]
           },
           {
+            name: '三分环',
             type: 'pie',
             zlevel: 5,
             silent: true,
@@ -121,7 +113,7 @@ export default {
             data: [50, 20, 40]
           },
           {
-            name: "",
+            name: "刻度环",
             type: 'gauge',
             splitNumber: 30, //刻度数量
             min: 0,
@@ -167,7 +159,7 @@ export default {
             },
           },
           {
-            //name: '统计',
+            name: '刻度环',
             type: 'gauge',
             splitNumber: 30, //刻度数量
             min: 0,
@@ -223,21 +215,6 @@ export default {
             },
             data: []
           },
-          {
-            type: 'pie',
-            zlevel: 20,
-            silent: true,
-            radius: ['60%', '59%'],
-            hoverAnimation: false,
-            color: '#2dc0c9',
-            // animation:false,
-            //data: [1],
-            labelLine: {
-              normal: {
-                show: false
-              }
-            }
-          },
           {
             name: '中间环形图',
             type: 'pie',
@@ -312,7 +289,42 @@ export default {
     this.editorOptions();
   },
   methods: {
-    pie2() {
+    editorOptions() {
+      this.setOptionsLastRing();
+      this.setOptionsEightRing();
+      this.setOptionsDottedRing();
+    },
+    // 最外外环1
+    setOptionsLastRing() {
+      const optionsSetup = this.optionsSetup;
+      const series = this.options.series[0];
+      if (optionsSetup.isLastRingShow) {
+        series.data = [0]
+      } else {
+        series.data = ''
+      }
+      const normal = {
+        color: {
+          colorStops: [
+            {
+              offset: 0,
+              color: optionsSetup.lastRing0Color,
+            },
+            {
+              offset: 1,
+              color: optionsSetup.lastRing100Color,
+            },
+          ],
+        },
+      };
+      series.itemStyle['normal'] = normal;
+    },
+    setRingPie2() {
+      const optionsSetup = this.optionsSetup;
+      let eightColor = optionsSetup.eightColor;
+      if (eightColor == "") {
+        eightColor = 'rgba(0,0,0,0)';
+      }
       let dataArr = [];
       for (let i = 0; i < 8; i++) {
         if (i % 2 === 0) {
@@ -321,9 +333,9 @@ export default {
             value: 25,
             itemStyle: {
               normal: {
-                color: "rgba(88,142,197,0.5)",
+                color: optionsSetup.eightColor,
                 borderWidth: 0,
-                borderColor: "rgba(0,0,0,0)"
+                borderColor: 'rgba(0,0,0,0)'
               }
             }
           })
@@ -333,9 +345,7 @@ export default {
             value: 20,
             itemStyle: {
               normal: {
-                color: "rgba(0,0,0,0)",
-                borderWidth: 0,
-                borderColor: "rgba(0,0,0,0)"
+                color: 'rgba(0,0,0,0)'
               }
             }
           })
@@ -343,18 +353,28 @@ export default {
       }
       return dataArr
     },
-    pie3() {
+    setOptionsEightRing() {
+      const series = this.options.series;
+      series[1].data = this.setRingPie2();
+      series[2].data = this.setRingPie2();
+    },
+    setRingPie3() {
+      const optionsSetup = this.optionsSetup;
+      let dottedColor = optionsSetup.dottedColor;
+      if (dottedColor == "") {
+        dottedColor = 'rgba(0,0,0,0)';
+      }
       let dataArr = [];
-      for (let i = 0; i < 100; i++) {
+      for (let i = 0; i < (optionsSetup.dottedNum * 2); i++) {
         if (i % 2 === 0) {
           dataArr.push({
             name: (i + 1).toString(),
             value: 25,
             itemStyle: {
               normal: {
-                color: "rgb(126,190,255)",
+                color: dottedColor,
                 borderWidth: 0,
-                borderColor: "rgba(0,0,0,0)"
+                borderColor: 'rgba(0,0,0,0)'
               }
             }
           })
@@ -364,7 +384,7 @@ export default {
             value: 20,
             itemStyle: {
               normal: {
-                color: "rgba(0,0,0,0)",
+                color: 'rgba(0,0,0,0)',
                 borderWidth: 0,
                 borderColor: "rgba(0,0,0,0)"
               }
@@ -374,56 +394,31 @@ export default {
       }
       return dataArr
     },
-    editorOptions() {
-      this.setOptionsLastRing();
-      //this.setOptionsTitle();
+    setOptionsDottedRing(){
+      const series = this.options.series;
+      series[3].data = this.setRingPie3()
     },
-    // 最外外环1
-    setOptionsLastRing() {
-      const optionsSetup = this.optionsSetup;
-      const series = this.options.series[0];
-      if (optionsSetup.isLastRingShow) {
-        series.data = [0]
-      }else {
-        series.data = ''
-      }
-      const normal = {
-        color: {
-          colorStops: [
-            {
-              offset: 0,
-              color: optionsSetup.lastRing0Color,
-            },
-            {
-              offset: 1,
-              color: optionsSetup.lastRing100Color,
-            },
-          ],
-        },
+    // 标题修改
+    setOptionsTitle() {
+      const optionsCollapse = this.optionsSetup;
+      const title = {};
+      title.text = optionsCollapse.titleText;
+      title.show = optionsCollapse.isNoTitle;
+      title.left = optionsCollapse.textAlign;
+      title.textStyle = {
+        color: optionsCollapse.textColor,
+        fontSize: optionsCollapse.textFontSize,
+        fontWeight: optionsCollapse.textFontWeight
       };
-    series.itemStyle['normal'] = normal;
-  },
-  // 标题修改
-  setOptionsTitle() {
-    const optionsCollapse = this.optionsSetup;
-    const title = {};
-    title.text = optionsCollapse.titleText;
-    title.show = optionsCollapse.isNoTitle;
-    title.left = optionsCollapse.textAlign;
-    title.textStyle = {
-      color: optionsCollapse.textColor,
-      fontSize: optionsCollapse.textFontSize,
-      fontWeight: optionsCollapse.textFontWeight
-    };
-    title.subtext = optionsCollapse.subText;
-    title.subtextStyle = {
-      color: optionsCollapse.subTextColor,
-      fontWeight: optionsCollapse.subTextFontWeight,
-      fontSize: optionsCollapse.subTextFontSize
-    };
-    this.options.title = title;
-  },
-}
+      title.subtext = optionsCollapse.subText;
+      title.subtextStyle = {
+        color: optionsCollapse.subTextColor,
+        fontWeight: optionsCollapse.subTextFontWeight,
+        fontSize: optionsCollapse.subTextFontSize
+      };
+      this.options.title = title;
+    },
+  }
 }
 </script>