百分比图支持动态数据

report-ui/src/views/report/bigscreen/designer/tools.js

@@ -1048,7 +1048,11 @@ const widgetTools = [
           name: 'dynamicAddTable',
           required: false,
           placeholder: '',
-          value: [{name: '日期', key: 'date', width: 200},{name: '姓名', key: 'name', width: 200}, {name: '地址', key: 'address', width: '200'}]
+          value: [{name: '日期', key: 'date', width: 200}, {name: '姓名', key: 'name', width: 200}, {
+            name: '地址',
+            key: 'address',
+            width: '200'
+          }]
         }
       ],
       data: [
@@ -5444,6 +5448,59 @@ const widgetTools = [
               }
             ],
           },
+          {
+            name: '圆环设置',
+            list: [
+/*              {
+                type: 'vue-color',
+                label: '0%处',
+                name: 'colorStart',
+                required: false,
+                placeholder: '',
+                value: '#4FADFD'
+              },
+              {
+                type: 'vue-color',
+                label: '100%处',
+                name: 'colorEnd',
+                required: false,
+                placeholder: '',
+                value: '#28E8FA'
+              },*/
+              {
+                type: 'el-input-number',
+                label: '刻度数量',
+                name: 'lineNumber',
+                required: false,
+                placeholder: '',
+                value: 8
+              },
+              {
+                type: 'el-input-number',
+                label: '刻度长度',
+                name: 'lineLength',
+                required: false,
+                placeholder: '',
+                value: 15
+              },
+              {
+                type: 'el-input-number',
+                label: '刻度宽度',
+                name: 'lineWidth',
+                required: false,
+                placeholder: '',
+                value: 5
+              },
+              {
+                type: 'vue-color',
+                label: '刻度颜色',
+                name: 'lineColor',
+                required: false,
+                placeholder: '',
+                value: '#061740'
+              },
+            ]
+          },
           /*{
             name: '图例操作',
             list: [

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

@@ -266,13 +266,13 @@ export default {
             center: ['50%', '50%'],
             startAngle: 0,
             endAngle: 359.9,
-            splitNumber: -1,
+            splitNumber: 8,
             hoverAnimation: true,
             axisTick: {
               show: false,
             },
             splitLine: {
-              length: 60,
+              length: 15,
               lineStyle: {
                 width: 5,
                 color: '#061740',
@@ -291,9 +291,6 @@ export default {
             },
             detail: {
               show: false,
-              textStyle: {
-                fontSize: 12
-              }
             },
             data: [],
           },
@@ -338,9 +335,9 @@ export default {
   },
   mounted() {
 /*        setInterval(() => {
-          //this.angle = this.angle + 3
-          //myChart.setOption(option,true)
-        }, 100);*/
+          this.angle = this.angle + 3
+          myChart.setOption(option,true)
+        }, 1000);*/
   },
   methods: {
     //轴point设置
@@ -358,6 +355,7 @@ export default {
       //this.setOptionsLegend();
       //this.setOptionsColor();
       this.setOptionsData();
+      this.setOptionLine();
     },
     setOptionsTitle() {
       const optionsCollapse = this.optionsSetup;
@@ -392,7 +390,9 @@ export default {
         }
       }
     },
-    setOptionPer(val) {
+    //圆环0-100%颜色
+    /*setOptionPerData(val) {
+      const optionsSetup = this.optionsSetup;
       const data = this.options.series[6]['data'];
       data.forEach((ev, index) => {
         if (index == 0) {
@@ -403,11 +403,11 @@ export default {
                 colorStops: [
                   {
                     offset: 0,
-                    color: '#4FADFD', // 0% 处的颜色
+                    color: optionsSetup.colorStart, // 0% 处的颜色
                   },
                   {
                     offset: 1,
-                    color: '#28E8FA', // 100% 处的颜色
+                    color: optionsSetup.colorEnd, // 100% 处的颜色
                   },
                 ]
               }
@@ -422,15 +422,28 @@ export default {
             },
           };
           const itemStyle = {
-            normal: {
+            /!*normal: {
               color: '#173164',
-            },
+            },*!/
           };
           data['label'] = label;
           data['itemStyle'] = itemStyle;
-        }else{};
+        } else {
+        }
+        ;
       })
-      console.log(data)
+    },*/
+    setOptionLine() {
+      const optionsSetup = this.optionsSetup;
+      const line = this.options.series[7]['splitLine'];
+      const num = this.options.series[7];
+      num.splitNumber = optionsSetup.lineNumber;
+      line.length = optionsSetup.lineLength;
+      const lineStyle = {
+        width: optionsSetup.lineWidth,
+        color: optionsSetup.lineColor,
+      };
+      line['lineStyle'] = lineStyle
     },
     // 数据解析
     setOptionsData() {
@@ -445,7 +458,7 @@ export default {
     staticDataFn(val) {
       const title = this.options.title;
       title.text = '{nums|' + val + '}{percent|%}';
-      this.setOptionPer(val)
+      //this.setOptionPerData(val)
     },
     dynamicDataFn(val, refreshTime) {
       if (!val) return;
@@ -461,8 +474,9 @@ export default {
     getEchartData(val) {
       const data = this.queryEchartsData(val);
       data.then(res => {
-        this.styleColor.text = res[0].value
-        this.$forceUpdate();
+        this.options.title.text = '{nums|' + res[0].value + '}{percent|%}'
+        //this.$forceUpdate();
+        console.log(res[0].value)
       });
     }
   }