From 05c26a2a85c383607c94c428c45a8ef2d2466139 Mon Sep 17 00:00:00 2001 From: qianming Date: Wed, 21 Jul 2021 17:42:16 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B0=94=E6=B3=A1=E5=9C=B0=E5=9B=BE=E5=8A=9F?= =?UTF-8?q?=E8=83=BD=E8=8F=9C=E5=8D=95=E5=A2=9E=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../views/report/bigscreen/designer/tools.js | 115 ++++++++++++++++++ .../widget/map/widgetAirBubbleMap.vue | 60 +++++++-- 2 files changed, 164 insertions(+), 11 deletions(-) diff --git a/report-ui/src/views/report/bigscreen/designer/tools.js b/report-ui/src/views/report/bigscreen/designer/tools.js index 11f38e17..a2b3e695 100644 --- a/report-ui/src/views/report/bigscreen/designer/tools.js +++ b/report-ui/src/views/report/bigscreen/designer/tools.js @@ -5819,6 +5819,121 @@ const widgetTools = [ }, ], }, + { + name: '字体设置', + list: [ + { + type: 'el-input-number', + label: '文字大小', + name: 'fontTextSize', + required: false, + placeholder: '', + value: 15, + }, + { + type: 'vue-color', + label: '文字颜色', + name: 'fontTextColor', + required: false, + placeholder: '', + value: '#D4EEFF' + }, + { + type: 'el-select', + label: '文字粗细', + name: 'fontTextWeight', + required: false, + placeholder: '', + selectOptions: [ + {code: 'normal', name: '正常'}, + {code: 'bold', name: '粗体'}, + {code: 'bolder', name: '特粗体'}, + {code: 'lighter', name: '细体'} + ], + value: 'normal' + }, + { + type: 'el-input-number', + label: '数值大小', + name: 'fontDataSize', + required: false, + placeholder: '', + value: 15, + }, + { + type: 'vue-color', + label: '数值颜色', + name: 'fontDataColor', + required: false, + placeholder: '', + value: '#D4EEFF' + }, + { + type: 'el-select', + label: '数值粗细', + name: 'fontDataWeight', + required: false, + placeholder: '', + selectOptions: [ + {code: 'normal', name: '正常'}, + {code: 'bold', name: '粗体'}, + {code: 'bolder', name: '特粗体'}, + {code: 'lighter', name: '细体'} + ], + value: 'normal' + }, + ], + }, + { + name: '气泡设置', + list: [ + { + type: 'el-input-number', + label: '气泡大小', + name: 'fontAirSize', + required: false, + placeholder: '', + value: 20, + }, + /*{ + type: 'vue-color', + label: '气泡颜色', + name: 'fontPieColor', + required: false, + placeholder: '', + value: '' + },*/ + ], + }, + { + name: '地图块颜色', + list: [ + { + type: 'vue-color', + label: '0%处颜色', + name: 'font0PreColor', + required: false, + placeholder: '', + value: '' + }, + { + type: 'vue-color', + label: '100%颜色', + name: 'font100PreColor', + required: false, + placeholder: '', + value: '' + }, + { + type: 'vue-color', + label: '高亮颜色', + name: 'fontHighlightColor', + required: false, + placeholder: '', + value: '' + }, + ], + }, /*{ name: '自定义配色', list: [ diff --git a/report-ui/src/views/report/bigscreen/designer/widget/map/widgetAirBubbleMap.vue b/report-ui/src/views/report/bigscreen/designer/widget/map/widgetAirBubbleMap.vue index c184a7ac..3763b0d4 100644 --- a/report-ui/src/views/report/bigscreen/designer/widget/map/widgetAirBubbleMap.vue +++ b/report-ui/src/views/report/bigscreen/designer/widget/map/widgetAirBubbleMap.vue @@ -255,12 +255,11 @@ export default { map: 'china', aspectScale: 0.75, label: { - normal: { - //formatter: '{b}', + normal: {//调整数值 position: 'right', show: true, color: '#53D9FF', - fontSize: 15 + fontSize: 20 }, emphasis: { show: true, @@ -354,7 +353,8 @@ export default { symbolSize: function (val) { if (val[2] == 0) { return 0; - }; + } + ; return ((maxSize4Pin - minSize4Pin) / (max - min)) * val[2] + (maxSize4Pin - ((maxSize4Pin - minSize4Pin) / (max - min)) * max) * 1.2; }, data: convertData(data), @@ -402,6 +402,10 @@ export default { // 修改图标options属性 editorOptions() { this.setOptionsTitle(); + this.setOptionTextValue(); + this.setOptionDataValue(); + this.setOptionsData(); + this.setOptionAirSize(); }, // 标题设置 setOptionsTitle() { @@ -423,20 +427,54 @@ export default { }; this.options.title = title; }, + setOptionTextValue() { + const optionsSetup = this.optionsSetup; + const label = this.options.series[0]['label']; + const normal = { + position: 'right', + show: true, + color: optionsSetup.fontTextColor, + fontSize: optionsSetup.fontTextSize, + fontWeight: optionsSetup.fontTextWeight, + }; + label['normal'] = normal; + }, + setOptionDataValue(){ + const optionsSetup = this.optionsSetup; + const label = this.options.series[1]['label']; + const normal = { + show: true, + color: '#fff', + fontWeight: 'bold', + position: 'inside', + formatter: function (para) { + return '{cnNum|' + para.data.value[2] + '}' + }, + rich: { + cnNum: { + fontSize: optionsSetup.fontDataSize, + color: optionsSetup.fontDataColor, + fontWeight:optionsSetup.fontDataWeight, + } + } + }; + label['normal'] = normal; + }, + setOptionAirSize(){ + minSize4Pin = this.optionsSetup.fontAirSize + }, //数据解析 setOptionsData() { const optionsData = this.optionsData; // 数据类型 静态 or 动态 optionsData.dataType == "staticData" ? this.staticDataFn(optionsData.staticData) - : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime); + : this.dynamicDataFn( + optionsData.dynamicData, + optionsData.refreshTime + ); }, staticDataFn(val) { - const staticData = JSON.parse(val); - for (const key in this.options.series) { - if (this.options.series[key].type == "china") { - this.options.series[key].data = staticData; - } - } + }, dynamicDataFn(val, refreshTime) { if (!val) return;