bugfix--饼图动态数据图表不显示

2026-03-20 09:38:35 +08:00 · 2023-12-22 16:04:47 +08:00
parent c421e00411
commit 76ca28264c
2 changed files with 284 additions and 183 deletions
--- a/report-ui/src/views/bigscreenDesigner/designer/widget/pie/widgetPieNightingaleRose.vue
+++ b/report-ui/src/views/bigscreenDesigner/designer/widget/pie/widgetPieNightingaleRose.vue
@@ -90,8 +90,6 @@ export default {
    // 修改图标options属性
    editorOptions() {
      this.setOptionsTitle();
-      this.setOptionsPie();
-      this.setOptionsValue();
      this.setOptionsTooltip();
      this.setOptionsLegend();
      this.setOptionsColor();
@@ -124,86 +122,6 @@ export default {
      };
      this.options.title = title;
    },
-    // 饼图设置
-    setOptionsPie() {
-      const optionsSetup = this.optionsSetup;
-      const series = {
-        type: "pie",
-        center: ["50%", "50%"],
-        left: optionsSetup.left,
-        top: optionsSetup.top,
-        right: optionsSetup.right,
-        bottom: optionsSetup.bottom,
-        // 饼图模式 面积模式"area" 半径模式"radius"//name: "面积模式",
-        roseType: optionsSetup.nightingaleRoseType,
-        radius: [optionsSetup.innerNumber + "%", optionsSetup.outerNumber + "%"],
-        clockwise: optionsSetup.clockwise,
-        startAngle: optionsSetup.startAngle,
-        minAngle: optionsSetup.minAngle,
-        minShowLabelAngle: optionsSetup.minShowLabelAngle,
-        percentPrecision: optionsSetup.percentPrecision,
-        // echarts v5.0.0开始支持
-        /*        itemStyle: {
-                  borderRadius: [optionsSetup.borderRadius + "%", optionsSetup.borderRadius + "%"],
-                },*/
-        // 高亮的扇区
-        emphasis: {
-          label: {
-            show: optionsSetup.isShowEmphasisLabel,
-            color: optionsSetup.emphasisLabelFontColor == '' ? null : optionsSetup.EmphasisLabelFontColor,
-            fontSize: optionsSetup.emphasisLabelFontSize,
-            fontWeight: optionsSetup.emphasisLabelFontWeight,
-            fontStyle: optionsSetup.emphasisLabelFontStyle,
-            fontFamily: optionsSetup.emphasisLabelFontFamily,
-          },
-          // 视觉引导线
-          labelLine: {
-            show: false,
-          },
-          // 色块描边
-          itemStyle: {
-            borderColor: optionsSetup.borderColor == '' ? null : optionsSetup.borderColor,
-            borderWidth: optionsSetup.borderWidth,
-            borderType: optionsSetup.borderType,
-            shadowBlur: optionsSetup.shadowBlur,
-            shadowColor: optionsSetup.shadowColor,
-          },
-        },
-      };
-      this.options.series[0] = series;
-    },
-    // 数值设定
-    setOptionsValue() {
-      const optionsSetup = this.optionsSetup;
-      const numberValue = optionsSetup.numberValue ? "\n{c}" : "";
-      const percentage = optionsSetup.percentage ? "\n({d}%)" : "";
-      const label = {
-        show: optionsSetup.isShow,
-        position: optionsSetup.position,
-        rotate: optionsSetup.rotate,
-        formatter: `{b}${numberValue}${percentage}`,
-        padding: optionsSetup.padding,
-        fontSize: optionsSetup.fontSize,
-        color: optionsSetup.fontColor == '' ? null : optionsSetup.fontColor,
-        fontWeight: optionsSetup.fontWeight,
-        fontStyle: optionsSetup.fontStyle,
-        fontFamily: optionsSetup.fontFamily,
-      };
-      // 引导线
-      const labelLine = {
-        show: optionsSetup.isShowLabelLine,
-        length: optionsSetup.labelLineLength,
-        length2: optionsSetup.labelLineLength2,
-        smooth: optionsSetup.labelLineSmooth,
-        lineStyle: {
-          color: optionsSetup.lineStyleColor == '' ? null : optionsSetup.lineStyleColor,
-          width: optionsSetup.lineStyleWidth,
-          type: optionsSetup.lineStyleType,
-        }
-      }
-      this.options.series[0].label = label;
-      this.options.series[0].labelLine = labelLine;
-    },
    // tooltip 设置
    setOptionsTooltip() {
      const optionsSetup = this.optionsSetup;
@@ -280,11 +198,78 @@ export default {
    },
    staticDataFn(val) {
      const staticData = typeof val == "string" ? JSON.parse(val) : val;
-      for (const key in this.options.series) {
-        if (this.options.series[key].type == "pie") {
-          this.options.series[key].data = staticData;
-        }
-      }
+      const optionsSetup = this.optionsSetup;
+      const numberValue = optionsSetup.numberValue ? "\n{c}" : "";
+      const percentage = optionsSetup.percentage ? "\n({d}%)" : "";
+      const series = {
+        type: "pie",
+        center: ["50%", "50%"],
+        left: optionsSetup.left,
+        top: optionsSetup.top,
+        right: optionsSetup.right,
+        bottom: optionsSetup.bottom,
+        // 饼图模式 面积模式"area" 半径模式"radius"//name: "面积模式",
+        roseType: optionsSetup.nightingaleRoseType,
+        radius: [optionsSetup.innerNumber + "%", optionsSetup.outerNumber + "%"],
+        clockwise: optionsSetup.clockwise,
+        startAngle: optionsSetup.startAngle,
+        minAngle: optionsSetup.minAngle,
+        minShowLabelAngle: optionsSetup.minShowLabelAngle,
+        percentPrecision: optionsSetup.percentPrecision,
+        // echarts v5.0.0开始支持
+        /*        itemStyle: {
+                  borderRadius: [optionsSetup.borderRadius + "%", optionsSetup.borderRadius + "%"],
+                },*/
+        // 高亮的扇区
+        emphasis: {
+          label: {
+            show: optionsSetup.isShowEmphasisLabel,
+            color: optionsSetup.emphasisLabelFontColor == '' ? null : optionsSetup.EmphasisLabelFontColor,
+            fontSize: optionsSetup.emphasisLabelFontSize,
+            fontWeight: optionsSetup.emphasisLabelFontWeight,
+            fontStyle: optionsSetup.emphasisLabelFontStyle,
+            fontFamily: optionsSetup.emphasisLabelFontFamily,
+          },
+          // 视觉引导线
+          labelLine: {
+            show: false,
+          },
+          // 色块描边
+          itemStyle: {
+            borderColor: optionsSetup.borderColor == '' ? null : optionsSetup.borderColor,
+            borderWidth: optionsSetup.borderWidth,
+            borderType: optionsSetup.borderType,
+            shadowBlur: optionsSetup.shadowBlur,
+            shadowColor: optionsSetup.shadowColor,
+          },
+        },
+        label: {
+          show: optionsSetup.isShow,
+          position: optionsSetup.position,
+          rotate: optionsSetup.rotate,
+          formatter: `{b}${numberValue}${percentage}`,
+          padding: optionsSetup.padding,
+          fontSize: optionsSetup.fontSize,
+          color: optionsSetup.fontColor == '' ? null : optionsSetup.fontColor,
+          fontWeight: optionsSetup.fontWeight,
+          fontStyle: optionsSetup.fontStyle,
+          fontFamily: optionsSetup.fontFamily,
+        },
+        // 引导线
+        labelLine: {
+          show: optionsSetup.isShowLabelLine,
+          length: optionsSetup.labelLineLength,
+          length2: optionsSetup.labelLineLength2,
+          smooth: optionsSetup.labelLineSmooth,
+          lineStyle: {
+            color: optionsSetup.lineStyleColor == '' ? null : optionsSetup.lineStyleColor,
+            width: optionsSetup.lineStyleWidth,
+            type: optionsSetup.lineStyleType,
+          }
+        },
+        data: staticData,
+      };
+      this.options.series[0] = series;
    },
    dynamicDataFn(val, refreshTime) {
      if (!val) return;
@@ -304,11 +289,78 @@ export default {
      });
    },
    renderingFn(val) {
-      for (const key in this.options.series) {
-        if (this.options.series[key].type == "pie") {
-          this.options.series[key].data = val;
-        }
-      }
+      const optionsSetup = this.optionsSetup;
+      const numberValue = optionsSetup.numberValue ? "\n{c}" : "";
+      const percentage = optionsSetup.percentage ? "\n({d}%)" : "";
+      const series = {
+        type: "pie",
+        center: ["50%", "50%"],
+        left: optionsSetup.left,
+        top: optionsSetup.top,
+        right: optionsSetup.right,
+        bottom: optionsSetup.bottom,
+        // 饼图模式 面积模式"area" 半径模式"radius"//name: "面积模式",
+        roseType: optionsSetup.nightingaleRoseType,
+        radius: [optionsSetup.innerNumber + "%", optionsSetup.outerNumber + "%"],
+        clockwise: optionsSetup.clockwise,
+        startAngle: optionsSetup.startAngle,
+        minAngle: optionsSetup.minAngle,
+        minShowLabelAngle: optionsSetup.minShowLabelAngle,
+        percentPrecision: optionsSetup.percentPrecision,
+        // echarts v5.0.0开始支持
+        /*        itemStyle: {
+                  borderRadius: [optionsSetup.borderRadius + "%", optionsSetup.borderRadius + "%"],
+                },*/
+        // 高亮的扇区
+        emphasis: {
+          label: {
+            show: optionsSetup.isShowEmphasisLabel,
+            color: optionsSetup.emphasisLabelFontColor == '' ? null : optionsSetup.EmphasisLabelFontColor,
+            fontSize: optionsSetup.emphasisLabelFontSize,
+            fontWeight: optionsSetup.emphasisLabelFontWeight,
+            fontStyle: optionsSetup.emphasisLabelFontStyle,
+            fontFamily: optionsSetup.emphasisLabelFontFamily,
+          },
+          // 视觉引导线
+          labelLine: {
+            show: false,
+          },
+          // 色块描边
+          itemStyle: {
+            borderColor: optionsSetup.borderColor == '' ? null : optionsSetup.borderColor,
+            borderWidth: optionsSetup.borderWidth,
+            borderType: optionsSetup.borderType,
+            shadowBlur: optionsSetup.shadowBlur,
+            shadowColor: optionsSetup.shadowColor,
+          },
+        },
+        label: {
+          show: optionsSetup.isShow,
+          position: optionsSetup.position,
+          rotate: optionsSetup.rotate,
+          formatter: `{b}${numberValue}${percentage}`,
+          padding: optionsSetup.padding,
+          fontSize: optionsSetup.fontSize,
+          color: optionsSetup.fontColor == '' ? null : optionsSetup.fontColor,
+          fontWeight: optionsSetup.fontWeight,
+          fontStyle: optionsSetup.fontStyle,
+          fontFamily: optionsSetup.fontFamily,
+        },
+        // 引导线
+        labelLine: {
+          show: optionsSetup.isShowLabelLine,
+          length: optionsSetup.labelLineLength,
+          length2: optionsSetup.labelLineLength2,
+          smooth: optionsSetup.labelLineSmooth,
+          lineStyle: {
+            color: optionsSetup.lineStyleColor == '' ? null : optionsSetup.lineStyleColor,
+            width: optionsSetup.lineStyleWidth,
+            type: optionsSetup.lineStyleType,
+          }
+        },
+        data: val,
+      };
+      this.$set(this.options.series, 0, series);
    },
  },
 };
--- a/report-ui/src/views/bigscreenDesigner/designer/widget/pie/widgetPiechart.vue
+++ b/report-ui/src/views/bigscreenDesigner/designer/widget/pie/widgetPiechart.vue
@@ -96,8 +96,6 @@ export default {
    // 修改图标options属性
    editorOptions() {
      this.setOptionsTitle();
-      this.setOptionsPie();
-      this.setOptionsValue();
      this.setOptionsTooltip();
      this.setOptionsLegend();
      this.setOptionsColor();
@@ -130,85 +128,6 @@ export default {
      };
      this.options.title = title;
    },
-    // 饼图设置
-    setOptionsPie() {
-      const optionsSetup = this.optionsSetup;
-      const series = {
-        type: "pie",
-        center: ["50%", "50%"],
-        left: optionsSetup.left,
-        top: optionsSetup.top,
-        right: optionsSetup.right,
-        bottom: optionsSetup.bottom,
-        radius: [optionsSetup.innerNumber + "%", optionsSetup.outerNumber + "%"],
-        clockwise: optionsSetup.clockwise,
-        startAngle: optionsSetup.startAngle,
-        minAngle: optionsSetup.minAngle,
-        minShowLabelAngle: optionsSetup.minShowLabelAngle,
-        percentPrecision: optionsSetup.percentPrecision,
-        // echarts v5.0.0开始支持
-        /*        itemStyle: {
-                  borderRadius: [optionsSetup.borderRadius + "%", optionsSetup.borderRadius + "%"],
-                },
-                */
-        // 高亮的扇区
-        emphasis: {
-          label: {
-            show: optionsSetup.isShowEmphasisLabel,
-            color: optionsSetup.emphasisLabelFontColor == '' ? null : optionsSetup.EmphasisLabelFontColor,
-            fontSize: optionsSetup.emphasisLabelFontSize,
-            fontWeight: optionsSetup.emphasisLabelFontWeight,
-            fontStyle: optionsSetup.emphasisLabelFontStyle,
-            fontFamily: optionsSetup.emphasisLabelFontFamily,
-          },
-          // 视觉引导线
-          labelLine: {
-            show: false,
-          },
-          // 色块描边
-          itemStyle: {
-            borderColor: optionsSetup.borderColor == '' ? null : optionsSetup.borderColor,
-            borderWidth: optionsSetup.borderWidth,
-            borderType: optionsSetup.borderType,
-            shadowBlur: optionsSetup.shadowBlur,
-            shadowColor: optionsSetup.shadowColor,
-          },
-        },
-      };
-      this.options.series[0] = series;
-    },
-    // 数值设定
-    setOptionsValue() {
-      const optionsSetup = this.optionsSetup;
-      const numberValue = optionsSetup.numberValue ? "\n{c}" : "";
-      const percentage = optionsSetup.percentage ? "\n({d}%)" : "";
-      const label = {
-        show: optionsSetup.isShow,
-        position: optionsSetup.position,
-        rotate: optionsSetup.rotate,
-        formatter: `{b}${numberValue}${percentage}`,
-        padding: optionsSetup.padding,
-        fontSize: optionsSetup.fontSize,
-        color: optionsSetup.fontColor == '' ? null : optionsSetup.fontColor,
-        fontWeight: optionsSetup.fontWeight,
-        fontStyle: optionsSetup.fontStyle,
-        fontFamily: optionsSetup.fontFamily,
-      };
-      // 引导线
-      const labelLine = {
-        show: optionsSetup.isShowLabelLine,
-        length: optionsSetup.labelLineLength,
-        length2: optionsSetup.labelLineLength2,
-        smooth: optionsSetup.labelLineSmooth,
-        lineStyle: {
-          color: optionsSetup.lineStyleColor == '' ? null : optionsSetup.lineStyleColor,
-          width: optionsSetup.lineStyleWidth,
-          type: optionsSetup.lineStyleType,
-        }
-      }
-      this.options.series[0].label = label;
-      this.options.series[0].labelLine = labelLine;
-    },
    // 提示语设置 tooltip
    setOptionsTooltip() {
      const optionsSetup = this.optionsSetup;
@@ -284,11 +203,76 @@ export default {
    },
    staticDataFn(val) {
      const staticData = typeof val == "string" ? JSON.parse(val) : val;
-      for (const key in this.options.series) {
-        if (this.options.series[key].type == "pie") {
-          this.options.series[key].data = staticData;
-        }
-      }
+      const optionsSetup = this.optionsSetup;
+      const numberValue = optionsSetup.numberValue ? "\n{c}" : "";
+      const percentage = optionsSetup.percentage ? "\n({d}%)" : "";
+      const series = {
+        type: "pie",
+        center: ["50%", "50%"],
+        left: optionsSetup.left,
+        top: optionsSetup.top,
+        right: optionsSetup.right,
+        bottom: optionsSetup.bottom,
+        radius: [optionsSetup.innerNumber + "%", optionsSetup.outerNumber + "%"],
+        clockwise: optionsSetup.clockwise,
+        startAngle: optionsSetup.startAngle,
+        minAngle: optionsSetup.minAngle,
+        minShowLabelAngle: optionsSetup.minShowLabelAngle,
+        percentPrecision: optionsSetup.percentPrecision,
+        // echarts v5.0.0开始支持
+        /*        itemStyle: {
+                  borderRadius: [optionsSetup.borderRadius + "%", optionsSetup.borderRadius + "%"],
+                },
+                */
+        // 高亮的扇区
+        emphasis: {
+          label: {
+            show: optionsSetup.isShowEmphasisLabel,
+            color: optionsSetup.emphasisLabelFontColor == '' ? null : optionsSetup.EmphasisLabelFontColor,
+            fontSize: optionsSetup.emphasisLabelFontSize,
+            fontWeight: optionsSetup.emphasisLabelFontWeight,
+            fontStyle: optionsSetup.emphasisLabelFontStyle,
+            fontFamily: optionsSetup.emphasisLabelFontFamily,
+          },
+          // 视觉引导线
+          labelLine: {
+            show: false,
+          },
+          // 色块描边
+          itemStyle: {
+            borderColor: optionsSetup.borderColor == '' ? null : optionsSetup.borderColor,
+            borderWidth: optionsSetup.borderWidth,
+            borderType: optionsSetup.borderType,
+            shadowBlur: optionsSetup.shadowBlur,
+            shadowColor: optionsSetup.shadowColor,
+          },
+        },
+        label: {
+          show: optionsSetup.isShow,
+          position: optionsSetup.position,
+          rotate: optionsSetup.rotate,
+          formatter: `{b}${numberValue}${percentage}`,
+          padding: optionsSetup.padding,
+          fontSize: optionsSetup.fontSize,
+          color: optionsSetup.fontColor == '' ? null : optionsSetup.fontColor,
+          fontWeight: optionsSetup.fontWeight,
+          fontStyle: optionsSetup.fontStyle,
+          fontFamily: optionsSetup.fontFamily,
+        },
+        labelLine: {
+          show: optionsSetup.isShowLabelLine,
+          length: optionsSetup.labelLineLength,
+          length2: optionsSetup.labelLineLength2,
+          smooth: optionsSetup.labelLineSmooth,
+          lineStyle: {
+            color: optionsSetup.lineStyleColor == '' ? null : optionsSetup.lineStyleColor,
+            width: optionsSetup.lineStyleWidth,
+            type: optionsSetup.lineStyleType,
+          }
+        },
+        data: staticData,
+      };
+      this.options.series[0] = series
    },
    dynamicDataFn(val, refreshTime) {
      if (!val) return;
@@ -308,11 +292,76 @@ export default {
      });
    },
    renderingFn(val) {
-      for (const key in this.options.series) {
-        if (this.options.series[key].type == "pie") {
-          this.options.series[key].data = val;
-        }
-      }
+      const optionsSetup = this.optionsSetup;
+      const numberValue = optionsSetup.numberValue ? "\n{c}" : "";
+      const percentage = optionsSetup.percentage ? "\n({d}%)" : "";
+      const series = {
+        type: "pie",
+        center: ["50%", "50%"],
+        left: optionsSetup.left,
+        top: optionsSetup.top,
+        right: optionsSetup.right,
+        bottom: optionsSetup.bottom,
+        radius: [optionsSetup.innerNumber + "%", optionsSetup.outerNumber + "%"],
+        clockwise: optionsSetup.clockwise,
+        startAngle: optionsSetup.startAngle,
+        minAngle: optionsSetup.minAngle,
+        minShowLabelAngle: optionsSetup.minShowLabelAngle,
+        percentPrecision: optionsSetup.percentPrecision,
+        // echarts v5.0.0开始支持
+        /*        itemStyle: {
+                  borderRadius: [optionsSetup.borderRadius + "%", optionsSetup.borderRadius + "%"],
+                },
+                */
+        // 高亮的扇区
+        emphasis: {
+          label: {
+            show: optionsSetup.isShowEmphasisLabel,
+            color: optionsSetup.emphasisLabelFontColor == '' ? null : optionsSetup.EmphasisLabelFontColor,
+            fontSize: optionsSetup.emphasisLabelFontSize,
+            fontWeight: optionsSetup.emphasisLabelFontWeight,
+            fontStyle: optionsSetup.emphasisLabelFontStyle,
+            fontFamily: optionsSetup.emphasisLabelFontFamily,
+          },
+          // 视觉引导线
+          labelLine: {
+            show: false,
+          },
+          // 色块描边
+          itemStyle: {
+            borderColor: optionsSetup.borderColor == '' ? null : optionsSetup.borderColor,
+            borderWidth: optionsSetup.borderWidth,
+            borderType: optionsSetup.borderType,
+            shadowBlur: optionsSetup.shadowBlur,
+            shadowColor: optionsSetup.shadowColor,
+          },
+        },
+        label: {
+          show: optionsSetup.isShow,
+          position: optionsSetup.position,
+          rotate: optionsSetup.rotate,
+          formatter: `{b}${numberValue}${percentage}`,
+          padding: optionsSetup.padding,
+          fontSize: optionsSetup.fontSize,
+          color: optionsSetup.fontColor == '' ? null : optionsSetup.fontColor,
+          fontWeight: optionsSetup.fontWeight,
+          fontStyle: optionsSetup.fontStyle,
+          fontFamily: optionsSetup.fontFamily,
+        },
+        labelLine: {
+          show: optionsSetup.isShowLabelLine,
+          length: optionsSetup.labelLineLength,
+          length2: optionsSetup.labelLineLength2,
+          smooth: optionsSetup.labelLineSmooth,
+          lineStyle: {
+            color: optionsSetup.lineStyleColor == '' ? null : optionsSetup.lineStyleColor,
+            width: optionsSetup.lineStyleWidth,
+            type: optionsSetup.lineStyleType,
+          }
+        },
+        data: val,
+      };
+      this.$set(this.options.series, 0, series);
    },
  },
 };