From 9363626bcb671486c784be1f7ccec9be69490766 Mon Sep 17 00:00:00 2001 From: qianming Date: Fri, 27 Aug 2021 10:32:15 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9F=B1=E7=8A=B6=E5=AF=B9=E6=AF=94=E5=9B=BE?= =?UTF-8?q?=E5=8A=9F=E8=83=BD=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../views/report/bigscreen/designer/tools.js | 109 +++++++++--------- .../widget/bar/widgetBarCompareChart.vue | 53 +++++++-- 2 files changed, 100 insertions(+), 62 deletions(-) diff --git a/report-ui/src/views/report/bigscreen/designer/tools.js b/report-ui/src/views/report/bigscreen/designer/tools.js index 7cbded00..fa14dc0d 100644 --- a/report-ui/src/views/report/bigscreen/designer/tools.js +++ b/report-ui/src/views/report/bigscreen/designer/tools.js @@ -7151,6 +7151,14 @@ const widgetTools = [ placeholder: '', value: 14, }, + { + type: 'el-switch', + label: 'X轴线', + name: 'xLineLeft', + require: false, + placeholder: '', + value: false, + }, { type: 'vue-color', label: '轴颜色', @@ -7161,24 +7169,32 @@ const widgetTools = [ }, { type: 'el-switch', - label: 'X轴线', - name: 'downSplitLineXLeft', + label: '竖分割线', + name: 'SplitLineLeft', require: false, placeholder: '', value: false, }, { - type: 'el-switch', - label: '竖分割线', - name: 'SplitLineXLeft', - require: false, + type: 'vue-color', + label: '分割线颜色', + name: 'SplitLineColorLeft', + required: false, placeholder: '', - value: false, + value: '#fff', + }, + { + type: 'el-input-number', + label: '分割线宽度', + name: 'SplitLinefontSizeLeft', + required: false, + placeholder: '', + value: 1, }, { type: 'el-switch', label: '边框线', - name: 'upSplitLineXLeft', + name: 'frameLineLeft', require: false, placeholder: '', value: false, @@ -7191,100 +7207,83 @@ const widgetTools = [ { type: 'el-switch', label: '显示', - name: 'hideX', + name: 'hideXRight', required: false, placeholder: '', value: true, }, { - type: 'el-input-text', - label: 'X轴别名', - name: 'xName', + type: 'el-input-number', + label: '数值间隔', + name: 'splitNumberRight', required: false, placeholder: '', value: '' }, { type: 'vue-color', - label: '别名颜色', - name: 'xNameColor', + label: '数值颜色', + name: 'XcolorRight', required: false, placeholder: '', - value: '#fff' + value: '#fff', }, { type: 'el-input-number', - label: '别名字号', - name: 'xNameFontSize', + label: '数值字号', + name: 'fontSizeXRight', required: false, placeholder: '', - value: 14 + value: 14, }, { type: 'el-switch', - label: '轴反转', - name: 'reversalX', - required: false, + label: 'X轴线', + name: 'xLineRight', + require: false, placeholder: '', - value: false + value: false, }, { - type: 'el-slider', - label: '文字角度', - name: 'textAngleX', + type: 'vue-color', + label: '轴颜色', + name: 'lineColorXRight', required: false, placeholder: '', - value: 0 + value: '#fff', }, { - type: 'el-input-number', - label: '文字间隔', - name: 'textInterval', - required: false, + type: 'el-switch', + label: '竖分割线', + name: 'SplitLineRight', + require: false, placeholder: '', - value: '' + value: false, }, { type: 'vue-color', - label: '文字颜色', - name: 'Xcolor', + label: '分割线颜色', + name: 'SplitLineColorRight', required: false, placeholder: '', value: '#fff', }, { type: 'el-input-number', - label: '文字字号', - name: 'fontSizeX', + label: '分割线宽度', + name: 'SplitLinefontSizeRight', required: false, placeholder: '', - value: 14, - }, - { - type: 'vue-color', - label: '轴颜色', - name: 'lineColorX', - required: false, - placeholder: '', - value: '#fff', + value: 1, }, { type: 'el-switch', - label: '分割线显示', - name: 'isShowSplitLineX', + label: '边框线', + name: 'frameLineRight', require: false, placeholder: '', value: false, }, - { - type: 'vue-color', - label: '分割线颜色', - name: 'splitLineColorX', - required: false, - placeholder: '', - value: '#fff', - - } ], }, { diff --git a/report-ui/src/views/report/bigscreen/designer/widget/bar/widgetBarCompareChart.vue b/report-ui/src/views/report/bigscreen/designer/widget/bar/widgetBarCompareChart.vue index 4c398abc..54b20f6b 100644 --- a/report-ui/src/views/report/bigscreen/designer/widget/bar/widgetBarCompareChart.vue +++ b/report-ui/src/views/report/bigscreen/designer/widget/bar/widgetBarCompareChart.vue @@ -276,6 +276,7 @@ export default { editorOptions() { this.setOptionsTitle(); this.setOptionsXLeft(); + this.setOptionsXRight(); this.setOptionsTop(); this.setOptionsTooltip(); this.setOptionsGrid(); @@ -305,7 +306,10 @@ export default { type: 'value', inverse: true, axisLine: {//X轴线 - show: false, + show: optionsSetup.xLineLeft, + lineStyle: { + color: optionsSetup.lineColorXLeft, + }, }, axisTick: { show: false, @@ -314,21 +318,56 @@ export default { axisLabel: { // x轴 show: optionsSetup.hideXLeft, textStyle: { - color : optionsSetup.lineColorXLeft, + color : optionsSetup.XcolorLeft, fontSize: optionsSetup.fontSizeXLeft } }, splitLine: { // 分割线 - show: false, + show: optionsSetup.SplitLineLeft, lineStyle: { - color: '#57617f', - width: 1, + color: optionsSetup.SplitLineColorLeft, + width: optionsSetup.SplitLinefontSizeLeft, type: 'solid' } } } this.options.xAxis[0] = xAxisLeft; }, + // 右X轴设置 + setOptionsXRight() { + const optionsSetup = this.optionsSetup; + const xAxisRight = { + gridIndex: 2, + splitNumber: optionsSetup.splitNumberRight, + type: 'value', + axisLine: {//X轴线 + show: optionsSetup.xLineRight, + lineStyle: { + color: optionsSetup.lineColorXRight, + }, + }, + axisTick: { + show: false, + }, + position: 'bottom', + axisLabel: { // x轴 + show: optionsSetup.hideXRight, + textStyle: { + color : optionsSetup.XcolorRight, + fontSize: optionsSetup.fontSizeXRight + } + }, + splitLine: { // 分割线 + show: optionsSetup.SplitLineRight, + lineStyle: { + color: optionsSetup.SplitLineColorRight, + width: optionsSetup.SplitLinefontSizeRight, + type: 'solid' + } + } + } + this.options.xAxis[2] = xAxisRight; + }, // 数值设定、柱体设置 setOptionsTop() { const optionsSetup = this.optionsSetup; @@ -388,7 +427,7 @@ export default { const optionsSetup = this.optionsSetup; const grid = [ {//左 - show: false, + show: optionsSetup.frameLineLeft, left: optionsSetup.marginLeftRight, top: optionsSetup.marginTop, bottom: optionsSetup.marginBottom, @@ -403,7 +442,7 @@ export default { width: '0%' }, {//右 - show: false, + show: optionsSetup.frameLineRight, right: optionsSetup.marginLeftRight, top: optionsSetup.marginTop, bottom: optionsSetup.marginBottom,