百分比图支持渐变色

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

@@ -5071,70 +5071,6 @@ const widgetTools = [
           value: ''
         },
         [
-          /*{
-            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',
-                required: false,
-                placeholder: '',
-                value: '#FFD700'
-              },
-              {
-                type: 'el-select',
-                label: '字体粗细',
-                name: 'textFontWeight',
-                required: false,
-                placeholder: '',
-                selectOptions: [
-                  { code: 'normal', name: '正常' },
-                  { code: 'bold', name: '粗体' },
-                  { code: 'bolder', name: '特粗体' },
-                  { code: 'lighter', name: '细体' }
-                ],
-                value: 'normal'
-              },
-              {
-                type: 'el-input-number',
-                label: '字体大小',
-                name: 'textFontSize',
-                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: 'center'
-              }
-            ],
-          },*/
           {
             name: '数值设置',
             list: [
@@ -5203,22 +5139,6 @@ 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: '刻度数量',
@@ -5253,79 +5173,35 @@ const widgetTools = [
               },
             ]
           },
-          /*{
-            name: '图例操作',
+          {
+            name: '渐变色',
             list: [
-              {
-                type: 'el-switch',
-                label: '图例',
-                name: 'isShowLegend',
-                required: false,
-                placeholder: '',
-                value: true,
-              },
               {
                 type: 'vue-color',
-                label: '字体颜色',
-                name: 'lengedColor',
-                required: false,
-                placeholder: '',
-                value: '#fff',
-              },
-              {
-                type: 'el-input-number',
-                label: '字体大小',
-                name: 'lengedFontSize',
-                required: false,
-                placeholder: '',
-                value: 16,
-              },
-              {
-                type: 'el-input-number',
-                label: '图例宽度',
-                name: 'lengedWidth',
-                required: false,
-                placeholder: '',
-                value: 15,
-              },
-              {
-                type: 'el-select',
-                label: '横向位置',
-                name: 'lateralPosition',
+                label: '0%处颜色',
+                name: 'color0Start',
                 required: false,
                 placeholder: '',
-                selectOptions: [
-                  { code: 'left', name: '左对齐' },
-                  { code: 'right', name: '右对齐' },
-                ],
-                value: ''
+                value: '#4FADFD'
               },
               {
-                type: 'el-select',
-                label: '纵向位置',
-                name: 'longitudinalPosition',
+                type: 'vue-color',
+                label: '100%颜色',
+                name: 'color100End',
                 required: false,
                 placeholder: '',
-                selectOptions: [
-                  { code: 'top', name: '顶部' },
-                  { code: 'bottom', name: '底部' },
-                ],
-                value: ''
+                value: '#28E8FA'
               },
               {
-                type: 'el-select',
-                label: '布局前置',
-                name: 'layoutFront',
+                type: 'vue-color',
+                label: '余处颜色',
+                name: 'colorsurplus',
                 required: false,
                 placeholder: '',
-                selectOptions: [
-                  { code: 'vertical', name: '竖排' },
-                  { code: 'horizontal', name: '横排' },
-                ],
-                value: ''
+                value: '#173164'
               },
-            ],
-          },*/
+            ]
+          }
         ],
       ],
       // 数据

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

@@ -254,6 +254,7 @@ export default {
                     show: false,
                   },
                 },
+                //剩余圆环颜色
                 itemStyle: {
                   normal: {
                     color: '#173164',
@@ -359,9 +360,10 @@ export default {
       this.setOptionsTitle();
       //this.setOptionsTooltip();
       //this.setOptionsLegend();
-      //this.setOptionsColor();
+      this.setOptionsColor();
       this.setOptionsData();
       this.setOptionLine();
+      this.setOptionSurplusColor();
     },
     setOptionsTitle() {
       const optionsCollapse = this.optionsSetup;
@@ -397,48 +399,33 @@ export default {
       }
     },
     //圆环0-100%颜色
-    /*setOptionPerData(val) {
+    setOptionsColor() {
       const optionsSetup = this.optionsSetup;
-      const data = this.options.series[6]['data'];
-      data.forEach((ev, index) => {
-        if (index == 0) {
-          ev.value = val
-          const itemStyle = {
-            normal: {
-              color: {
-                colorStops: [
-                  {
-                    offset: 0,
-                    color: optionsSetup.colorStart, // 0% 处的颜色
-                  },
-                  {
-                    offset: 1,
-                    color: optionsSetup.colorEnd, // 100% 处的颜色
-                  },
-                ]
-              }
-            }
-          };
-          data['itemStyle'] = itemStyle
-        } else if (index == 1) {
-          ev.value = (100 - val)
-          const label = {
-            normal: {
-              show: false,
+      const itemStyle = this.options.series[6]['data'][0]['itemStyle']
+      const normal = {
+        color: {
+          // 完成的圆环的颜色
+          colorStops: [
+            {
+              offset: 0,
+              color: optionsSetup.color0Start, // 0% 处的颜色
             },
-          };
-          const itemStyle = {
-            /!*normal: {
-              color: '#173164',
-            },*!/
-          };
-          data['label'] = label;
-          data['itemStyle'] = itemStyle;
-        } else {
-        }
-        ;
-      })
-    },*/
+            {
+              offset: 1,
+              color: optionsSetup.color100End, // 100% 处的颜色
+            },
+          ],
+        },
+      };
+      itemStyle['normal'] = normal
+    },
+    setOptionSurplusColor(){
+      const itemStyle = this.options.series[6]['data'][1]['itemStyle']
+      const normal = {
+          color: this.optionsSetup.colorsurplus,
+        };
+      itemStyle['normal'] = normal
+    },
     setOptionLine() {
       const optionsSetup = this.optionsSetup;
       const line = this.options.series[7]['splitLine'];
@@ -466,7 +453,6 @@ export default {
       title.text = '{nums|' + val + '}{percent|%}';
       this.options.series[6]['data'][0]['value'] = val ;
       this.options.series[6]['data'][1]['value'] = 100 - val ;
-      //this.setOptionPerData(val)
     },
     dynamicDataFn(val, refreshTime) {
       if (!val) return;