From 690258ccabb0c95c4e288ca81c1a531bb872e6b0 Mon Sep 17 00:00:00 2001 From: qianming Date: Wed, 19 Jan 2022 16:26:33 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A4=9A=E6=9F=B1=E7=BA=BF=E5=9B=BE=E8=B0=83?= =?UTF-8?q?=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../tools/configure/widget-more-bar-line.js | 27 ++++++---- .../widget/bar/widgetBarlinechart.vue | 4 +- .../widget/bar/widgetMoreBarLineChart.vue | 50 ++++++++++++++++--- 3 files changed, 62 insertions(+), 19 deletions(-) diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-more-bar-line.js b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-more-bar-line.js index 1b6b2713..2c100ee6 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-more-bar-line.js +++ b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-more-bar-line.js @@ -229,10 +229,10 @@ export const widgetMoreBarLine = { { type: 'el-input-text', label: '图例名称', - name: 'layerName', + name: 'legendName', required: false, - placeholder: '', - value: '', + placeholder: '多值以英文,隔开', + value: '成功,失败,终止,成功率' }, { type: 'vue-color', @@ -248,7 +248,7 @@ export const widgetMoreBarLine = { name: 'lengedFontSize', required: false, placeholder: '', - value: 16, + value: 12, }, { type: 'el-input-number', @@ -256,7 +256,7 @@ export const widgetMoreBarLine = { name: 'lengedWidth', required: false, placeholder: '', - value: 15, + value: 12, }, { type: 'el-select', @@ -268,7 +268,7 @@ export const widgetMoreBarLine = { {code: 'left', name: '左对齐'}, {code: 'right', name: '右对齐'}, ], - value: '' + value: 'left' }, { type: 'el-select', @@ -280,7 +280,7 @@ export const widgetMoreBarLine = { {code: 'top', name: '顶部'}, {code: 'bottom', name: '底部'}, ], - value: '' + value: 'top' }, { type: 'el-select', @@ -292,7 +292,7 @@ export const widgetMoreBarLine = { {code: 'vertical', name: '竖排'}, {code: 'horizontal', name: '横排'}, ], - value: '未销,核销,总共,比例' + value: 'horizontal' }, ], }, @@ -655,7 +655,12 @@ export const widgetMoreBarLine = { label: '', name: 'customColor', required: false, - value: [{color: '#00F4FFFF'}, {color: '#e68b55'}], + value: [ + {color: '#4bdfff'}, + {color: '#5dc1fd'}, + {color: '#55f49c'}, + {color: '#ffa43a'}, + ], }, ], }, @@ -745,7 +750,7 @@ export const widgetMoreBarLine = { name: 'width', required: false, placeholder: '该容器在1920px大屏中的宽度', - value: 400, + value: 500, }, { type: 'el-input-number', @@ -753,7 +758,7 @@ export const widgetMoreBarLine = { name: 'height', required: false, placeholder: '该容器在1080px大屏中的高度', - value: 200, + value: 300, }, ], } diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarlinechart.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarlinechart.vue index ecdceb1a..c605d19f 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarlinechart.vue +++ b/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarlinechart.vue @@ -134,7 +134,7 @@ export default { this.setOptionsTitle(); this.setOptionsX(); this.setOptionsY(); - this.setOptionsTop(); + this.setOptionsLine(); this.setOptionsBar(); this.setOptionsTooltip(); this.setOptionsData(); @@ -262,7 +262,7 @@ export default { this.options.yAxis = yAxis; }, // 折线设置 数值设置 - setOptionsTop() { + setOptionsLine() { const optionsSetup = this.optionsSetup; const series = this.options.series; for (const key in series) { diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetMoreBarLineChart.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetMoreBarLineChart.vue index 460d153d..429b0483 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetMoreBarLineChart.vue +++ b/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetMoreBarLineChart.vue @@ -172,7 +172,7 @@ export default { lineStyle: { color: "#ffa43a" }, - data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8, 3, 5] + data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8, 3, 5, 2] } ] } @@ -215,14 +215,15 @@ export default { this.setOptionsTitle(); this.setOptionsX(); this.setOptionsY(); - /* - this.setOptionsTop(); + this.setOptionsLegend(); + this.setOptionsLine(); this.setOptionsBar(); this.setOptionsTooltip(); - this.setOptionsData(); this.setOptionsMargin(); - this.setOptionsLegend(); - this.setOptionsColor();*/ + this.setOptionsColor(); + /* + this.setOptionsData(); + */ }, // 标题修改 setOptionsTitle() { @@ -340,6 +341,40 @@ export default { ]; this.options.yAxis = yAxis; }, + // 折线设置 数值设置 + setOptionsLine() { + const optionsSetup = this.optionsSetup; + const series = this.options.series; + for (const key in series) { + if (series[key].type == "line") { + series[key].showSymbol = optionsSetup.markPoint; + series[key].symbolSize = optionsSetup.pointSize; + series[key].smooth = optionsSetup.smoothCurve; + if (optionsSetup.area) { + series[key].areaStyle = { + opacity: optionsSetup.areaThickness / 100 + }; + } else { + series[key].areaStyle = { + opacity: 0 + }; + } + series[key].lineStyle = { + width: optionsSetup.lineWidth + }; + series[key].itemStyle.borderRadius = optionsSetup.radius; + series[key].label = { + show: optionsSetup.isShowLine, + position: "top", + distance: optionsSetup.distanceLine, + fontSize: optionsSetup.fontSizeLine, + color: optionsSetup.subTextColorLine, + fontWeight: optionsSetup.fontWeightLine + }; + } + } + this.options.series = series; + }, // 柱体设置 数值设置 setOptionsBar() { const optionsSetup = this.optionsSetup; @@ -389,6 +424,9 @@ export default { setOptionsLegend() { const optionsSetup = this.optionsSetup; const legend = this.options.legend; + let legendName = optionsSetup.legendName; + let arr = legendName.split(",") + legend.data = arr; legend.show = optionsSetup.isShowLegend; legend.left = optionsSetup.lateralPosition; legend.top = optionsSetup.longitudinalPosition == "top" ? 0 : "auto";