From dfb033ac6f9ebc0181b3629c082b626d22815c8f Mon Sep 17 00:00:00 2001 From: qianming Date: Wed, 18 Aug 2021 17:55:00 +0800 Subject: [PATCH 1/3] =?UTF-8?q?=E5=A0=86=E5=8F=A0=E5=9B=BE=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F=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 | 25 +++---- .../widget/bar/widgetBarStackChart.vue | 66 +++++++++++-------- 2 files changed, 49 insertions(+), 42 deletions(-) diff --git a/report-ui/src/views/report/bigscreen/designer/tools.js b/report-ui/src/views/report/bigscreen/designer/tools.js index 19f1d7a7..6b749ab6 100644 --- a/report-ui/src/views/report/bigscreen/designer/tools.js +++ b/report-ui/src/views/report/bigscreen/designer/tools.js @@ -5707,19 +5707,11 @@ const widgetTools = [ name: 'maxWidth', required: false, placeholder: '', - value: 10, - }, - { - type: 'el-slider', - label: '圆角', - name: 'radius', - require: false, - placeholder: '', - value: 5, + value: 20, }, ], }, - { +/* { name: '标题设置', list: [ { @@ -6050,15 +6042,16 @@ const widgetTools = [ }, ], }, - { + /!*{ name: '提示语设置', list: [ { type: 'el-input-number', label: '字体大小', - name: 'fontSize', + name: 'tipsFontSize', required: false, placeholder: '', + value: 16 }, { type: 'vue-color', @@ -6068,7 +6061,7 @@ const widgetTools = [ placeholder: '', }, ], - }, + },*!/ { name: '坐标轴边距设置', list: [ @@ -6145,11 +6138,11 @@ const widgetTools = [ required: false, placeholder: '', selectOptions: [ + {code: 'center', name: '居中'}, {code: 'left', name: '左对齐'}, {code: 'right', name: '右对齐'}, - //{code: 'mid', name: '居中'}, ], - value: 'left' + value: 'center' }, { type: 'el-select', @@ -6176,7 +6169,7 @@ const widgetTools = [ value: 'horizontal' }, ], - }, + },*/ /*{ name: '自定义配色', list: [ diff --git a/report-ui/src/views/report/bigscreen/designer/widget/bar/widgetBarStackChart.vue b/report-ui/src/views/report/bigscreen/designer/widget/bar/widgetBarStackChart.vue index 10dcefdb..27355258 100644 --- a/report-ui/src/views/report/bigscreen/designer/widget/bar/widgetBarStackChart.vue +++ b/report-ui/src/views/report/bigscreen/designer/widget/bar/widgetBarStackChart.vue @@ -93,13 +93,14 @@ export default { methods: { // 修改图标options属性 editorOptions() { - this.setOptionsTitle(); - this.setOptionsX(); - this.setOptionsY(); - this.setOptionsTop(); - this.setOptionsTooltip(); - this.setOptionsMargin(); - this.setOptionsLegend(); + //this.setOptionBar(); + //this.setOptionsTitle(); + //this.setOptionsX(); + //this.setOptionsY(); + //this.setOptionsTop(); + //this.setOptionsTooltip(); + //this.setOptionsMargin(); + //this.setOptionsLegend(); //this.setOptionsColor(); this.setOptionsData(); }, @@ -195,11 +196,25 @@ export default { }; this.options.yAxis = yAxis; }, - // 数值设定 or 柱体设置 数值设定字体大小，默认值没回显 + //柱体设置 + setOptionBar() { + const optionsSetup = this.optionsSetup; + const series = this.options.series; + const itemStyle = { + borderRadius: optionsSetup.radius + } + const barWidth = optionsSetup.maxWidth; + for (const key in series) { + if (series[key].type == "bar") { + this.options.series[key].itemStyle = itemStyle + } + } + ; + }, + // 数值设定 or 柱体设置 setOptionsTop() { const optionsCollapse = this.optionsSetup; const series = this.options.series; - for (const key in series) { if (series[key].type == "bar") { series[key].label = { @@ -211,25 +226,23 @@ export default { fontWeight: optionsCollapse.fontWeight }; series[key].barWidth = optionsCollapse.maxWidth; - console.log(series[key].barWidth) - series[key].barMinHeight = optionsCollapse.minHeight; } } this.options.series = series; }, // tooltip 设置 - setOptionsTooltip() { - const optionsCollapse = this.optionsSetup; - const tooltip = { - trigger: "item", - show: true, - textStyle: { - color: optionsCollapse.lineColor, - fontSize: optionsCollapse.fontSize - } - }; - this.options.tooltip = tooltip; - }, + /* setOptionsTooltip() { + const optionsCollapse = this.optionsSetup; + const tooltip = { + trigger: "item", + show: true, + textStyle: { + color: optionsCollapse.lineColor, + fontSize: optionsCollapse.tipsFontSize + } + }; + this.options.tooltip = tooltip; + },*/ // 边距设置 setOptionsMargin() { const optionsCollapse = this.optionsSetup; @@ -329,11 +342,12 @@ export default { series.push({ name: yAxisList[i], type: "bar", - data: data , + data: data, barGap: "0%", - /*itemStyle: { + barWidth : optionsSetup.maxWidth, + itemStyle: { borderRadius: null - }*/ + } }) } this.options.series = series From 81cf89aeabace6955c9e6ae22b270987f2b266c4 Mon Sep 17 00:00:00 2001 From: qianming Date: Thu, 19 Aug 2021 14:24:55 +0800 Subject: [PATCH 2/3] =?UTF-8?q?=E5=A0=86=E5=8F=A0=E5=9B=BE=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F=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 | 94 ++++++++++--------- .../widget/bar/widgetBarStackChart.vue | 37 +++----- 2 files changed, 66 insertions(+), 65 deletions(-) diff --git a/report-ui/src/views/report/bigscreen/designer/tools.js b/report-ui/src/views/report/bigscreen/designer/tools.js index 6b749ab6..860f5c2f 100644 --- a/report-ui/src/views/report/bigscreen/designer/tools.js +++ b/report-ui/src/views/report/bigscreen/designer/tools.js @@ -5711,7 +5711,7 @@ const widgetTools = [ }, ], }, -/* { + { name: '标题设置', list: [ { @@ -5816,14 +5816,6 @@ const widgetTools = [ { name: 'X轴设置', list: [ - { - type: 'el-input-text', - label: '名称', - name: 'xName', - required: false, - placeholder: '', - value: '' - }, { type: 'el-switch', label: '显示', @@ -5832,9 +5824,17 @@ const widgetTools = [ placeholder: '', value: true, }, + { + type: 'el-input-text', + label: 'X轴别名', + name: 'xName', + required: false, + placeholder: '', + value: '' + }, { type: 'vue-color', - label: '坐标名颜色', + label: '别名颜色', name: 'xNameColor', required: false, placeholder: '', @@ -5842,16 +5842,24 @@ const widgetTools = [ }, { type: 'el-input-number', - label: '字体大小', + label: '别名字号', name: 'xNameFontSize', required: false, placeholder: '', - value: 12 + value: 14 + }, + { + type: 'el-switch', + label: '轴反转', + name: 'reversalX', + required: false, + placeholder: '', + value: false }, { type: 'el-slider', label: '文字角度', - name: 'textAngle', + name: 'textAngleX', required: false, placeholder: '', value: 0 @@ -5864,17 +5872,9 @@ const widgetTools = [ placeholder: '', value: '' }, - { - type: 'el-switch', - label: '轴反转', - name: 'reversalX', - required: false, - placeholder: '', - value: false - }, { type: 'vue-color', - label: '颜色', + label: '文字颜色', name: 'Xcolor', required: false, placeholder: '', @@ -5882,11 +5882,11 @@ const widgetTools = [ }, { type: 'el-input-number', - label: '字号', + label: '文字字号', name: 'fontSizeX', required: false, placeholder: '', - value: 12, + value: 14, }, { type: 'vue-color', @@ -5918,14 +5918,6 @@ const widgetTools = [ { name: 'Y轴设置', list: [ - { - type: 'el-input-text', - label: '名称', - name: 'textNameY', - require: false, - placeholder: '', - value: '' - }, { type: 'el-switch', label: '显示', @@ -5934,9 +5926,17 @@ const widgetTools = [ placeholder: '', value: true, }, + { + type: 'el-input-text', + label: 'Y轴别名', + name: 'textNameY', + require: false, + placeholder: '', + value: '' + }, { type: 'vue-color', - label: '坐标名颜色', + label: '别名颜色', name: 'NameColorY', required: false, placeholder: '', @@ -5944,11 +5944,11 @@ const widgetTools = [ }, { type: 'el-input-number', - label: '字体大小', + label: '别名字号', name: 'NameFontSizeY', required: false, placeholder: '', - value: 12, + value: 14, }, { type: 'el-switch', @@ -5958,9 +5958,17 @@ const widgetTools = [ placeholder: '', value: false }, + { + type: 'el-slider', + label: '文字角度', + name: 'textAngleY', + required: false, + placeholder: '', + value: 0 + }, { type: 'vue-color', - label: '颜色', + label: '文字颜色', name: 'colorY', required: false, placeholder: '', @@ -5968,11 +5976,11 @@ const widgetTools = [ }, { type: 'el-input-number', - label: '字号', + label: '文字字号', name: 'fontSizeY', required: false, placeholder: '', - value: 12, + value: 14, }, { type: 'vue-color', @@ -6042,7 +6050,7 @@ const widgetTools = [ }, ], }, - /!*{ + /*{ name: '提示语设置', list: [ { @@ -6061,8 +6069,8 @@ const widgetTools = [ placeholder: '', }, ], - },*!/ - { + },*/ + /*{ name: '坐标轴边距设置', list: [ { @@ -6095,8 +6103,8 @@ const widgetTools = [ value: 10, }, ], - }, - { + },*/ + /*{ name: '图例操作', list: [ { diff --git a/report-ui/src/views/report/bigscreen/designer/widget/bar/widgetBarStackChart.vue b/report-ui/src/views/report/bigscreen/designer/widget/bar/widgetBarStackChart.vue index 27355258..b3fee286 100644 --- a/report-ui/src/views/report/bigscreen/designer/widget/bar/widgetBarStackChart.vue +++ b/report-ui/src/views/report/bigscreen/designer/widget/bar/widgetBarStackChart.vue @@ -93,18 +93,17 @@ export default { methods: { // 修改图标options属性 editorOptions() { - //this.setOptionBar(); - //this.setOptionsTitle(); - //this.setOptionsX(); - //this.setOptionsY(); - //this.setOptionsTop(); + this.setOptionsTitle(); + this.setOptionsX(); + this.setOptionsY(); + this.setOptionsTop(); //this.setOptionsTooltip(); //this.setOptionsMargin(); //this.setOptionsLegend(); //this.setOptionsColor(); this.setOptionsData(); }, - // 标题修改 对应数据内容例如ABC等的调整 + // 标题修改 setOptionsTitle() { const optionsCollapse = this.optionsSetup; const title = {}; @@ -136,7 +135,7 @@ export default { color: optionsCollapse.xNameColor, fontSize: optionsCollapse.xNameFontSize }, - nameRotate: optionsCollapse.textAngle, // 文字角度 + nameRotate: optionsCollapse.textAngleX, // 文字角度 inverse: optionsCollapse.reversalX, // 轴反转 axisLabel: { show: true, @@ -176,6 +175,7 @@ export default { inverse: optionsCollapse.reversalY, // y轴反转 axisLabel: { show: true, + rotate: optionsCollapse.textAngleY,// 文字角度 textStyle: { color: optionsCollapse.colorY, // y轴 坐标文字颜色 fontSize: optionsCollapse.fontSizeY @@ -196,21 +196,6 @@ export default { }; this.options.yAxis = yAxis; }, - //柱体设置 - setOptionBar() { - const optionsSetup = this.optionsSetup; - const series = this.options.series; - const itemStyle = { - borderRadius: optionsSetup.radius - } - const barWidth = optionsSetup.maxWidth; - for (const key in series) { - if (series[key].type == "bar") { - this.options.series[key].itemStyle = itemStyle - } - } - ; - }, // 数值设定 or 柱体设置 setOptionsTop() { const optionsCollapse = this.optionsSetup; @@ -345,6 +330,14 @@ export default { data: data, barGap: "0%", barWidth : optionsSetup.maxWidth, + label : { + show: optionsSetup.isShow, + position: "top", + distance: 10, + fontSize: optionsSetup.fontSize, + color: optionsSetup.subTextColor, + fontWeight: optionsSetup.fontWeight + }, itemStyle: { borderRadius: null } From 1525595546be911302e71fcba57eedc806b49122 Mon Sep 17 00:00:00 2001 From: qianming Date: Thu, 19 Aug 2021 14:40:50 +0800 Subject: [PATCH 3/3] =?UTF-8?q?=E6=A0=B7=E5=BC=8F=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 | 24 +++++++++++++++++-- .../widget/bar/widgetBarStackChart.vue | 8 +++---- .../bar/widgetGradientColorBarchart.vue | 3 +-- 3 files changed, 27 insertions(+), 8 deletions(-) diff --git a/report-ui/src/views/report/bigscreen/designer/tools.js b/report-ui/src/views/report/bigscreen/designer/tools.js index 860f5c2f..e9aceb81 100644 --- a/report-ui/src/views/report/bigscreen/designer/tools.js +++ b/report-ui/src/views/report/bigscreen/designer/tools.js @@ -2250,6 +2250,26 @@ const widgetTools = [ }, ], }, + { + name: '提示语设置', + list: [ + { + type: 'el-input-number', + label: '字体大小', + name: 'tipsFontSize', + required: false, + placeholder: '', + value: 16 + }, + { + type: 'vue-color', + label: '字体颜色', + name: 'lineColor', + required: false, + placeholder: '', + }, + ], + }, { name: '坐标轴边距设置', list: [ @@ -6050,7 +6070,7 @@ const widgetTools = [ }, ], }, - /*{ + { name: '提示语设置', list: [ { @@ -6069,7 +6089,7 @@ const widgetTools = [ placeholder: '', }, ], - },*/ + }, /*{ name: '坐标轴边距设置', list: [ diff --git a/report-ui/src/views/report/bigscreen/designer/widget/bar/widgetBarStackChart.vue b/report-ui/src/views/report/bigscreen/designer/widget/bar/widgetBarStackChart.vue index b3fee286..3ee18515 100644 --- a/report-ui/src/views/report/bigscreen/designer/widget/bar/widgetBarStackChart.vue +++ b/report-ui/src/views/report/bigscreen/designer/widget/bar/widgetBarStackChart.vue @@ -97,7 +97,7 @@ export default { this.setOptionsX(); this.setOptionsY(); this.setOptionsTop(); - //this.setOptionsTooltip(); + this.setOptionsTooltip(); //this.setOptionsMargin(); //this.setOptionsLegend(); //this.setOptionsColor(); @@ -215,8 +215,8 @@ export default { } this.options.series = series; }, - // tooltip 设置 - /* setOptionsTooltip() { + // tooltip 提示语设置，鼠标放置显示 + setOptionsTooltip() { const optionsCollapse = this.optionsSetup; const tooltip = { trigger: "item", @@ -227,7 +227,7 @@ export default { } }; this.options.tooltip = tooltip; - },*/ + }, // 边距设置 setOptionsMargin() { const optionsCollapse = this.optionsSetup; diff --git a/report-ui/src/views/report/bigscreen/designer/widget/bar/widgetGradientColorBarchart.vue b/report-ui/src/views/report/bigscreen/designer/widget/bar/widgetGradientColorBarchart.vue index b0e069ca..d1f38a2f 100644 --- a/report-ui/src/views/report/bigscreen/designer/widget/bar/widgetGradientColorBarchart.vue +++ b/report-ui/src/views/report/bigscreen/designer/widget/bar/widgetGradientColorBarchart.vue @@ -283,12 +283,11 @@ export default { fontWeight: optionsCollapse.fontWeight }; series[key].barWidth = optionsCollapse.maxWidth; - //series[key].barMinHeight = optionsCollapse.minHeight; } } this.options.series = series; }, - // tooltip 设置 + // tooltip 提示语设置 setOptionsTooltip() { const optionsCollapse = this.optionsSetup; const tooltip = {