From a92124a22baa9f966893e93d50b74c65ab267420 Mon Sep 17 00:00:00 2001 From: qianming Date: Fri, 30 Jul 2021 14:18:27 +0800 Subject: [PATCH] =?UTF-8?q?=E7=99=BE=E5=88=86=E6=AF=94=E5=9B=BE=E6=94=AF?= =?UTF-8?q?=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 | 154 ++---------------- .../widget/pie/widgetPiePercentageChart.vue | 70 ++++---- 2 files changed, 43 insertions(+), 181 deletions(-) diff --git a/report-ui/src/views/report/bigscreen/designer/tools.js b/report-ui/src/views/report/bigscreen/designer/tools.js index d5f5e94d..77046c33 100644 --- a/report-ui/src/views/report/bigscreen/designer/tools.js +++ b/report-ui/src/views/report/bigscreen/designer/tools.js @@ -5071,70 +5071,6 @@ const widgetTools = [ value: '' }, [ - /*{ - 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', - required: false, - placeholder: '', - value: '#FFD700' - }, - { - type: 'el-select', - label: '字体粗细', - name: 'textFontWeight', - required: false, - placeholder: '', - selectOptions: [ - { code: 'normal', name: '正常' }, - { code: 'bold', name: '粗体' }, - { code: 'bolder', name: '特粗体' }, - { code: 'lighter', name: '细体' } - ], - value: 'normal' - }, - { - type: 'el-input-number', - label: '字体大小', - name: 'textFontSize', - 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: 'center' - } - ], - },*/ { name: '数值设置', list: [ @@ -5203,22 +5139,6 @@ const widgetTools = [ { name: '圆环设置', list: [ -/* { - type: 'vue-color', - label: '0%处', - name: 'colorStart', - required: false, - placeholder: '', - value: '#4FADFD' - }, - { - type: 'vue-color', - label: '100%处', - name: 'colorEnd', - required: false, - placeholder: '', - value: '#28E8FA' - },*/ { type: 'el-input-number', label: '刻度数量', @@ -5253,79 +5173,35 @@ const widgetTools = [ }, ] }, - /*{ - name: '图例操作', + { + name: '渐变色', list: [ - { - type: 'el-switch', - label: '图例', - name: 'isShowLegend', - required: false, - placeholder: '', - value: true, - }, { type: 'vue-color', - label: '字体颜色', - name: 'lengedColor', - required: false, - placeholder: '', - value: '#fff', - }, - { - type: 'el-input-number', - label: '字体大小', - name: 'lengedFontSize', - required: false, - placeholder: '', - value: 16, - }, - { - type: 'el-input-number', - label: '图例宽度', - name: 'lengedWidth', - required: false, - placeholder: '', - value: 15, - }, - { - type: 'el-select', - label: '横向位置', - name: 'lateralPosition', + label: '0%处颜色', + name: 'color0Start', required: false, placeholder: '', - selectOptions: [ - { code: 'left', name: '左对齐' }, - { code: 'right', name: '右对齐' }, - ], - value: '' + value: '#4FADFD' }, { - type: 'el-select', - label: '纵向位置', - name: 'longitudinalPosition', + type: 'vue-color', + label: '100%颜色', + name: 'color100End', required: false, placeholder: '', - selectOptions: [ - { code: 'top', name: '顶部' }, - { code: 'bottom', name: '底部' }, - ], - value: '' + value: '#28E8FA' }, { - type: 'el-select', - label: '布局前置', - name: 'layoutFront', + type: 'vue-color', + label: '余处颜色', + name: 'colorsurplus', required: false, placeholder: '', - selectOptions: [ - { code: 'vertical', name: '竖排' }, - { code: 'horizontal', name: '横排' }, - ], - value: '' + value: '#173164' }, - ], - },*/ + ] + } ], ], // 数据 diff --git a/report-ui/src/views/report/bigscreen/designer/widget/pie/widgetPiePercentageChart.vue b/report-ui/src/views/report/bigscreen/designer/widget/pie/widgetPiePercentageChart.vue index 570fbea5..f671a6ea 100644 --- a/report-ui/src/views/report/bigscreen/designer/widget/pie/widgetPiePercentageChart.vue +++ b/report-ui/src/views/report/bigscreen/designer/widget/pie/widgetPiePercentageChart.vue @@ -254,6 +254,7 @@ export default { show: false, }, }, + //剩余圆环颜色 itemStyle: { normal: { color: '#173164', @@ -359,9 +360,10 @@ export default { this.setOptionsTitle(); //this.setOptionsTooltip(); //this.setOptionsLegend(); - //this.setOptionsColor(); + this.setOptionsColor(); this.setOptionsData(); this.setOptionLine(); + this.setOptionSurplusColor(); }, setOptionsTitle() { const optionsCollapse = this.optionsSetup; @@ -397,48 +399,33 @@ export default { } }, //圆环0-100%颜色 - /*setOptionPerData(val) { + setOptionsColor() { const optionsSetup = this.optionsSetup; - const data = this.options.series[6]['data']; - data.forEach((ev, index) => { - if (index == 0) { - ev.value = val - const itemStyle = { - normal: { - color: { - colorStops: [ - { - offset: 0, - color: optionsSetup.colorStart, // 0% 处的颜色 - }, - { - offset: 1, - color: optionsSetup.colorEnd, // 100% 处的颜色 - }, - ] - } - } - }; - data['itemStyle'] = itemStyle - } else if (index == 1) { - ev.value = (100 - val) - const label = { - normal: { - show: false, + const itemStyle = this.options.series[6]['data'][0]['itemStyle'] + const normal = { + color: { + // 完成的圆环的颜色 + colorStops: [ + { + offset: 0, + color: optionsSetup.color0Start, // 0% 处的颜色 }, - }; - const itemStyle = { - /!*normal: { - color: '#173164', - },*!/ - }; - data['label'] = label; - data['itemStyle'] = itemStyle; - } else { - } - ; - }) - },*/ + { + offset: 1, + color: optionsSetup.color100End, // 100% 处的颜色 + }, + ], + }, + }; + itemStyle['normal'] = normal + }, + setOptionSurplusColor(){ + const itemStyle = this.options.series[6]['data'][1]['itemStyle'] + const normal = { + color: this.optionsSetup.colorsurplus, + }; + itemStyle['normal'] = normal + }, setOptionLine() { const optionsSetup = this.optionsSetup; const line = this.options.series[7]['splitLine']; @@ -466,7 +453,6 @@ export default { title.text = '{nums|' + val + '}{percent|%}'; this.options.series[6]['data'][0]['value'] = val ; this.options.series[6]['data'][1]['value'] = 100 - val ; - //this.setOptionPerData(val) }, dynamicDataFn(val, refreshTime) { if (!val) return;