From 76ca28264c888d83b3493fba1492962112bc1442 Mon Sep 17 00:00:00 2001 From: qianming Date: Fri, 22 Dec 2023 16:04:47 +0800 Subject: [PATCH] =?UTF-8?q?bugfix--=E9=A5=BC=E5=9B=BE=E5=8A=A8=E6=80=81?= =?UTF-8?q?=E6=95=B0=E6=8D=AE=E5=9B=BE=E8=A1=A8=E4=B8=8D=E6=98=BE=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../widget/pie/widgetPieNightingaleRose.vue | 236 +++++++++++------- .../designer/widget/pie/widgetPiechart.vue | 231 ++++++++++------- 2 files changed, 284 insertions(+), 183 deletions(-) diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/pie/widgetPieNightingaleRose.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/pie/widgetPieNightingaleRose.vue index 1a53accc..13624139 100644 --- 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); }, }, }; diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/pie/widgetPiechart.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/pie/widgetPiechart.vue index 652d2dae..20b25129 100644 --- 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); }, }, };