From 1678f7e7335c4ac86701474f145a6d2c47c282ca Mon Sep 17 00:00:00 2001 From: qianming Date: Fri, 27 Aug 2021 14:40:59 +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 | 88 +++++--------- .../widget/bar/widgetBarCompareChart.vue | 114 +++++++----------- 2 files changed, 75 insertions(+), 127 deletions(-) diff --git a/report-ui/src/views/report/bigscreen/designer/tools.js b/report-ui/src/views/report/bigscreen/designer/tools.js index 0705bdeb..412ec14b 100644 --- a/report-ui/src/views/report/bigscreen/designer/tools.js +++ b/report-ui/src/views/report/bigscreen/designer/tools.js @@ -7247,7 +7247,7 @@ const widgetTools = [ { type: 'el-switch', label: '刻度线', - name: 'tickLineLeft', + name: 'tickLineRight', require: false, placeholder: '', value: false, @@ -7308,66 +7308,55 @@ const widgetTools = [ { type: 'el-switch', label: '显示', - name: 'isShowY', - require: false, + name: 'hideY', + required: false, placeholder: '', value: true, }, - { - type: 'el-input-text', - label: 'Y轴别名', - name: 'textNameY', - require: false, - placeholder: '', - value: '' - }, { type: 'vue-color', - label: '别名颜色', - name: 'NameColorY', + label: '数值颜色', + name: 'colorY', required: false, placeholder: '', value: '#fff', }, { type: 'el-input-number', - label: '别名字号', - name: 'NameFontSizeY', + label: '数值字号', + name: 'fontSizeY', required: false, placeholder: '', value: 14, }, { - type: 'el-switch', - label: '轴反转', - name: 'reversalY', - required: false, - placeholder: '', - value: false - }, - { - type: 'el-slider', - label: '文字角度', - name: 'textAngleY', + type: 'el-select', + label: '数值对齐', + name: 'textAlign', required: false, placeholder: '', - value: 0 + selectOptions: [ + {code: 'center', name: '居中'}, + {code: 'left', name: '左对齐'}, + {code: 'right', name: '右对齐'}, + ], + value: 'center' }, { - type: 'vue-color', - label: '文字颜色', - name: 'colorY', - required: false, + type: 'el-switch', + label: '刻度线', + name: 'tickLineY', + require: false, placeholder: '', - value: '#fff', + value: false, }, { - type: 'el-input-number', - label: '文字字号', - name: 'fontSizeY', - required: false, + type: 'el-switch', + label: 'Y轴线', + name: 'lineY', + require: false, placeholder: '', - value: 14, + value: false, }, { type: 'vue-color', @@ -7376,22 +7365,7 @@ const widgetTools = [ required: false, placeholder: '', value: '#fff', - }, { - type: 'el-switch', - label: 'y轴线显示', - name: 'isShowSplitLineY', - require: false, - placeholder: '', - value: false, - }, { - type: 'vue-color', - label: '分割线颜色', - name: 'splitLineColorY', - required: false, - placeholder: '', - value: '#fff', - - } + }, ], }, { @@ -7400,7 +7374,7 @@ const widgetTools = [ { type: 'el-switch', label: '显示', - name: 'isShowY', + name: 'isShow', required: false, placeholder: '', value: true @@ -7408,7 +7382,7 @@ const widgetTools = [ { type: 'el-input-number', label: '字体大小', - name: 'fontSizeY', + name: 'fontSize', required: false, placeholder: '', value: 14 @@ -7416,7 +7390,7 @@ const widgetTools = [ { type: 'vue-color', label: '字体颜色', - name: 'subTextColorY', + name: 'subTextColor', required: false, placeholder: '', value: '#fff' @@ -7424,7 +7398,7 @@ const widgetTools = [ { type: 'el-select', label: '字体粗细', - name: 'fontWeightY', + name: 'fontWeight', required: false, placeholder: '', selectOptions: [ 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 4e00cc0a..f5416345 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 @@ -51,9 +51,6 @@ export default { ], //图例 legend: { - data: ['success', 'fail'], - bottom: 10, - center: true, textStyle: { color: '#fff', textAlign: 'center' @@ -277,6 +274,7 @@ export default { this.setOptionsTitle(); this.setOptionsXLeft(); this.setOptionsXRight(); + this.setOptionsY(); this.setOptionsTop(); this.setOptionsTooltip(); this.setOptionsGrid(); @@ -318,7 +316,7 @@ export default { axisLabel: { // x轴 show: optionsSetup.hideXLeft, textStyle: { - color : optionsSetup.XcolorLeft, + color: optionsSetup.XcolorLeft, fontSize: optionsSetup.fontSizeXLeft } }, @@ -353,7 +351,7 @@ export default { axisLabel: { // x轴 show: optionsSetup.hideXRight, textStyle: { - color : optionsSetup.XcolorRight, + color: optionsSetup.XcolorRight, fontSize: optionsSetup.fontSizeXRight } }, @@ -368,6 +366,30 @@ export default { } this.options.xAxis[2] = xAxisRight; }, + // Y轴设置 + setOptionsY() { + const optionsSetup = this.optionsSetup; + const axisLine = { + show: optionsSetup.lineY, + lineStyle: { + color: optionsSetup.lineColorY + } + }; + const axisTick = { + show: optionsSetup.tickLineY + }; + const axisLabel = { + show: optionsSetup.hideY, + textStyle: { + align: optionsSetup.textAlign, + color: optionsSetup.colorY, + fontSize: optionsSetup.fontSizeY, + } + }; + this.options.yAxis[1]['axisLine'] = axisLine; + this.options.yAxis[1]['axisTick'] = axisTick; + this.options.yAxis[1]['axisLabel'] = axisLabel; + }, // 数值设定、柱体设置 setOptionsTop() { const optionsSetup = this.optionsSetup; @@ -377,7 +399,6 @@ export default { series[0].label = { normal: { show: optionsSetup.isShow, - //color: 'red', position: 'insideLeft', textStyle: { fontSize: optionsSetup.fontSize, @@ -423,6 +444,16 @@ export default { this.options.tooltip = tooltip; }, // 边距设置 + getOptionsBottom(){ + const optionsSetup = this.optionsSetup; + let bottom = optionsSetup.marginBottom; + if (optionsSetup.hideXLeft) { + bottom = optionsSetup.marginBottom + 15 + }else if (optionsSetup.hideXRight){ + bottom = optionsSetup.marginBottom + 15 + } + return bottom + }, setOptionsGrid() { const optionsSetup = this.optionsSetup; const grid = [ @@ -438,7 +469,7 @@ export default { show: false, left: "51%", top: optionsSetup.marginTop, - bottom: optionsSetup.marginBottom + 15, + bottom: this.getOptionsBottom(), width: '0%' }, {//右 @@ -516,13 +547,6 @@ export default { }, //静态数据 staticDataFn(val) { - const optionsSetup = this.optionsSetup; - //颜色 - const customColor = optionsSetup.customColor; - const arrColor = []; - for (let i = 0; i < customColor.length; i++) { - arrColor.push(customColor[i].color); - } //数据 let xAxisList = []; let yAxisList = []; @@ -554,17 +578,6 @@ export default { this.options.series[1]['name'] = arrayList[1].name this.options.series[1]['data'] = arrayList[1].data this.options.yAxis[1]['data'] = xAxisList - /*if (optionsSetup.verticalShow) { - this.options.xAxis.data = []; - this.options.yAxis.data = xAxisList; - this.options.xAxis.type = "value"; - this.options.yAxis.type = "category"; - } else { - this.options.xAxis.data = xAxisList; - this.options.yAxis.data = []; - this.options.xAxis.type = "category"; - this.options.yAxis.type = "value"; - }*/ }, // 动态数据 dynamicDataFn(val, refreshTime, optionsSetup) { @@ -585,52 +598,13 @@ export default { }); }, renderingFn(optionsSetup, val) { - //颜色 - const customColor = optionsSetup.customColor; - const arrColor = []; - for (let i = 0; i < customColor.length; i++) { - arrColor.push(customColor[i].color); - } - // x轴 - if (optionsSetup.verticalShow) { - this.options.xAxis.data = []; - this.options.yAxis.data = val.xAxis; - this.options.xAxis.type = "value"; - this.options.yAxis.type = "category"; - } else { - this.options.xAxis.data = val.xAxis; - this.options.yAxis.data = []; - this.options.xAxis.type = "category"; - this.options.yAxis.type = "value"; - } - const series = []; - for (const i in val.series) { - if (val.series[i].type == "bar") { - series.push({ - name: val.series[i].name, - type: "bar", - data: val.series[i].data, - barGap: "0%", - barWidth: optionsSetup.maxWidth, - label: { - show: optionsSetup.isShow, - position: "top", - distance: 10, - fontSize: optionsSetup.fontSize, - color: optionsSetup.subTextColor, - fontWeight: optionsSetup.fontWeight - }, - //颜色，圆角属性 - itemStyle: { - normal: { - color: arrColor[i], - barBorderRadius: optionsSetup.radius, - } - } - }) - } + this.options.yAxis[1]['data'] = val.xAxis + if (val.series[0].type == "bar"){ + this.options.series[0]['name'] = val.series[0].name + this.options.series[0]['data'] = val.series[0].data + this.options.series[1]['name'] = val.series[1].name + this.options.series[1]['data'] = val.series[1].data } - this.options.series = series } } };