diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-bar-compare.js b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-bar-compare.js index bc071577..7f6416bc 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-bar-compare.js +++ b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-bar-compare.js @@ -51,6 +51,75 @@ export const widgetBarCompare = { 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, + }, ], }, { @@ -274,6 +343,14 @@ export const widgetBarCompare = { placeholder: '', value: true, }, + { + type: 'el-input-text', + label: '最大值', + name: 'maxXLeft', + required: false, + placeholder: '', + value: '', + }, { type: 'el-input-number', label: '数值间隔', @@ -395,6 +472,14 @@ export const widgetBarCompare = { placeholder: '', value: true, }, + { + type: 'el-input-text', + label: '最大值', + name: 'maxXRight', + required: false, + placeholder: '', + value: '', + }, { type: 'el-input-number', label: '数值间隔', diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-bar-double-yaxis-chart.js b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-bar-double-yaxis-chart.js index 4949cdf0..482b8bfa 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-bar-double-yaxis-chart.js +++ b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-bar-double-yaxis-chart.js @@ -52,6 +52,75 @@ export const widgetBarDoubleYaxis = { placeholder: '', value: 0, }, + { + 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, + }, ], }, { @@ -392,6 +461,14 @@ export const widgetBarDoubleYaxis = { placeholder: '', value: true, }, + { + type: 'el-input-text', + label: '最大值', + name: 'maxYLeft', + required: false, + placeholder: '', + value: '', + }, { type: 'el-input-text', label: '坐标名', @@ -517,6 +594,14 @@ export const widgetBarDoubleYaxis = { placeholder: '', value: true, }, + { + type: 'el-input-text', + label: '最大值', + name: 'maxYRight', + required: false, + placeholder: '', + value: '', + }, { type: 'el-input-text', label: '坐标名', 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 7a4e52d1..e4467959 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 @@ -486,7 +486,7 @@ export const widgetBarStack = { name: 'maxY', required: false, placeholder: '', - value: '100', + value: '', }, { type: 'el-input-text', diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-barchart.js b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-barchart.js index 93494c6a..11fbd0d3 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-barchart.js +++ b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-barchart.js @@ -79,6 +79,75 @@ export const widgetBarchart = { ], value: 'leftRight' }, + { + 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,6 +488,14 @@ export const widgetBarchart = { placeholder: '', value: true, }, + { + type: 'el-input-text', + label: '最大值', + name: 'maxY', + required: false, + placeholder: '', + value: '', + }, { type: 'el-input-text', label: '坐标名', diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-gradient-barchart.js b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-gradient-barchart.js index b5a51025..bffbc5be 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-gradient-barchart.js +++ b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-gradient-barchart.js @@ -59,6 +59,75 @@ export const widgetGradientBarchart = { 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, + }, ], }, { @@ -103,10 +172,10 @@ export const widgetGradientBarchart = { required: false, placeholder: '', selectOptions: [ - { code: 'normal', name: '正常' }, - { code: 'bold', name: '粗体' }, - { code: 'bolder', name: '特粗体' }, - { code: 'lighter', name: '细体' } + {code: 'normal', name: '正常'}, + {code: 'bold', name: '粗体'}, + {code: 'bolder', name: '特粗体'}, + {code: 'lighter', name: '细体'} ], value: 'normal' }, @@ -117,9 +186,9 @@ export const widgetGradientBarchart = { required: false, placeholder: '', selectOptions: [ - { code: 'normal', name: '正常' }, - { code: 'italic', name: 'italic斜体' }, - { code: 'oblique', name: 'oblique斜体' }, + {code: 'normal', name: '正常'}, + {code: 'italic', name: 'italic斜体'}, + {code: 'oblique', name: 'oblique斜体'}, ], value: 'normal' }, @@ -130,9 +199,9 @@ export const widgetGradientBarchart = { required: false, placeholder: '', selectOptions: [ - { code: 'center', name: '居中' }, - { code: 'left', name: '左对齐' }, - { code: 'right', name: '右对齐' }, + {code: 'center', name: '居中'}, + {code: 'left', name: '左对齐'}, + {code: 'right', name: '右对齐'}, ], value: 'center' }, @@ -167,10 +236,10 @@ export const widgetGradientBarchart = { required: false, placeholder: '', selectOptions: [ - { code: 'normal', name: '正常' }, - { code: 'bold', name: '粗体' }, - { code: 'bolder', name: '特粗体' }, - { code: 'lighter', name: '细体' } + {code: 'normal', name: '正常'}, + {code: 'bold', name: '粗体'}, + {code: 'bolder', name: '特粗体'}, + {code: 'lighter', name: '细体'} ], value: 'normal' }, @@ -181,9 +250,9 @@ export const widgetGradientBarchart = { required: false, placeholder: '', selectOptions: [ - { code: 'normal', name: '正常' }, - { code: 'italic', name: 'italic斜体' }, - { code: 'oblique', name: 'oblique斜体' }, + {code: 'normal', name: '正常'}, + {code: 'italic', name: 'italic斜体'}, + {code: 'oblique', name: 'oblique斜体'}, ], value: 'normal' }, @@ -317,6 +386,14 @@ export const widgetGradientBarchart = { placeholder: '', value: true, }, + { + type: 'el-input-text', + label: '最大值', + name: 'maxY', + required: false, + placeholder: '', + value: '', + }, { type: 'el-input-text', label: '坐标名', @@ -465,10 +542,10 @@ export const widgetGradientBarchart = { required: false, placeholder: '', selectOptions: [ - { code: 'normal', name: '正常' }, - { code: 'bold', name: '粗体' }, - { code: 'bolder', name: '特粗体' }, - { code: 'lighter', name: '细体' } + {code: 'normal', name: '正常'}, + {code: 'bold', name: '粗体'}, + {code: 'bolder', name: '特粗体'}, + {code: 'lighter', name: '细体'} ], value: 'normal' }, @@ -618,11 +695,11 @@ export const widgetGradientBarchart = { relactiveDom: 'dataType', relactiveDomValue: 'staticData', value: [ - { "axis": "苹果", "data": 1000 }, - { "axis": "三星", "data": 2229 }, - { "axis": "小米", "data": 3879 }, - { "axis": "oppo", "data": 2379 }, - { "axis": "vivo", "data": 4079 }, + {"axis": "苹果", "data": 1000}, + {"axis": "三星", "data": 2229}, + {"axis": "小米", "data": 3879}, + {"axis": "oppo", "data": 2379}, + {"axis": "vivo", "data": 4079}, ], }, { diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarCompareChart.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarCompareChart.vue index c45743f5..7d30558d 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarCompareChart.vue +++ b/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarCompareChart.vue @@ -324,6 +324,7 @@ export default { setOptionsXLeft() { const optionsSetup = this.optionsSetup; const xAxisLeft = { + max: optionsSetup.maxXLeft !== "" ? optionsSetup.maxXLeft : null, splitNumber: optionsSetup.splitNumberLeft, type: "value", show: optionsSetup.hideXLeft, @@ -363,6 +364,7 @@ export default { setOptionsXRight() { const optionsSetup = this.optionsSetup; const xAxisRight = { + max: optionsSetup.maxXRight !== "" ? optionsSetup.maxXRight : null, gridIndex: 2, splitNumber: optionsSetup.splitNumberRight, show: optionsSetup.hideXRight, @@ -426,39 +428,48 @@ export default { setOptionsTop() { const optionsSetup = this.optionsSetup; const series = this.options.series; + series[0].label = { + normal: { + show: optionsSetup.isShow, + position: "insideLeft", + textStyle: { + fontSize: optionsSetup.fontSize, + color: optionsSetup.dataColor, + fontWeight: optionsSetup.fontWeight, + }, + }, + emphasis: { + show: false, + }, + }; + series[1].label = { + normal: { + show: optionsSetup.isShow, + color: "red", + position: "insideRight", + textStyle: { + fontSize: optionsSetup.fontSize, + color: optionsSetup.dataColor, + fontWeight: optionsSetup.fontWeight, + }, + }, + emphasis: { + show: false, + }, + }; for (const key in series) { - if (series[key].type == "bar") { - (series[0].label = { - normal: { - show: optionsSetup.isShow, - position: "insideLeft", - textStyle: { - fontSize: optionsSetup.fontSize, - color: optionsSetup.dataColor, - fontWeight: optionsSetup.fontWeight, - }, - }, - emphasis: { - show: false, - }, - }), - (series[1].label = { - normal: { - show: optionsSetup.isShow, - color: "red", - position: "insideRight", - textStyle: { - fontSize: optionsSetup.fontSize, - color: optionsSetup.dataColor, - fontWeight: optionsSetup.fontWeight, - }, - }, - emphasis: { - show: false, - }, - }), - (series[key].barWidth = optionsSetup.maxWidth); - } + series[key].barWidth = optionsSetup.maxWidth; + //柱体背景属性 + series[key].showBackground = optionsSetup.isShowBackground; + series[key].backgroundStyle = { + color: optionsSetup.backgroundStyleColor, + borderColor: optionsSetup.backgroundStyleBorderColor, + borderWidth: optionsSetup.backgroundStyleBorderWidth, + borderType: optionsSetup.backgroundStyleBorderType, + shadowBlur: optionsSetup.backgroundStyleShadowBlur, + shadowColor: optionsSetup.backgroundStyleShadowColor, + opacity: optionsSetup.backgroundStyleOpacity / 100, + }; } this.options.series = series; }, diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarDoubleYaxisChart.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarDoubleYaxisChart.vue index 5ddfe067..7689a572 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarDoubleYaxisChart.vue +++ b/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarDoubleYaxisChart.vue @@ -219,6 +219,7 @@ export default { const optionsSetup = this.optionsSetup; const yAxis = [ { + max: optionsSetup.maxYLeft !== "" ? optionsSetup.maxYLeft : null, type: "value", // 均分 splitNumber: optionsSetup.splitNumberLeft, @@ -261,6 +262,7 @@ export default { }, }, { + max: optionsSetup.maxYRight !== "" ? optionsSetup.maxYRight : null, type: "value", // 均分 splitNumber: optionsSetup.splitNumberRight, @@ -322,6 +324,17 @@ export default { series[key].barWidth = optionsSetup.maxWidth; series[key].barMinHeight = optionsSetup.minHeight; series[key].itemStyle.barBorderRadius = optionsSetup.radius; + //柱体背景属性 + series[key].showBackground = optionsSetup.isShowBackground; + series[key].backgroundStyle = { + color: optionsSetup.backgroundStyleColor, + borderColor: optionsSetup.backgroundStyleBorderColor, + borderWidth: optionsSetup.backgroundStyleBorderWidth, + borderType: optionsSetup.backgroundStyleBorderType, + shadowBlur: optionsSetup.backgroundStyleShadowBlur, + shadowColor: optionsSetup.backgroundStyleShadowColor, + opacity: optionsSetup.backgroundStyleOpacity / 100, + }; } } this.options.series = series; 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 3b099354..e824346d 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarStackChart.vue +++ b/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarStackChart.vue @@ -173,20 +173,11 @@ export default { }; this.options.xAxis = xAxis; }, - //判断有无yAxis max,无返回null - getOptionsYMax() { - const optionsSetup = this.optionsSetup; - let max = null; - if (optionsSetup.maxY !== "") { - max = optionsSetup.maxY - } - return max - }, // Y轴设置 setOptionsY() { const optionsSetup = this.optionsSetup; const yAxis = { - max: this.getOptionsYMax(), + max: optionsSetup.maxY !== "" ? optionsSetup.maxY : null, type: "value", scale: optionsSetup.scale, // 均分 @@ -402,7 +393,6 @@ export default { }); legendName.push(yAxisList[i]); } - console.log(series) this.options.series = series; if (optionsSetup.verticalShow) { this.options.xAxis.data = []; diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarchart.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarchart.vue index e7c90c5b..44873163 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarchart.vue +++ b/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarchart.vue @@ -184,6 +184,7 @@ export default { setOptionsY() { const optionsSetup = this.optionsSetup; const yAxis = { + max: optionsSetup.maxY !== "" ? optionsSetup.maxY : null, type: "value", scale: optionsSetup.scale, // 均分 @@ -391,6 +392,17 @@ export default { }, }; } + //柱体背景属性 + series[i].showBackground = optionsSetup.isShowBackground; + series[i].backgroundStyle = { + color: optionsSetup.backgroundStyleColor, + borderColor: optionsSetup.backgroundStyleBorderColor, + borderWidth: optionsSetup.backgroundStyleBorderWidth, + borderType: optionsSetup.backgroundStyleBorderType, + shadowBlur: optionsSetup.backgroundStyleShadowBlur, + shadowColor: optionsSetup.backgroundStyleShadowColor, + opacity: optionsSetup.backgroundStyleOpacity / 100, + }; series[i].data = data; } } @@ -475,6 +487,17 @@ export default { }, }; } + //柱体背景属性 + obj.showBackground = optionsSetup.isShowBackground; + obj.backgroundStyle = { + color: optionsSetup.backgroundStyleColor, + borderColor: optionsSetup.backgroundStyleBorderColor, + borderWidth: optionsSetup.backgroundStyleBorderWidth, + borderType: optionsSetup.backgroundStyleBorderType, + shadowBlur: optionsSetup.backgroundStyleShadowBlur, + shadowColor: optionsSetup.backgroundStyleShadowColor, + opacity: optionsSetup.backgroundStyleOpacity / 100, + } obj.data = val.series[i].data; series.push(obj); } diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetGradientColorBarchart.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetGradientColorBarchart.vue index 0c883187..b48c5875 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetGradientColorBarchart.vue +++ b/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetGradientColorBarchart.vue @@ -1,6 +1,6 @@ @@ -10,6 +10,7 @@ import { targetWidgetLinkageLogic, } from "@/views/bigscreenDesigner/designer/linkageLogic"; import echarts from "echarts"; + export default { name: "WidgetGradientColorBarchart", //渐变色,参考https://www.makeapie.com/editor.html?c=x0oZWoncE components: {}, @@ -260,6 +261,7 @@ export default { setOptionsY() { const optionsSetup = this.optionsSetup; const yAxis = { + max: optionsSetup.maxY !== "" ? optionsSetup.maxY : null, type: "value", scale: optionsSetup.scale, // 均分 @@ -328,6 +330,17 @@ export default { }; } series[0].barWidth = optionsSetup.maxWidth; + //柱体背景属性 + series[0].showBackground = optionsSetup.isShowBackground; + series[0].backgroundStyle = { + color: optionsSetup.backgroundStyleColor, + borderColor: optionsSetup.backgroundStyleBorderColor, + borderWidth: optionsSetup.backgroundStyleBorderWidth, + borderType: optionsSetup.backgroundStyleBorderType, + shadowBlur: optionsSetup.backgroundStyleShadowBlur, + shadowColor: optionsSetup.backgroundStyleShadowColor, + opacity: optionsSetup.backgroundStyleOpacity / 100, + }; } }, // tooltip 提示语设置