From c729c8a4503f665b30a766645be35715f77d7a48 Mon Sep 17 00:00:00 2001 From: qianming Date: Mon, 15 Nov 2021 16:30:23 +0800 Subject: [PATCH] =?UTF-8?q?=E9=A5=BC=E5=9B=BE=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../echartsConfigJson/widget-decorate-pie.js | 102 ++-------- .../decorate/widgetDecoratePieChart.vue | 179 +++++++++--------- 2 files changed, 104 insertions(+), 177 deletions(-) diff --git a/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/widget-decorate-pie.js b/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/widget-decorate-pie.js index 6ae1677d..f8dfe390 100644 --- a/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/widget-decorate-pie.js +++ b/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/widget-decorate-pie.js @@ -56,111 +56,43 @@ export const widgetDecoratePie = { name: 'lastRing100Color', required: false, placeholder: '', - value: 'rgba(235, 10, 10, 1)' + value: '#28E8FA' }, ] }, { - name: '标题设置', + name: '八分环设置', list: [ - { - type: 'el-switch', - label: '标题', - name: 'isNoTitle', - required: false, - placeholder: '', - value: true - }, - { - type: 'el-input-text', - label: '标题', - name: 'titleText', - required: false, - placeholder: '', - value: '' - }, { type: 'vue-color', - label: '字体颜色', - name: 'textColor', + label: '颜色', + name: 'eightColor', required: false, placeholder: '', - value: '#fff' - }, - { - type: 'el-select', - label: '字体粗细', - name: 'textFontWeight', - required: false, - placeholder: '', - selectOptions: [ - {code: 'normal', name: '正常'}, - {code: 'bold', name: '粗体'}, - {code: 'bolder', name: '特粗体'}, - {code: 'lighter', name: '细体'} - ], - value: 'normal' + value: '#4FADFD' }, + ] + }, + { + name: '虚线环设置', + list: [ { type: 'el-input-number', - label: '字体大小', - name: 'textFontSize', + label: '虚线数量', + name: 'dottedNum', required: false, placeholder: '', - value: 20 - }, - { - type: 'el-select', - label: '字体位置', - name: 'textAlign', - required: false, - placeholder: '', - selectOptions: [ - {code: 'center', name: '居中'}, - {code: 'left', name: '左对齐'}, - {code: 'right', name: '右对齐'}, - ], - value: 'left' - }, - { - type: 'el-input-text', - label: '副标题', - name: 'subText', - required: false, - placeholder: '', - value: '' + value: 40 }, { type: 'vue-color', - label: '字体颜色', - name: 'subTextColor', - required: false, - placeholder: '', - value: '' - }, - { - type: 'el-select', - label: '字体粗细', - name: 'subTextFontWeight', + label: '颜色', + name: 'dottedColor', required: false, placeholder: '', - selectOptions: [ - {code: 'normal', name: '正常'}, - {code: 'bold', name: '粗体'}, - {code: 'bolder', name: '特粗体'}, - {code: 'lighter', name: '细体'} - ], - value: 'normal' + value: '#28E8FA' }, - { - type: 'el-input-number', - label: '字体大小', - name: 'subTextFontSize', - required: false, - placeholder: '', - value: 12 - }, - ], + ] }, ], ], diff --git a/report-ui/src/views/report/bigscreen/designer/widget/decorate/widgetDecoratePieChart.vue b/report-ui/src/views/report/bigscreen/designer/widget/decorate/widgetDecoratePieChart.vue index b6ab9e14..d6deb124 100644 --- a/report-ui/src/views/report/bigscreen/designer/widget/decorate/widgetDecoratePieChart.vue +++ b/report-ui/src/views/report/bigscreen/designer/widget/decorate/widgetDecoratePieChart.vue @@ -34,30 +34,19 @@ export default { }, itemStyle: { normal: { - color: { - colorStops: [ - { - offset: 0, - color: '#4FADFD', // 0% 处的颜色 - }, - { - offset: 1, - color: 'rgba(235, 10, 10, 1)', // 100% 处的颜色 - }, - ], - }, + show: false, }, }, data: [0] }, { + name: '外四环', type: 'pie', zlevel: 2, silent: true, radius: ['90%', '91%'], startAngle: 50, hoverAnimation: false, - // animation:false, //charts3 no label: { normal: { show: false @@ -68,9 +57,10 @@ export default { show: false } }, - data: this.pie2() + data: [0] }, { + name: '里四环', type: 'pie', zlevel: 3, silent: true, @@ -85,9 +75,10 @@ export default { show: false } }, - data: this.pie2() + data: [0] }, { + name: '虚线环', type: 'pie', zlevel: 4, silent: true, @@ -102,9 +93,10 @@ export default { show: false } }, - data: this.pie3() + data: [0] }, { + name: '三分环', type: 'pie', zlevel: 5, silent: true, @@ -121,7 +113,7 @@ export default { data: [50, 20, 40] }, { - name: "", + name: "刻度环", type: 'gauge', splitNumber: 30, //刻度数量 min: 0, @@ -167,7 +159,7 @@ export default { }, }, { - //name: '统计', + name: '刻度环', type: 'gauge', splitNumber: 30, //刻度数量 min: 0, @@ -223,21 +215,6 @@ export default { }, data: [] }, - { - type: 'pie', - zlevel: 20, - silent: true, - radius: ['60%', '59%'], - hoverAnimation: false, - color: '#2dc0c9', - // animation:false, - //data: [1], - labelLine: { - normal: { - show: false - } - } - }, { name: '中间环形图', type: 'pie', @@ -312,7 +289,42 @@ export default { this.editorOptions(); }, methods: { - pie2() { + editorOptions() { + this.setOptionsLastRing(); + this.setOptionsEightRing(); + this.setOptionsDottedRing(); + }, + // 最外外环1 + setOptionsLastRing() { + const optionsSetup = this.optionsSetup; + const series = this.options.series[0]; + if (optionsSetup.isLastRingShow) { + series.data = [0] + } else { + series.data = '' + } + const normal = { + color: { + colorStops: [ + { + offset: 0, + color: optionsSetup.lastRing0Color, + }, + { + offset: 1, + color: optionsSetup.lastRing100Color, + }, + ], + }, + }; + series.itemStyle['normal'] = normal; + }, + setRingPie2() { + const optionsSetup = this.optionsSetup; + let eightColor = optionsSetup.eightColor; + if (eightColor == "") { + eightColor = 'rgba(0,0,0,0)'; + } let dataArr = []; for (let i = 0; i < 8; i++) { if (i % 2 === 0) { @@ -321,9 +333,9 @@ export default { value: 25, itemStyle: { normal: { - color: "rgba(88,142,197,0.5)", + color: optionsSetup.eightColor, borderWidth: 0, - borderColor: "rgba(0,0,0,0)" + borderColor: 'rgba(0,0,0,0)' } } }) @@ -333,9 +345,7 @@ export default { value: 20, itemStyle: { normal: { - color: "rgba(0,0,0,0)", - borderWidth: 0, - borderColor: "rgba(0,0,0,0)" + color: 'rgba(0,0,0,0)' } } }) @@ -343,18 +353,28 @@ export default { } return dataArr }, - pie3() { + setOptionsEightRing() { + const series = this.options.series; + series[1].data = this.setRingPie2(); + series[2].data = this.setRingPie2(); + }, + setRingPie3() { + const optionsSetup = this.optionsSetup; + let dottedColor = optionsSetup.dottedColor; + if (dottedColor == "") { + dottedColor = 'rgba(0,0,0,0)'; + } let dataArr = []; - for (let i = 0; i < 100; i++) { + for (let i = 0; i < (optionsSetup.dottedNum * 2); i++) { if (i % 2 === 0) { dataArr.push({ name: (i + 1).toString(), value: 25, itemStyle: { normal: { - color: "rgb(126,190,255)", + color: dottedColor, borderWidth: 0, - borderColor: "rgba(0,0,0,0)" + borderColor: 'rgba(0,0,0,0)' } } }) @@ -364,7 +384,7 @@ export default { value: 20, itemStyle: { normal: { - color: "rgba(0,0,0,0)", + color: 'rgba(0,0,0,0)', borderWidth: 0, borderColor: "rgba(0,0,0,0)" } @@ -374,56 +394,31 @@ export default { } return dataArr }, - editorOptions() { - this.setOptionsLastRing(); - //this.setOptionsTitle(); + setOptionsDottedRing(){ + const series = this.options.series; + series[3].data = this.setRingPie3() }, - // 最外外环1 - setOptionsLastRing() { - const optionsSetup = this.optionsSetup; - const series = this.options.series[0]; - if (optionsSetup.isLastRingShow) { - series.data = [0] - }else { - series.data = '' - } - const normal = { - color: { - colorStops: [ - { - offset: 0, - color: optionsSetup.lastRing0Color, - }, - { - offset: 1, - color: optionsSetup.lastRing100Color, - }, - ], - }, + // 标题修改 + 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 }; - series.itemStyle['normal'] = normal; - }, - // 标题修改 - 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 - }; - title.subtext = optionsCollapse.subText; - title.subtextStyle = { - color: optionsCollapse.subTextColor, - fontWeight: optionsCollapse.subTextFontWeight, - fontSize: optionsCollapse.subTextFontSize - }; - this.options.title = title; - }, -} + title.subtext = optionsCollapse.subText; + title.subtextStyle = { + color: optionsCollapse.subTextColor, + fontWeight: optionsCollapse.subTextFontWeight, + fontSize: optionsCollapse.subTextFontSize + }; + this.options.title = title; + }, + } }