feat--饼图调整优化

report-ui/src/views/bigscreenDesigner/designer/tools/configure/pieCharts/widget-pie-nightingale.js

@@ -31,19 +31,48 @@ export const widgetPieNightingale = {
         placeholder: '',
         value: ''
       },
-      {
-        type: 'el-select',
-        label: '饼图模式',
-        name: 'nightingleRosetype',
-        required: false,
-        placeholder: '',
-        selectOptions: [
-          { code: 'area', name: '面积模式' },
-          { code: 'radius', name: '半径模式' },
-        ],
-        value: 'area'
-      },
       [
+        {
+          name: '饼图设置',
+          list : [
+            {
+              type: 'el-select',
+              label: '饼图模式',
+              name: 'nightingaleRoseType',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                { code: 'area', name: '面积模式' },
+                { code: 'radius', name: '半径模式' },
+              ],
+              value: 'area'
+            },
+            {
+              type: 'el-slider',
+              label: '内半径',
+              name: 'innerNumber',
+              required: false,
+              placeholder: '',
+              value: 10,
+            },
+            {
+              type: 'el-slider',
+              label: '外半径',
+              name: 'outerNumber',
+              required: false,
+              placeholder: '',
+              value: 60,
+            },
+/*            {
+              type: 'el-slider',
+              label: '圆角属性',
+              name: 'borderRadius',
+              required: false,
+              placeholder: '',
+              value: 10,
+            },*/
+          ]
+        },
         {
           name: '标题设置',
           list: [

report-ui/src/views/bigscreenDesigner/designer/tools/configure/pieCharts/widget-piechart.js

@@ -31,19 +31,36 @@ export const widgetPiechart = {
         placeholder: '',
         value: ''
       },
-      {
-        type: 'el-select',
-        label: '饼图样式',
-        name: 'piechartStyle',
-        required: false,
-        placeholder: '',
-        selectOptions: [
-          { code: 'shixin', name: '实心饼图' },
-          { code: 'kongxin', name: '空心饼图' },
-        ],
-        value: 'shixin'
-      },
       [
+        {
+          name: '饼图设置',
+          list : [
+            {
+              type: 'el-slider',
+              label: '内半径',
+              name: 'innerNumber',
+              required: false,
+              placeholder: '',
+              value: 0,
+            },
+            {
+              type: 'el-slider',
+              label: '外半径',
+              name: 'outerNumber',
+              required: false,
+              placeholder: '',
+              value: 60,
+            },
+/*            {
+              type: 'el-slider',
+              label: '圆角属性',
+              name: 'borderRadius',
+              required: false,
+              placeholder: '',
+              value: 10,
+            },*/
+          ]
+        },
         {
           name: '标题设置',
           list: [

report-ui/src/views/bigscreenDesigner/designer/widget/pie/widgetPieNightingaleRose.vue

@@ -1,6 +1,6 @@
 <template>
   <div :style="styleObj">
-    <v-chart ref="myVChart" :options="options" autoresize />
+    <v-chart ref="myVChart" :options="options" autoresize/>
   </div>
 </template>
 
@@ -26,7 +26,7 @@ export default {
         toolbox: {
           show: true,
           feature: {
-            mark: { show: true },
+            mark: {show: true},
           },
         },
         series: [
@@ -94,12 +94,23 @@ export default {
       this.setOptionsTooltip();
       this.setOptionsLegend();
       this.setOptionsColor();
+      this.setOptionsPie();
       this.setOptionsData();
-      this.setOptionsRosetype();
     },
-    // 饼图模式 面积模式"area" 半径模式"radius"
-    setOptionsRosetype() {
-      this.options.series[0]["roseType"] = this.optionsSetup.nightingleRosetype;
+    // 饼图设置
+    setOptionsPie() {
+      const optionsSetup = this.optionsSetup;
+      const series = {
+        type: "pie",
+        // 饼图模式 面积模式"area" 半径模式"radius"//name: "面积模式",
+        roseType: optionsSetup.nightingaleRoseType,
+        radius: [optionsSetup.innerNumber + "%", optionsSetup.outerNumber + "%"],
+        center: ["50%", "50%"],
+        itemStyle: {
+          borderRadius: [optionsSetup.borderRadius + "%", optionsSetup.borderRadius + "%"],
+        },
+      };
+      this.options.series[0] = series;
     },
     // 标题修改
     setOptionsTitle() {
@@ -147,7 +158,7 @@ export default {
       for (const key in series) {
         if (series[key].type == "pie") {
           series[key].label = label;
-          series[key].labelLine = { show: optionsSetup.isShow };
+          series[key].labelLine = {show: optionsSetup.isShow};
         }
       }
     },

report-ui/src/views/bigscreenDesigner/designer/widget/pie/widgetPiechart.vue

@@ -1,6 +1,6 @@
 <template>
   <div :style="styleObj">
-    <v-chart ref="myVChart" :options="options" autoresize />
+    <v-chart ref="myVChart" :options="options" autoresize/>
   </div>
 </template>
 
@@ -9,6 +9,7 @@ import {
   originWidgetLinkageLogic,
   targetWidgetLinkageLogic,
 } from "@/views/bigscreenDesigner/designer/linkageLogic";
+
 export default {
   name: "WidgetPiechart",
   components: {},
@@ -94,6 +95,7 @@ export default {
   methods: {
     // 修改图标options属性
     editorOptions() {
+      this.setOptionsPie();
       this.setOptionsTitle();
       this.setOptionsValue();
       this.setOptionsTooltip();
@@ -102,14 +104,24 @@ export default {
       this.setOptionsData();
       this.setOptionsPiechartStyle();
     },
-    // 饼图样式
-    setOptionsPiechartStyle() {
-      if (this.optionsSetup.piechartStyle == "shixin") {
-        this.options.series[0]["radius"] = "50%";
-      } else if (this.optionsSetup.piechartStyle == "kongxin") {
-        this.options.series[0]["radius"] = ["40%", "70%"];
-      } else {
-      }
+    // 饼图设置
+    setOptionsPie() {
+      const optionsSetup = this.optionsSetup;
+      const series = {
+        type: "pie",
+        radius: [optionsSetup.innerNumber + "%", optionsSetup.outerNumber + "%"],
+        itemStyle: {
+          borderRadius: [optionsSetup.borderRadius + "%", optionsSetup.borderRadius + "%"],
+        },
+        emphasis: {
+          itemStyle: {
+            shadowBlur: 10,
+            shadowOffsetX: 0,
+            shadowColor: "rgba(0, 0, 0, 0.5)",
+          },
+        },
+      };
+      this.options.series[0] = series;
     },
     // 标题设置
     setOptionsTitle() {
@@ -156,7 +168,7 @@ export default {
       for (const key in series) {
         if (series[key].type == "pie") {
           series[key].label = label;
-          series[key].labelLine = { show: optionsSetup.isShow };
+          series[key].labelLine = {show: optionsSetup.isShow};
         }
       }
     },