From 53c677a98074fa1a7219eb9430437a3404ba97af Mon Sep 17 00:00:00 2001 From: qianming Date: Thu, 29 Jul 2021 17:59:33 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9F=B1=E7=8A=B6=E5=9B=BE-=E6=B8=90=E5=8F=98?= =?UTF-8?q?=E8=89=B2=E5=9B=BE=E5=BD=A2=E5=8A=9F=E8=83=BD=E5=B7=B2=E6=B7=BB?= =?UTF-8?q?=E5=8A=A0=EF=BC=8C=E6=94=AF=E6=8C=81=E6=B8=90=E5=8F=98=E8=89=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../views/report/bigscreen/designer/tools.js | 174 +++++++++++++----- .../bar/widgetGradientColorBarchart.vue | 82 ++++----- 2 files changed, 157 insertions(+), 99 deletions(-) diff --git a/report-ui/src/views/report/bigscreen/designer/tools.js b/report-ui/src/views/report/bigscreen/designer/tools.js index 1276d16f..baaba81f 100644 --- a/report-ui/src/views/report/bigscreen/designer/tools.js +++ b/report-ui/src/views/report/bigscreen/designer/tools.js @@ -1887,7 +1887,15 @@ const widgetTools = [ name: 'layerName', required: false, placeholder: '', - value: '柱状图', + value: '柱形图-渐变色', + }, + { + type: 'el-switch', + label: '竖展示', + name: 'verticalShow', + required: false, + placeholder: '', + value: false, }, { type: 'vue-color', @@ -1898,6 +1906,35 @@ const widgetTools = [ value: '' }, [ + { + name: '柱体设置', + list: [ + { + type: 'el-slider', + label: '最大宽度', + name: 'maxWidth', + required: false, + placeholder: '', + value: 10, + }, + { + type: 'el-slider', + label: '圆角', + name: 'radius', + require: false, + placeholder: '', + value: 5, + }, +/* { + type: 'el-slider', + label: '最小高度', + name: 'minHeight', + require: false, + placeholder: '', + value: 0, + },*/ + ], + }, { name: '标题设置', list: [ @@ -2020,20 +2057,20 @@ const widgetTools = [ value: true, }, { - type: 'vue-color', - label: '坐标名颜色', - name: 'xNameColor', + type: 'el-input-number', + label: '字号', + name: 'fontSizeX', required: false, placeholder: '', - value: '#fff' + value: 12, }, { - type: 'el-input-number', - label: '字体大小', - name: 'xNameFontSize', + type: 'vue-color', + label: '颜色', + name: 'Xcolor', required: false, placeholder: '', - value: 12 + value: '#fff', }, { type: 'el-slider', @@ -2057,23 +2094,7 @@ const widgetTools = [ name: 'reversalX', required: false, placeholder: '', - value: '' - }, - { - type: 'vue-color', - label: '颜色', - name: 'Xcolor', - required: false, - placeholder: '', - value: '#fff', - }, - { - type: 'el-input-number', - label: '字号', - name: 'fontSizeX', - required: false, - placeholder: '', - value: 12, + value: false }, { type: 'vue-color', @@ -2098,7 +2119,6 @@ const widgetTools = [ required: false, placeholder: '', value: '#fff', - } ], }, @@ -2123,43 +2143,43 @@ const widgetTools = [ }, { 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: 12, }, { - type: 'el-switch', - label: '轴反转', - name: 'reversalY', + type: 'el-slider', + label: '文字角度', + name: 'ytextAngle', required: false, placeholder: '', - value: false + value: 0 }, { - type: 'vue-color', - label: '颜色', - name: 'colorY', + type: 'el-input-number', + label: '文字间隔', + name: 'ytextInterval', required: false, placeholder: '', - value: '#fff', + value: '' }, { - type: 'el-input-number', - label: '字号', - name: 'fontSizeY', + type: 'el-switch', + label: '轴反转', + name: 'reversalY', required: false, placeholder: '', - value: 12, + value: false }, { type: 'vue-color', @@ -2187,6 +2207,49 @@ const widgetTools = [ } ], }, + { + name: '数值设定', + list: [ + { + type: 'el-switch', + label: '显示', + name: 'isShow', + required: false, + placeholder: '', + value: false + }, + { + type: 'el-input-number', + label: '字体大小', + name: 'fontSize', + required: false, + placeholder: '', + value: 14 + }, + { + type: 'vue-color', + label: '字体颜色', + name: 'subTextColor', + required: false, + placeholder: '', + value: '#fff' + }, + { + type: 'el-select', + label: '字体粗细', + name: 'fontWeight', + required: false, + placeholder: '', + selectOptions: [ + {code: 'normal', name: '正常'}, + {code: 'bold', name: '粗体'}, + {code: 'bolder', name: '特粗体'}, + {code: 'lighter', name: '细体'} + ], + value: 'normal' + }, + ], + }, { name: '坐标轴边距设置', list: [ @@ -2227,20 +2290,35 @@ const widgetTools = [ { type: 'vue-color', label: '0%处', - name: 'barStart', + name: 'bar0color', required: false, placeholder: '', - value: '#00F4FFFF' + value: '#00F4FF' }, { type: 'vue-color', label: '100%处', - name: 'barEnd', + name: 'bar100color', required: false, placeholder: '', - value: '#004DA7FF' + value: '#004DA7' + }, + { + type: 'vue-color', + label: '阴影颜色', + name: 'shadowColor', + required: false, + placeholder: '', + value: '#00A0DD' + }, + { + type: 'el-input-number', + label: '模糊系数', + name: 'shadowBlur', + required: false, + placeholder: '', + value: 4, }, - ], }, ], 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 6f855350..70a1df74 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 @@ -95,12 +95,7 @@ export default { barWidth: "20px", itemStyle: { normal: { - color: new echarts.graphic.LinearGradient( - 0, - 0, - 0, - 1, - [ + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: "rgba(0,244,255,1)" // 0% 处的颜色 @@ -112,38 +107,22 @@ export default { ], false ), - barBorderRadius: [30, 30, 30, 30], shadowColor: "rgba(0,160,221,1)", + //模糊细数 shadowBlur: 4 } }, label: { normal: { show: true, - lineHeight: 30, - width: 80, - height: 30, - backgroundColor: "rgba(0,160,221,0.1)", - borderRadius: 200, - position: ["-8", "-60"], + position: ['-10', '-30'], distance: 1, - formatter: [" {d|●}", " {a|{c}} \n", " {b|}"].join( - "," - ), + formatter: '{a|{c}}', rich: { - d: { - color: "#3CDDCF" - }, a: { + fontSize: 15, color: "#fff", align: "center" - }, - b: { - width: 1, - height: 30, - borderWidth: 1, - borderColor: "#234e6c", - align: "left" } } } @@ -171,7 +150,6 @@ export default { watch: { value: { handler(val) { - console.log(val); this.optionsStyle = val.position; this.optionsData = val.data; this.optionsCollapse = val.setup; @@ -194,10 +172,8 @@ export default { this.setOptionsTitle(); this.setOptionsX(); this.setOptionsY(); - // this.setOptionsTop() - // this.setOptionsTooltip() + this.setOptionsTop(); this.setOptionsMargin(); - // this.setOptionsLegend() this.setOptionsColor(); this.setOptionsData(); }, @@ -229,15 +205,11 @@ export default { type: "category", show: optionsCollapse.hideX, // 坐标轴是否显示 name: optionsCollapse.xName, // 坐标轴名称 - nameTextStyle: { - color: optionsCollapse.xNameColor, - fontSize: optionsCollapse.xNameFontSize - }, nameRotate: optionsCollapse.textAngle, // 文字角度 inverse: optionsCollapse.reversalX, // 轴反转 axisLabel: { show: true, - interval: optionsCollapse.textInterval, // 文字角度 + interval: optionsCollapse.textInterval, // 文字间隔 rotate: optionsCollapse.textAngle, // 文字角度 textStyle: { color: optionsCollapse.Xcolor, // x轴 坐标文字颜色 @@ -266,15 +238,13 @@ export default { type: "value", show: optionsCollapse.isShowY, // 坐标轴是否显示 name: optionsCollapse.textNameY, // 坐标轴名称 - nameTextStyle: { - color: optionsCollapse.NameColorY, - fontSize: optionsCollapse.NameFontSizeY - }, inverse: optionsCollapse.reversalY, // 轴反转 axisLabel: { show: true, + interval: optionsCollapse.ytextInterval, // 文字间隔 + rotate: optionsCollapse.ytextAngle, // 文字角度 textStyle: { - color: optionsCollapse.colorY, // x轴 坐标文字颜色 + color: optionsCollapse.colorY, // y轴 坐标文字颜色 fontSize: optionsCollapse.fontSizeY } }, @@ -291,14 +261,12 @@ export default { } } }; - this.options.yAxis = yAxis; }, // 数值设定 or 柱体设置 setOptionsTop() { const optionsCollapse = this.optionsSetup; const series = this.options.series; - for (const key in series) { if (series[key].type == "bar") { series[key].label = { @@ -310,7 +278,7 @@ export default { fontWeight: optionsCollapse.fontWeight }; series[key].barWidth = optionsCollapse.maxWidth; - series[key].barMinHeight = optionsCollapse.minHeight; + //series[key].barMinHeight = optionsCollapse.minHeight; } } this.options.series = series; @@ -358,15 +326,27 @@ export default { legend.itemWidth = optionsCollapse.lengedWidth; }, // 渐变色 - setOptionsColor() { + setOptionsColor(){ const optionsCollapse = this.optionsSetup; - const barStart = {}; - barStart["offset"] = 0; - barStart["color"] = optionsCollapse.barStart; - const barEnd = {}; - barStart["offset"] = 1; - barStart["color"] = optionsCollapse.barEnd; - // this.options.series[0].itemStyle.normal.color = new echarts.graphic.LinearGradient(0, 0, 0, 1,[ barStart, barEnd], false) + const itemStyle = this.options.series[0]['itemStyle'] + const normal = { + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: optionsCollapse.bar0color // 0% 处的颜色 + }, + { + offset: 1, + color: optionsCollapse.bar100color // 100% 处的颜色 + } + ], + false + ), + barBorderRadius: optionsCollapse.radius, //圆角 + shadowColor: optionsCollapse.shadowColor, // 阴影颜色 + shadowBlur: optionsCollapse.shadowBlur //模糊系数 + } + itemStyle['normal'] = normal }, // 数据解析 setOptionsData() {