From 3cc9008f072f1b6979247e3857be6bfc96d560af Mon Sep 17 00:00:00 2001 From: qianming Date: Wed, 25 Aug 2021 15:13:41 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9F=B1=E7=8A=B6=E5=AF=B9=E6=AF=94=E5=9B=BE?= =?UTF-8?q?=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 | 62 ++--------- .../widget/bar/widgetBarCompareChart.vue | 103 ++++++++++++++++-- 2 files changed, 105 insertions(+), 60 deletions(-) diff --git a/report-ui/src/views/report/bigscreen/designer/tools.js b/report-ui/src/views/report/bigscreen/designer/tools.js index 8e77dab7..e0d06072 100644 --- a/report-ui/src/views/report/bigscreen/designer/tools.js +++ b/report-ui/src/views/report/bigscreen/designer/tools.js @@ -7010,7 +7010,7 @@ const widgetTools = [ code: 'widgetBarCompareChart', type: 'chart', label: '柱状对比图', - icon: 'iconbianzu23', + icon: 'iconduibitupu', options: { // 配置 setup: [ @@ -7022,14 +7022,14 @@ const widgetTools = [ placeholder: '', value: '柱状对比图', }, - { + /*{ type: 'el-switch', label: '竖展示', name: 'verticalShow', required: false, placeholder: '', value: false, - }, + },*/ { type: 'vue-color', label: '背景颜色', @@ -7048,7 +7048,7 @@ const widgetTools = [ name: 'maxWidth', required: false, placeholder: '', - value: 20, + value: 15, }, { type: 'el-slider', @@ -7122,47 +7122,9 @@ const widgetTools = [ ], value: 'center' }, - { - type: 'el-input-text', - label: '副标题', - name: 'subText', - required: false, - placeholder: '', - value: '' - }, - { - type: 'vue-color', - label: '字体颜色', - name: 'subTextColor', - required: false, - placeholder: '', - value: 'rgba(30, 144, 255, 1)' - }, - { - type: 'el-select', - label: '字体粗细', - name: 'subTextFontWeight', - required: false, - placeholder: '', - selectOptions: [ - {code: 'normal', name: '正常'}, - {code: 'bold', name: '粗体'}, - {code: 'bolder', name: '特粗体'}, - {code: 'lighter', name: '细体'} - ], - value: 'normal' - }, - { - type: 'el-input-number', - label: '字体大小', - name: 'subTextFontSize', - required: false, - placeholder: '', - value: 20 - }, ], }, - { + /*{ name: 'X轴设置', list: [ { @@ -7263,8 +7225,8 @@ const widgetTools = [ } ], - }, - { + },*/ + /*{ name: 'Y轴设置', list: [ { @@ -7355,7 +7317,7 @@ const widgetTools = [ } ], - }, + },*/ { name: '数值设定', list: [ @@ -7365,7 +7327,7 @@ const widgetTools = [ name: 'isShow', required: false, placeholder: '', - value: false + value: true }, { type: 'el-input-number', @@ -7399,7 +7361,7 @@ const widgetTools = [ }, ], }, - { + /*{ name: '提示语设置', list: [ { @@ -7526,7 +7488,7 @@ const widgetTools = [ value: 'horizontal' }, ], - }, + },*/ { name: '自定义配色', list: [ @@ -7535,7 +7497,7 @@ const widgetTools = [ label: '', name: 'customColor', required: false, - value: [{color: '#ff7f50'}, {color: '#87cefa'}], + value: [{color: '#36c5e7'}, {color: '#e68b55'}], }, ], }, 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 4ee1dd6b..8a4fc3de 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 @@ -17,7 +17,7 @@ export default { return { options: { title: { - text: '柱状对比图', + //text: '柱状对比图', x: 'center', textStyle: { color: '#ffffff', @@ -61,8 +61,8 @@ export default { //itemWidth: 0 }, xAxis: [ - { - splitNumber: 2,//左间隔 + {// 左 + splitNumber: 2, type: 'value', inverse: true, axisLine: { @@ -72,14 +72,14 @@ export default { show: false, }, position: 'bottom', - axisLabel: { + axisLabel: { // x轴 show: true, textStyle: { color: '#ffffff', fontSize: 12 } }, - splitLine: { + splitLine: { // 分割线 show: true, lineStyle: { color: '#57617f', @@ -92,7 +92,7 @@ export default { gridIndex: 1, show: false, }, - { + {// 右 gridIndex: 2, type: 'value', axisLine: { @@ -177,7 +177,7 @@ export default { name: '', type: 'bar', barGap: 20, - barWidth: '80%', + barWidth: 15, label: { normal: { show: true, @@ -207,7 +207,7 @@ export default { name: '', type: 'bar', barGap: 20, - barWidth: '80%', + barWidth: 15, xAxisIndex: 2, yAxisIndex: 2, label: { @@ -256,7 +256,7 @@ export default { handler(val) { this.optionsStyle = val.position; this.optionsData = val.data; - this.optionsCollapse = val.setup; + this.optionsSetup = val.setup; this.optionsSetup = val.setup; this.editorOptions(); }, @@ -273,8 +273,92 @@ export default { methods: { // 修改图标options属性 editorOptions() { + this.setOptionsTitle(); + this.setOptionsTop(); + this.setOptionsColor(); this.setOptionsData(); }, + // 标题修改 + setOptionsTitle() { + const optionsCollapse = this.optionsSetup; + const title = {}; + title.text = optionsCollapse.titleText; + title.show = optionsCollapse.isNoTitle; + title.left = optionsCollapse.textAlign; + title.textStyle = { + color: optionsCollapse.textColor, + fontSize: optionsCollapse.textFontSize, + fontWeight: optionsCollapse.textFontWeight + }; + this.options.title = title; + }, + // 数值设定 or 柱体设置 + setOptionsTop() { + const optionsSetup = this.optionsSetup; + const series = this.options.series; + for (const key in series) { + if (series[key].type == "bar") { + series[0].label = { + normal: { + show: optionsSetup.isShow, + //color: 'red', + position: 'insideLeft', + textStyle: { + fontSize: optionsSetup.fontSize, + color: optionsSetup.subTextColor, + fontWeight: optionsSetup.fontWeight + } + }, + emphasis: { + show: false, + }, + }, + series[1].label = { + normal: { + show: optionsSetup.isShow, + color: 'red', + position: 'insideRight', + textStyle: { + fontSize: optionsSetup.fontSize, + color: optionsSetup.subTextColor, + fontWeight: optionsSetup.fontWeight + } + }, + emphasis: { + show: false, + }, + }, + series[key].barWidth = optionsSetup.maxWidth; + } + } + this.options.series = series; + }, + // 颜色修改，圆角修改 + setOptionsColor() { + const optionsSetup = this.optionsSetup; + const customColor = optionsSetup.customColor; + if (!customColor) return; + const itemStyleLeft = { + normal: { + color: customColor[0].color, + barBorderRadius: [optionsSetup.radius, 0, 0, optionsSetup.radius] + }, + emphasis: { + show: false, + }, + } + const itemStyleRight = { + normal: { + color: customColor[1].color, + barBorderRadius: [0, optionsSetup.radius, optionsSetup.radius, 0] + }, + emphasis: { + show: false, + }, + } + this.options.series[0].itemStyle = itemStyleLeft; + this.options.series[1].itemStyle = itemStyleRight; + }, // 数据解析 setOptionsData() { const optionsSetup = this.optionsSetup; @@ -335,7 +419,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;