饼图调整

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

@@ -37,18 +37,26 @@ export const widgetDecoratePie = {
             {
               type: 'el-switch',
               label: '显示',
-              name: 'isShow',
+              name: 'isLastRingShow',
               required: false,
               placeholder: '',
               value: true
             },
             {
               type: 'vue-color',
-              label: '最外环颜色',
-              name: 'ring1Color',
+              label: '0%颜色',
+              name: 'lastRing0Color',
               required: false,
               placeholder: '',
-              value: '#46d3f3'
+              value: '#4FADFD'
+            },
+            {
+              type: 'vue-color',
+              label: '100%颜色',
+              name: 'lastRing100Color',
+              required: false,
+              placeholder: '',
+              value: 'rgba(235, 10, 10, 1)'
             },
           ]
         },

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

@@ -1,6 +1,6 @@
 /*
  * @Descripttion: 百分比图 json
- * @version: 
+ * @version:
  * @Author: qianlishi
  * @Date: 2021-08-29 07:34:01
  * @LastEditors: qianlishi
@@ -113,7 +113,7 @@ export const widgetPiePercentage = {
                 name: 'lineLength',
                 required: false,
                 placeholder: '',
-                value: 15
+                value: 19
               },
               {
                 type: 'el-input-number',
@@ -121,7 +121,7 @@ export const widgetPiePercentage = {
                 name: 'lineWidth',
                 required: false,
                 placeholder: '',
-                value: 5
+                value: 2
               },
               {
                 type: 'vue-color',
@@ -248,7 +248,7 @@ export const widgetPiePercentage = {
           name: 'height',
           required: false,
           placeholder: '该容器在1080px大屏中的高度',
-          value: 200,
+          value: 300,
         },
       ],
     }

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

@@ -18,15 +18,10 @@ export default {
         title: {},
         series: [
           {
-            name: '外环1',
+            name: '最外环',
             type: 'pie',
-            zlevel: 1,
             silent: true,
             radius: ['98%', '97%'],
-            hoverAnimation: false,
-            color: "#46d3f3",
-            //color: "rgba(88,142,197,0.5)",
-            // animation:false,    //charts3 no
             label: {
               normal: {
                 show: false
@@ -37,7 +32,23 @@ export default {
                 show: false
               }
             },
-            data: [1]
+            itemStyle: {
+              normal: {
+                color: {
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: '#4FADFD', // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: 'rgba(235, 10, 10, 1)', // 100% 处的颜色
+                    },
+                  ],
+                },
+              },
+            },
+            data: [0]
           },
           {
             type: 'pie',
@@ -303,7 +314,7 @@ export default {
   methods: {
     pie2() {
       let dataArr = [];
-      for (var i = 0; i < 8; i++) {
+      for (let i = 0; i < 8; i++) {
         if (i % 2 === 0) {
           dataArr.push({
             name: (i + 1).toString(),
@@ -329,13 +340,12 @@ export default {
             }
           })
         }
-
       }
       return dataArr
     },
     pie3() {
       let dataArr = [];
-      for (var i = 0; i < 100; i++) {
+      for (let i = 0; i < 100; i++) {
         if (i % 2 === 0) {
           dataArr.push({
             name: (i + 1).toString(),
@@ -361,34 +371,59 @@ export default {
             }
           })
         }
-
       }
       return dataArr
     },
     editorOptions() {
+      this.setOptionsLastRing();
       //this.setOptionsTitle();
     },
-    // 标题修改
-    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
+    // 最外外环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,
+            },
+          ],
+        },
       };
-      title.subtext = optionsCollapse.subText;
-      title.subtextStyle = {
-        color: optionsCollapse.subTextColor,
-        fontWeight: optionsCollapse.subTextFontWeight,
-        fontSize: optionsCollapse.subTextFontSize
-      };
-      this.options.title = title;
-    },
-  }
+    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;
+  },
+}
 }
 </script>
 

report-ui/src/views/report/bigscreen/designer/widget/pie/widgetPiePercentageChart.vue

@@ -361,20 +361,20 @@ export default {
       this.setOptionSurplusColor();
     },
     setOptionsTitle() {
-      const optionsCollapse = this.optionsSetup;
+      const optionsSetup = this.optionsSetup;
       const title = this.options.title;
       title.x = "center";
       title.y = "center";
       const rich = {
         nums: {
-          fontSize: optionsCollapse.textNumFontSize,
-          color: optionsCollapse.textNumColor,
-          fontWeight: optionsCollapse.textNumFontWeight
+          fontSize: optionsSetup.textNumFontSize,
+          color: optionsSetup.textNumColor,
+          fontWeight: optionsSetup.textNumFontWeight
         },
         percent: {
-          fontSize: optionsCollapse.textPerFontSize,
-          color: optionsCollapse.textPerColor,
-          fontWeight: optionsCollapse.textPerFontWeight
+          fontSize: optionsSetup.textPerFontSize,
+          color: optionsSetup.textPerColor,
+          fontWeight: optionsSetup.textPerFontWeight
         }
       };
       title.textStyle['rich'] = rich;