From 0237f76f3cc0a5f3052dc52a41ec559bd69a800e Mon Sep 17 00:00:00 2001 From: qianming Date: Fri, 27 Oct 2023 11:40:25 +0800 Subject: [PATCH] =?UTF-8?q?feat--=E6=9F=B1=E7=8A=B6=E5=A0=86=E5=8F=A0?= =?UTF-8?q?=E5=9B=BE=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../configure/barCharts/widget-bar-stack.js | 77 +++++++++++++++++-- .../widget/bar/widgetBarStackChart.vue | 32 ++++++-- 2 files changed, 96 insertions(+), 13 deletions(-) diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-bar-stack.js b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-bar-stack.js index 978f5d32..7a4e52d1 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-bar-stack.js +++ b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-bar-stack.js @@ -71,6 +71,75 @@ export const widgetBarStack = { placeholder: '', value: 5, }, + { + type: 'el-switch', + label: '背景显示', + name: 'isShowBackground', + require: false, + placeholder: '', + value: true, + }, + { + type: 'vue-color', + label: '背景颜色', + name: 'backgroundStyleColor', + required: false, + placeholder: '', + value: 'rgba(180, 180, 180, 0.2)', + }, + { + type: 'vue-color', + label: '描边颜色', + name: 'backgroundStyleBorderColor', + required: false, + placeholder: '', + value: '#000', + }, + { + type: 'el-input-number', + label: '描边宽度', + name: 'backgroundStyleBorderWidth', + required: false, + placeholder: '', + value: 0, + }, + { + type: 'el-select', + label: '描边类型', + name: 'backgroundStyleBorderType', + required: false, + placeholder: '', + selectOptions: [ + { code: 'solid', name: '实线' }, + { code: 'dashed', name: '虚线' }, + { code: 'dotted', name: '斑点' }, + ], + value: 'dashed' + }, + { + type: 'el-input-number', + label: '阴影模糊', + name: 'backgroundStyleShadowBlur', + required: false, + placeholder: '', + value: 10, + }, + { + type: 'vue-color', + label: '阴影颜色', + name: 'backgroundStyleShadowColor', + required: false, + placeholder: '', + value: 'rgba(0, 0, 0, 0.5)', + }, + { + type: 'el-slider', + label: '透明度', + name: 'backgroundStyleOpacity', + require: false, + placeholder: '', + value: 100, + }, ], }, { @@ -419,14 +488,6 @@ export const widgetBarStack = { placeholder: '', value: '100', }, - { - type: 'el-switch', - label: '阴影显示', - name: 'isShowBackground', - require: false, - placeholder: '', - value: true, - }, { type: 'el-input-text', label: '坐标名', diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarStackChart.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarStackChart.vue index d43bc7c8..3b099354 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarStackChart.vue +++ b/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarStackChart.vue @@ -312,10 +312,10 @@ export default { optionsData.dataType == "staticData" ? this.staticDataFn(optionsData.staticData, optionsSetup) : this.dynamicDataFn( - optionsData.dynamicData, - optionsData.refreshTime, - optionsSetup - ); + optionsData.dynamicData, + optionsData.refreshTime, + optionsSetup + ); }, //去重 setUnique(arr) { @@ -367,7 +367,6 @@ export default { } series.push({ name: yAxisList[i], - showBackground: optionsSetup.isShowBackground, type: "bar", data: data, barGap: "0%", @@ -389,9 +388,21 @@ export default { barBorderRadius: optionsSetup.radius, }, }, + //柱体背景属性 + showBackground: optionsSetup.isShowBackground, + backgroundStyle: { + color: optionsSetup.backgroundStyleColor, + borderColor: optionsSetup.backgroundStyleBorderColor, + borderWidth: optionsSetup.backgroundStyleBorderWidth, + borderType: optionsSetup.backgroundStyleBorderType, + shadowBlur: optionsSetup.backgroundStyleShadowBlur, + shadowColor: optionsSetup.backgroundStyleShadowColor, + opacity: optionsSetup.backgroundStyleOpacity / 100, + } }); legendName.push(yAxisList[i]); } + console.log(series) this.options.series = series; if (optionsSetup.verticalShow) { this.options.xAxis.data = []; @@ -471,6 +482,17 @@ export default { barBorderRadius: optionsSetup.radius, }, }, + //柱体背景属性 + showBackground: optionsSetup.isShowBackground, + backgroundStyle: { + color: optionsSetup.backgroundStyleColor, + borderColor: optionsSetup.backgroundStyleBorderColor, + borderWidth: optionsSetup.backgroundStyleBorderWidth, + borderType: optionsSetup.backgroundStyleBorderType, + shadowBlur: optionsSetup.backgroundStyleShadowBlur, + shadowColor: optionsSetup.backgroundStyleShadowColor, + opacity: optionsSetup.backgroundStyleOpacity / 100, + } }); } legendName.push(val.series[i].name);