From 737bb024d7b674ac0705ab84e80ef1ef3b77945b Mon Sep 17 00:00:00 2001 From: qianming Date: Fri, 15 Dec 2023 16:31:28 +0800 Subject: [PATCH] =?UTF-8?q?feat--=E8=AF=8D=E4=BA=91=E5=9B=BE=E3=80=81?= =?UTF-8?q?=E7=83=AD=E5=8A=9B=E5=9B=BE=E7=B3=BB=E5=88=97=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../tools/configure/heatmap/widget-heatmap.js | 883 ++++++++++++++---- .../wordcloudCharts/widget-word-cloud.js | 151 ++- .../designer/widget/heatmap/widgetHeatmap.vue | 184 ++-- .../widget/wordcloud/widgetWordCloud.vue | 46 +- 4 files changed, 996 insertions(+), 268 deletions(-) diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/heatmap/widget-heatmap.js b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/heatmap/widget-heatmap.js index 9da6b10f..170c68ec 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/heatmap/widget-heatmap.js +++ b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/heatmap/widget-heatmap.js @@ -38,7 +38,7 @@ export const widgetHeatmap = { { type: 'el-switch', label: '标题显示', - name: 'isNoTitle', + name: 'isShowTitle', required: false, placeholder: '', value: true, @@ -46,7 +46,7 @@ export const widgetHeatmap = { { type: 'el-input-text', label: '标题名', - name: 'titleText', + name: 'text', required: false, placeholder: '', value: '', @@ -74,10 +74,10 @@ export const widgetHeatmap = { required: false, placeholder: '', selectOptions: [ - { code: 'normal', name: '正常' }, - { code: 'bold', name: '粗体' }, - { code: 'bolder', name: '特粗体' }, - { code: 'lighter', name: '细体' } + {code: 'normal', name: '正常'}, + {code: 'bold', name: '粗体'}, + {code: 'bolder', name: '特粗体'}, + {code: 'lighter', name: '细体'} ], value: 'normal' }, @@ -88,29 +88,30 @@ export const widgetHeatmap = { required: false, placeholder: '', selectOptions: [ - { code: 'normal', name: '正常' }, - { code: 'italic', name: 'italic斜体' }, - { code: 'oblique', name: 'oblique斜体' }, + {code: 'normal', name: '正常'}, + {code: 'italic', name: 'italic斜体'}, + {code: 'oblique', name: 'oblique斜体'}, ], value: 'normal' }, { type: 'el-select', - label: '字体位置', - name: 'textAlign', + label: '字体系列', + name: 'textFontFamily', required: false, placeholder: '', selectOptions: [ - { code: 'center', name: '居中' }, - { code: 'left', name: '左对齐' }, - { code: 'right', name: '右对齐' }, + {code: 'sans-serif', name: 'sans-serif'}, + {code: 'serif', name: 'serif'}, + {code: 'Arial', name: 'Arial'}, + {code: 'Courier New', name: 'Courier New'}, ], - value: 'center' + value: 'sans-serif' }, { type: 'el-input-text', label: '副标题名', - name: 'subText', + name: 'subtext', required: false, placeholder: '', value: '' @@ -118,7 +119,7 @@ export const widgetHeatmap = { { type: 'vue-color', label: '字体颜色', - name: 'subTextColor', + name: 'subtextColor', required: false, placeholder: '', value: 'rgba(30, 144, 255, 1)' @@ -126,7 +127,7 @@ export const widgetHeatmap = { { type: 'el-input-number', label: '字体字号', - name: 'subTextFontSize', + name: 'subtextFontSize', required: false, placeholder: '', value: 20 @@ -134,30 +135,94 @@ export const widgetHeatmap = { { type: 'el-select', label: '字体粗细', - name: 'subTextFontWeight', + name: 'subtextFontWeight', required: false, placeholder: '', selectOptions: [ - { code: 'normal', name: '正常' }, - { code: 'bold', name: '粗体' }, - { code: 'bolder', name: '特粗体' }, - { code: 'lighter', name: '细体' } + {code: 'normal', name: '正常'}, + {code: 'bold', name: '粗体'}, + {code: 'bolder', name: '特粗体'}, + {code: 'lighter', name: '细体'} ], value: 'normal' }, { type: 'el-select', label: '字体风格', - name: 'subTextFontStyle', + name: 'subtextFontStyle', required: false, placeholder: '', selectOptions: [ - { code: 'normal', name: '正常' }, - { code: 'italic', name: 'italic斜体' }, - { code: 'oblique', name: 'oblique斜体' }, + {code: 'normal', name: '正常'}, + {code: 'italic', name: 'italic斜体'}, + {code: 'oblique', name: 'oblique斜体'}, ], value: 'normal' }, + { + type: 'el-select', + label: '字体系列', + name: 'subtextFontFamily', + required: false, + placeholder: '', + selectOptions: [ + {code: 'sans-serif', name: 'sans-serif'}, + {code: 'serif', name: 'serif'}, + {code: 'Arial', name: 'Arial'}, + {code: 'Courier New', name: 'Courier New'}, + ], + value: 'sans-serif' + }, + { + type: 'el-select', + label: '左右位置', + name: 'titleLeft', + required: false, + placeholder: '', + selectOptions: [ + {code: 'center', name: '居中'}, + {code: 'left', name: '左对齐'}, + {code: 'right', name: '右对齐'}, + ], + value: 'center' + }, + { + type: 'el-slider', + label: '上下间距', + name: 'titleTop', + required: false, + placeholder: '', + value: 5, + }, + { + type: 'el-input-number', + label: '主副标题间距', + name: 'titleItemGap', + required: false, + placeholder: '', + value: 0 + }, + ], + }, + { + name: '热力图设置', + list: [ + { + type: 'el-input-number', + label: '最小值', + name: 'dataMin', + required: false, + placeholder: '', + value: 0, + }, + { + type: 'el-input-number', + label: '最大值', + name: 'dataMax', + required: false, + placeholder: '', + value: 5000, + }, ], }, { @@ -165,40 +230,44 @@ export const widgetHeatmap = { list: [ { type: 'el-switch', - label: '显示', - name: 'hideX', + label: 'X轴显示', + name: 'isShowX', required: false, placeholder: '', value: true, }, { - type: 'el-input-text', - label: '坐标名', - name: 'nameX', - required: false, + type: 'el-switch', + label: '数值显示', + name: 'isShowAxisLabelX', + require: false, placeholder: '', - value: '' + value: true, }, { - type: 'vue-color', - label: '坐标名颜色', - name: 'nameColorX', + type: 'el-select', + label: '数值位置', + name: 'positionX', required: false, placeholder: '', - value: '#fff' + selectOptions: [ + {code: 'top', name: '上'}, + {code: 'bottom', name: '下'}, + ], + value: 'bottom' }, { type: 'el-input-number', - label: '坐标名字号', - name: 'nameFontSizeX', + label: '数值距离', + name: 'offsetX', required: false, placeholder: '', - value: 14 + value: 0 }, { type: 'vue-color', label: '数值颜色', - name: 'colorX', + name: 'textColorX', required: false, placeholder: '', value: '#fff', @@ -206,27 +275,92 @@ export const widgetHeatmap = { { type: 'el-input-number', label: '数值字号', - name: 'fontSizeX', + name: 'textFontSizeX', required: false, placeholder: '', value: 14, }, + { + type: 'el-select', + label: '数值粗细', + name: 'textFontWeightX', + required: false, + placeholder: '', + selectOptions: [ + {code: 'normal', name: '正常'}, + {code: 'bold', name: '粗体'}, + {code: 'bolder', name: '特粗体'}, + {code: 'lighter', name: '细体'} + ], + value: 'normal' + }, + { + type: 'el-select', + label: '数值风格', + name: 'textFontStyleX', + required: false, + placeholder: '', + selectOptions: [ + {code: 'normal', name: '正常'}, + {code: 'italic', name: 'italic斜体'}, + {code: 'oblique', name: 'oblique斜体'}, + ], + value: 'normal' + }, + { + type: 'el-select', + label: '数值字体', + name: 'textFontFamilyX', + required: false, + placeholder: '', + selectOptions: [ + {code: 'sans-serif', name: 'sans-serif'}, + {code: 'serif', name: 'serif'}, + {code: 'Arial', name: 'Arial'}, + {code: 'Courier New', name: 'Courier New'}, + ], + value: 'sans-serif' + }, + { + type: 'el-switch', + label: '数值自动换行', + name: 'textRowsBreakAuto', + required: false, + placeholder: '', + value: false, + }, + { + type: 'el-input-text', + label: '数值行数', + name: 'textRowsNum', + required: false, + placeholder: '', + value: '', + }, { type: 'el-input-number', label: '数值间隔', - name: 'textInterval', + name: 'textIntervalX', required: false, placeholder: '', value: '' }, { - type: 'el-slider', + type: 'el-input-number', label: '数值角度', name: 'textAngleX', required: false, placeholder: '', value: 0 }, + { + type: 'el-switch', + label: '坐标轴显示', + name: 'isShowAxisLineX', + require: false, + placeholder: '', + value: true, + }, { type: 'el-switch', label: '坐标轴反转', @@ -251,6 +385,108 @@ export const widgetHeatmap = { placeholder: '', value: 1, }, + { + type: 'el-input-text', + label: '坐标名', + name: 'nameX', + required: false, + placeholder: '', + value: '' + }, + { + type: 'el-select', + label: '坐标名位置', + name: 'nameLocationX', + required: false, + placeholder: '', + selectOptions: [ + {code: 'start', name: '起点'}, + {code: 'center', name: '中间'}, + {code: 'end', name: '终点'}, + ], + value: 'end' + }, + { + type: 'vue-color', + label: '坐标名颜色', + name: 'nameColorX', + required: false, + placeholder: '', + value: '#fff' + }, + { + type: 'el-input-number', + label: '坐标名字号', + name: 'nameFontSizeX', + required: false, + placeholder: '', + value: 14 + }, + { + type: 'el-select', + label: '坐标名粗细', + name: 'nameFontWeightX', + required: false, + placeholder: '', + selectOptions: [ + {code: 'normal', name: '正常'}, + {code: 'bold', name: '粗体'}, + {code: 'bolder', name: '特粗体'}, + {code: 'lighter', name: '细体'} + ], + value: 'normal' + }, + { + type: 'el-select', + label: '坐标名风格', + name: 'nameFontStyleX', + required: false, + placeholder: '', + selectOptions: [ + {code: 'normal', name: '正常'}, + {code: 'italic', name: 'italic斜体'}, + {code: 'oblique', name: 'oblique斜体'}, + ], + value: 'normal' + }, + { + type: 'el-select', + label: '坐标名字体', + name: 'nameFontFamilyX', + required: false, + placeholder: '', + selectOptions: [ + {code: 'sans-serif', name: 'sans-serif'}, + {code: 'serif', name: 'serif'}, + {code: 'Arial', name: 'Arial'}, + {code: 'Courier New', name: 'Courier New'}, + ], + value: 'sans-serif' + }, + { + type: 'el-switch', + label: '分割线显示', + name: 'isShowSplitLineX', + require: false, + placeholder: '', + value: false, + }, + { + type: 'vue-color', + label: '分割线颜色', + name: 'splitLineColorX', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-input-number', + label: '分割线宽度', + name: 'splitLineWidthX', + required: false, + placeholder: '', + value: 1, + }, ], }, { @@ -258,40 +494,52 @@ export const widgetHeatmap = { list: [ { type: 'el-switch', - label: '显示', + label: 'Y轴显示', name: 'isShowY', require: false, placeholder: '', value: true, }, { - type: 'el-input-text', - label: '坐标名', - name: 'textNameY', + type: 'el-switch', + label: '数值显示', + name: 'isShowAxisLabelY', require: false, placeholder: '', - value: '' + value: true, }, { - type: 'vue-color', - label: '坐标名颜色', - name: 'nameColorY', + type: 'el-input-text', + label: '最大值', + name: 'maxY', required: false, placeholder: '', - value: '#fff', + value: '', + }, + { + type: 'el-select', + label: '数值位置', + name: 'positionY', + required: false, + placeholder: '', + selectOptions: [ + {code: 'left', name: '左'}, + {code: 'right', name: '右'}, + ], + value: 'left' }, { type: 'el-input-number', - label: '坐标名字号', - name: 'nameFontSizeY', + label: '数值距离', + name: 'offsetY', required: false, placeholder: '', - value: 14, + value: 0 }, { type: 'vue-color', label: '数值颜色', - name: 'colorY', + name: 'textColorY', required: false, placeholder: '', value: '#fff', @@ -299,11 +547,60 @@ export const widgetHeatmap = { { type: 'el-input-number', label: '数值字号', - name: 'fontSizeY', + name: 'textFontSizeY', required: false, placeholder: '', value: 14, }, + { + type: 'el-select', + label: '数值粗细', + name: 'textFontWeightY', + required: false, + placeholder: '', + selectOptions: [ + {code: 'normal', name: '正常'}, + {code: 'bold', name: '粗体'}, + {code: 'bolder', name: '特粗体'}, + {code: 'lighter', name: '细体'} + ], + value: 'normal' + }, + { + type: 'el-select', + label: '数值风格', + name: 'textFontStyleY', + required: false, + placeholder: '', + selectOptions: [ + {code: 'normal', name: '正常'}, + {code: 'italic', name: 'italic斜体'}, + {code: 'oblique', name: 'oblique斜体'}, + ], + value: 'normal' + }, + { + type: 'el-select', + label: '数值字体', + name: 'textFontFamilyY', + required: false, + placeholder: '', + selectOptions: [ + {code: 'sans-serif', name: 'sans-serif'}, + {code: 'serif', name: 'serif'}, + {code: 'Arial', name: 'Arial'}, + {code: 'Courier New', name: 'Courier New'}, + ], + value: 'sans-serif' + }, + /* { + type: 'el-input-number', + label: '数值间隔', + name: 'textIntervalY', + required: false, + placeholder: '', + value: 0 + },*/ { type: 'el-switch', label: '缩放', @@ -321,13 +618,21 @@ export const widgetHeatmap = { value: '' }, { - type: 'el-slider', + type: 'el-input-number', label: '数值角度', name: 'textAngleY', required: false, placeholder: '', value: 0 }, + { + type: 'el-switch', + label: '坐标轴显示', + name: 'isShowAxisLineY', + require: false, + placeholder: '', + value: true, + }, { type: 'el-switch', label: '坐标轴反转', @@ -352,6 +657,243 @@ export const widgetHeatmap = { placeholder: '', value: 1, }, + { + type: 'el-input-text', + label: '坐标名', + name: 'textNameY', + require: false, + placeholder: '', + value: '' + }, + { + type: 'el-select', + label: '坐标名位置', + name: 'nameLocationY', + required: false, + placeholder: '', + selectOptions: [ + {code: 'start', name: '起点'}, + {code: 'center', name: '中间'}, + {code: 'end', name: '终点'}, + ], + value: 'end' + }, + { + type: 'vue-color', + label: '坐标名颜色', + name: 'nameColorY', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-input-number', + label: '坐标名字号', + name: 'nameFontSizeY', + required: false, + placeholder: '', + value: 14, + }, + { + type: 'el-select', + label: '坐标名粗细', + name: 'nameFontWeightY', + required: false, + placeholder: '', + selectOptions: [ + {code: 'normal', name: '正常'}, + {code: 'bold', name: '粗体'}, + {code: 'bolder', name: '特粗体'}, + {code: 'lighter', name: '细体'} + ], + value: 'normal' + }, + { + type: 'el-select', + label: '坐标名风格', + name: 'nameFontStyleY', + required: false, + placeholder: '', + selectOptions: [ + {code: 'normal', name: '正常'}, + {code: 'italic', name: 'italic斜体'}, + {code: 'oblique', name: 'oblique斜体'}, + ], + value: 'normal' + }, + { + type: 'el-select', + label: '坐标名字体', + name: 'nameFontFamilyY', + required: false, + placeholder: '', + selectOptions: [ + {code: 'sans-serif', name: 'sans-serif'}, + {code: 'serif', name: 'serif'}, + {code: 'Arial', name: 'Arial'}, + {code: 'Courier New', name: 'Courier New'}, + ], + value: 'sans-serif' + }, + { + type: 'el-switch', + label: '分割线显示', + name: 'isShowSplitLineY', + require: false, + placeholder: '', + value: false, + }, + { + type: 'vue-color', + label: '分割线颜色', + name: 'splitLineColorY', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-input-number', + label: '分割线宽度', + name: 'splitLineWidthY', + required: false, + placeholder: '', + value: 1, + }, + ], + }, + { + name: '图例操作', + list: [ + { + type: 'el-switch', + label: '图例显示', + name: 'isShowLegend', + required: false, + placeholder: '', + value: true, + }, + { + type: 'el-select', + label: '图例类型', + name: 'visualMapType', + required: false, + placeholder: '', + selectOptions: [ + {code: 'continuous', name: '连续型'}, + {code: 'piecewise', name: '分段型'}, + ], + value: 'continuous' + }, + { + type: 'vue-color', + label: '字体颜色', + name: 'legendColor', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-input-number', + label: '字体字号', + name: 'legendFontSize', + required: false, + placeholder: '', + value: 12, + }, + { + type: 'el-select', + label: '字体粗细', + name: 'legendFontWeight', + required: false, + placeholder: '', + selectOptions: [ + {code: 'normal', name: '正常'}, + {code: 'bold', name: '粗体'}, + {code: 'bolder', name: '特粗体'}, + {code: 'lighter', name: '细体'} + ], + value: 'normal' + }, + { + type: 'el-select', + label: '字体风格', + name: 'legendFontStyle', + required: false, + placeholder: '', + selectOptions: [ + {code: 'normal', name: '正常'}, + {code: 'italic', name: 'italic斜体'}, + {code: 'oblique', name: 'oblique斜体'}, + ], + value: 'normal' + }, + { + type: 'el-select', + label: '字体系列', + name: 'legendFontFamily', + required: false, + placeholder: '', + selectOptions: [ + {code: 'sans-serif', name: 'sans-serif'}, + {code: 'serif', name: 'serif'}, + {code: 'Arial', name: 'Arial'}, + {code: 'Courier New', name: 'Courier New'}, + ], + value: 'sans-serif' + }, + { + type: 'el-input-number', + label: '图例宽度', + name: 'legendWidth', + required: false, + placeholder: '', + value: 12, + }, + { + type: 'el-input-number', + label: '图例高度', + name: 'legendHeight', + required: false, + placeholder: '', + value: 120, + }, + { + type: 'el-select', + label: '横向位置', + name: 'lateralPosition', + required: false, + placeholder: '', + selectOptions: [ + {code: 'center', name: '居中'}, + {code: 'left', name: '左对齐'}, + {code: 'right', name: '右对齐'}, + ], + value: 'center' + }, + { + type: 'el-select', + label: '纵向位置', + name: 'longitudinalPosition', + required: false, + placeholder: '', + selectOptions: [ + {code: 'top', name: '顶部'}, + {code: 'bottom', name: '底部'}, + ], + value: 'top' + }, + { + type: 'el-select', + label: '布局前置', + name: 'layoutFront', + required: false, + placeholder: '', + selectOptions: [ + {code: 'vertical', name: '竖排'}, + {code: 'horizontal', name: '横排'}, + ], + value: 'horizontal' + }, ], }, { @@ -365,21 +907,44 @@ export const widgetHeatmap = { placeholder: '', value: true }, + { + type: 'el-select', + label: '位置', + name: 'fontPosition', + required: false, + placeholder: '', + selectOptions: [ + {code: 'inside', name: '里'}, + {code: 'insideTop', name: '里顶'}, + {code: 'insideLeft', name: '里左'}, + {code: 'insideRight', name: '里右'}, + {code: 'insideBottom', name: '里底'}, + ], + value: 'inside' + }, + { + type: 'el-input-number', + label: '距离', + name: 'fontDistance', + required: false, + placeholder: '', + value: 0 + }, + { + type: 'vue-color', + label: '字体颜色', + name: 'fontColor', + required: false, + placeholder: '', + value: '' + }, { type: 'el-input-number', label: '字体字号', name: 'fontSize', required: false, placeholder: '', - value: 14 - }, - { - type: 'vue-color', - label: '字体颜色', - name: 'dataColor', - required: false, - placeholder: '', - value: '#fff' + value: 12 }, { type: 'el-select', @@ -388,22 +953,57 @@ export const widgetHeatmap = { required: false, placeholder: '', selectOptions: [ - { code: 'normal', name: '正常' }, - { code: 'bold', name: '粗体' }, - { code: 'bolder', name: '特粗体' }, - { code: 'lighter', name: '细体' } + {code: 'normal', name: '正常'}, + {code: 'bold', name: '粗体'}, + {code: 'bolder', name: '特粗体'}, + {code: 'lighter', name: '细体'} ], value: 'normal' }, + { + type: 'el-select', + label: '数值风格', + name: 'fontStyle', + required: false, + placeholder: '', + selectOptions: [ + {code: 'normal', name: '正常'}, + {code: 'italic', name: 'italic斜体'}, + {code: 'oblique', name: 'oblique斜体'}, + ], + value: 'normal' + }, + { + type: 'el-select', + label: '数值字体', + name: 'fontFamily', + required: false, + placeholder: '', + selectOptions: [ + {code: 'sans-serif', name: 'sans-serif'}, + {code: 'serif', name: 'serif'}, + {code: 'Arial', name: 'Arial'}, + {code: 'Courier New', name: 'Courier New'}, + ], + value: 'sans-serif' + }, ], }, { name: '提示语设置', list: [ + { + type: 'el-switch', + label: '显示', + name: 'isShowTooltip', + required: false, + placeholder: '', + value: true + }, { type: 'el-input-number', label: '字体字号', - name: 'tipsFontSize', + name: 'tooltipFontSize', required: false, placeholder: '', value: 16 @@ -411,11 +1011,52 @@ export const widgetHeatmap = { { type: 'vue-color', label: '字体颜色', - name: 'tipsColor', + name: 'tooltipColor', required: false, placeholder: '', value: '#00FEFF' }, + { + type: 'el-select', + label: '字体粗细', + name: 'tooltipFontWeight', + required: false, + placeholder: '', + selectOptions: [ + {code: 'normal', name: '正常'}, + {code: 'bold', name: '粗体'}, + {code: 'bolder', name: '特粗体'}, + {code: 'lighter', name: '细体'} + ], + value: 'normal' + }, + { + type: 'el-select', + label: '字体风格', + name: 'tooltipFontStyle', + required: false, + placeholder: '', + selectOptions: [ + {code: 'normal', name: '正常'}, + {code: 'italic', name: 'italic斜体'}, + {code: 'oblique', name: 'oblique斜体'}, + ], + value: 'normal' + }, + { + type: 'el-select', + label: '字体系列', + name: 'tooltipFontFamily', + required: false, + placeholder: '', + selectOptions: [ + {code: 'sans-serif', name: 'sans-serif'}, + {code: 'serif', name: 'serif'}, + {code: 'Arial', name: 'Arial'}, + {code: 'Courier New', name: 'Courier New'}, + ], + value: 'sans-serif' + }, ], }, { @@ -441,7 +1082,7 @@ export const widgetHeatmap = { name: 'marginRight', required: false, placeholder: '', - value: 40, + value: 50, }, { type: 'el-slider', label: '底边距(像素)', @@ -452,96 +1093,6 @@ export const widgetHeatmap = { }, ], }, - { - name: '图设置', - list: [ - { - type: 'el-switch', - label: '图例', - name: 'isShowLegend', - required: false, - placeholder: '', - value: false, - }, - { - type: 'el-input-number', - label: '最小值', - name: 'dataMin', - required: false, - placeholder: '', - value: 0, - }, - { - type: 'el-input-number', - label: '最大值', - name: 'dataMax', - required: false, - placeholder: '', - value: 5000, - }, - { - type: 'vue-color', - label: '数值颜色', - name: 'legendColor', - required: false, - placeholder: '', - value: '#fff', - }, - { - type: 'el-input-number', - label: '图例大小', - name: 'legendFontSize', - required: false, - placeholder: '', - value: 12, - }, - { - type: 'el-input-number', - label: '图例宽度', - name: 'legendWidth', - required: false, - placeholder: '', - value: 12, - }, - { - type: 'el-select', - label: '横向位置', - name: 'lateralPosition', - required: false, - placeholder: '', - selectOptions: [ - { code: 'center', name: '居中' }, - { code: 'left', name: '左对齐' }, - { code: 'right', name: '右对齐' }, - ], - value: 'center' - }, - { - type: 'el-select', - label: '纵向位置', - name: 'longitudinalPosition', - required: false, - placeholder: '', - selectOptions: [ - { code: 'top', name: '顶部' }, - { code: 'bottom', name: '底部' }, - ], - value: 'top' - }, - { - type: 'el-select', - label: '布局前置', - name: 'layoutFront', - required: false, - placeholder: '', - selectOptions: [ - { code: 'vertical', name: '竖排' }, - { code: 'horizontal', name: '横排' }, - ], - value: 'horizontal' - }, - ], - }, { name: '自定义配色', list: [ diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/wordcloudCharts/widget-word-cloud.js b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/wordcloudCharts/widget-word-cloud.js index 542a77be..bf8e5998 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/wordcloudCharts/widget-word-cloud.js +++ b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/wordcloudCharts/widget-word-cloud.js @@ -30,7 +30,7 @@ export const widgetWordCloud = { { type: 'el-switch', label: '标题显示', - name: 'isNoTitle', + name: 'isShowTitle', required: false, placeholder: '', value: true, @@ -38,7 +38,7 @@ export const widgetWordCloud = { { type: 'el-input-text', label: '标题名', - name: 'titleText', + name: 'text', required: false, placeholder: '', value: '', @@ -66,10 +66,10 @@ export const widgetWordCloud = { required: false, placeholder: '', selectOptions: [ - { code: 'normal', name: '正常' }, - { code: 'bold', name: '粗体' }, - { code: 'bolder', name: '特粗体' }, - { code: 'lighter', name: '细体' } + {code: 'normal', name: '正常'}, + {code: 'bold', name: '粗体'}, + {code: 'bolder', name: '特粗体'}, + {code: 'lighter', name: '细体'} ], value: 'normal' }, @@ -80,29 +80,30 @@ export const widgetWordCloud = { required: false, placeholder: '', selectOptions: [ - { code: 'normal', name: '正常' }, - { code: 'italic', name: 'italic斜体' }, - { code: 'oblique', name: 'oblique斜体' }, + {code: 'normal', name: '正常'}, + {code: 'italic', name: 'italic斜体'}, + {code: 'oblique', name: 'oblique斜体'}, ], value: 'normal' }, { type: 'el-select', - label: '字体位置', - name: 'textAlign', + label: '字体系列', + name: 'textFontFamily', required: false, placeholder: '', selectOptions: [ - { code: 'center', name: '居中' }, - { code: 'left', name: '左对齐' }, - { code: 'right', name: '右对齐' }, + {code: 'sans-serif', name: 'sans-serif'}, + {code: 'serif', name: 'serif'}, + {code: 'Arial', name: 'Arial'}, + {code: 'Courier New', name: 'Courier New'}, ], - value: 'center' + value: 'sans-serif' }, { type: 'el-input-text', label: '副标题名', - name: 'subText', + name: 'subtext', required: false, placeholder: '', value: '' @@ -110,7 +111,7 @@ export const widgetWordCloud = { { type: 'vue-color', label: '字体颜色', - name: 'subTextColor', + name: 'subtextColor', required: false, placeholder: '', value: 'rgba(30, 144, 255, 1)' @@ -118,7 +119,7 @@ export const widgetWordCloud = { { type: 'el-input-number', label: '字体字号', - name: 'subTextFontSize', + name: 'subtextFontSize', required: false, placeholder: '', value: 20 @@ -126,30 +127,73 @@ export const widgetWordCloud = { { type: 'el-select', label: '字体粗细', - name: 'subTextFontWeight', + name: 'subtextFontWeight', required: false, placeholder: '', selectOptions: [ - { code: 'normal', name: '正常' }, - { code: 'bold', name: '粗体' }, - { code: 'bolder', name: '特粗体' }, - { code: 'lighter', name: '细体' } + {code: 'normal', name: '正常'}, + {code: 'bold', name: '粗体'}, + {code: 'bolder', name: '特粗体'}, + {code: 'lighter', name: '细体'} ], value: 'normal' }, { type: 'el-select', label: '字体风格', - name: 'subTextFontStyle', + name: 'subtextFontStyle', required: false, placeholder: '', selectOptions: [ - { code: 'normal', name: '正常' }, - { code: 'italic', name: 'italic斜体' }, - { code: 'oblique', name: 'oblique斜体' }, + {code: 'normal', name: '正常'}, + {code: 'italic', name: 'italic斜体'}, + {code: 'oblique', name: 'oblique斜体'}, ], value: 'normal' }, + { + type: 'el-select', + label: '字体系列', + name: 'subtextFontFamily', + required: false, + placeholder: '', + selectOptions: [ + {code: 'sans-serif', name: 'sans-serif'}, + {code: 'serif', name: 'serif'}, + {code: 'Arial', name: 'Arial'}, + {code: 'Courier New', name: 'Courier New'}, + ], + value: 'sans-serif' + }, + { + type: 'el-select', + label: '左右位置', + name: 'titleLeft', + required: false, + placeholder: '', + selectOptions: [ + {code: 'center', name: '居中'}, + {code: 'left', name: '左对齐'}, + {code: 'right', name: '右对齐'}, + ], + value: 'center' + }, + { + type: 'el-slider', + label: '上下间距', + name: 'titleTop', + required: false, + placeholder: '', + value: 5, + }, + { + type: 'el-input-number', + label: '主副标题间距', + name: 'titleItemGap', + required: false, + placeholder: '', + value: 0 + }, ], }, { @@ -197,10 +241,18 @@ export const widgetWordCloud = { { name: '提示语设置', list: [ + { + type: 'el-switch', + label: '显示', + name: 'isShowTooltip', + required: false, + placeholder: '', + value: true + }, { type: 'el-input-number', label: '字体字号', - name: 'tipsFontSize', + name: 'tooltipFontSize', required: false, placeholder: '', value: 16 @@ -208,11 +260,52 @@ export const widgetWordCloud = { { type: 'vue-color', label: '字体颜色', - name: 'tipsColor', + name: 'tooltipColor', required: false, placeholder: '', value: '#00FEFF' }, + { + type: 'el-select', + label: '字体粗细', + name: 'tooltipFontWeight', + required: false, + placeholder: '', + selectOptions: [ + {code: 'normal', name: '正常'}, + {code: 'bold', name: '粗体'}, + {code: 'bolder', name: '特粗体'}, + {code: 'lighter', name: '细体'} + ], + value: 'normal' + }, + { + type: 'el-select', + label: '字体风格', + name: 'tooltipFontStyle', + required: false, + placeholder: '', + selectOptions: [ + {code: 'normal', name: '正常'}, + {code: 'italic', name: 'italic斜体'}, + {code: 'oblique', name: 'oblique斜体'}, + ], + value: 'normal' + }, + { + type: 'el-select', + label: '字体系列', + name: 'tooltipFontFamily', + required: false, + placeholder: '', + selectOptions: [ + {code: 'sans-serif', name: 'sans-serif'}, + {code: 'serif', name: 'serif'}, + {code: 'Arial', name: 'Arial'}, + {code: 'Courier New', name: 'Courier New'}, + ], + value: 'sans-serif' + }, ], }, ], diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/heatmap/widgetHeatmap.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/heatmap/widgetHeatmap.vue index 19463043..1f36ba85 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/widget/heatmap/widgetHeatmap.vue +++ b/report-ui/src/views/bigscreenDesigner/designer/widget/heatmap/widgetHeatmap.vue @@ -1,6 +1,6 @@ @@ -152,27 +152,33 @@ export default { this.setOptionsSeries(); this.setOptionsMargin(); this.setOptionsVisualMap(); + this.setOptionsTooltip(); this.setOptionsData(); }, // 标题修改 setOptionsTitle() { const optionsSetup = this.optionsSetup; - const title = {}; - title.text = optionsSetup.titleText; - title.show = optionsSetup.isNoTitle; - title.left = optionsSetup.textAlign; - title.textStyle = { - color: optionsSetup.textColor, - fontSize: optionsSetup.textFontSize, - fontWeight: optionsSetup.textFontWeight, - fontStyle: optionsSetup.textFontStyle, - }; - title.subtext = optionsSetup.subText; - title.subtextStyle = { - color: optionsSetup.subTextColor, - fontWeight: optionsSetup.subTextFontWeight, - fontSize: optionsSetup.subTextFontSize, - fontStyle: optionsSetup.subTextFontStyle, + const title = { + text: optionsSetup.text, + show: optionsSetup.isShowTitle, + left: optionsSetup.titleLeft, + top: optionsSetup.titleTop + "%", + itemGap: optionsSetup.titleItemGap, + textStyle: { + color: optionsSetup.textColor, + fontSize: optionsSetup.textFontSize, + fontWeight: optionsSetup.textFontWeight, + fontStyle: optionsSetup.textFontStyle, + fontFamily: optionsSetup.textFontFamily, + }, + subtext: optionsSetup.subtext, + subtextStyle: { + color: optionsSetup.subtextColor, + fontWeight: optionsSetup.subtextFontWeight, + fontSize: optionsSetup.subtextFontSize, + fontStyle: optionsSetup.subtextFontStyle, + fontFamily: optionsSetup.subtextFontFamily + }, }; this.options.title = title; }, @@ -182,34 +188,59 @@ export default { const xAxis = { type: "category", // 坐标轴是否显示 - show: optionsSetup.hideX, + show: optionsSetup.isShowX, + position: optionsSetup.positionX, + offset: optionsSetup.offsetX, // 坐标轴名称 name: optionsSetup.nameX, + nameLocation: optionsSetup.nameLocationX, nameTextStyle: { color: optionsSetup.nameColorX, fontSize: optionsSetup.nameFontSizeX, + fontWeight: optionsSetup.nameFontWeightX, + fontStyle: optionsSetup.nameFontStyleX, + fontFamily: optionsSetup.nameFontFamilyX, }, // 轴反转 inverse: optionsSetup.reversalX, axisLabel: { - show: true, - // 文字间隔 - interval: optionsSetup.textInterval, + show: optionsSetup.isShowAxisLabelX, + interval: optionsSetup.textIntervalX, // 文字角度 rotate: optionsSetup.textAngleX, textStyle: { // 坐标文字颜色 - color: optionsSetup.colorX, - fontSize: optionsSetup.fontSizeX, + color: optionsSetup.textColorX, + fontSize: optionsSetup.textFontSizeX, + fontWeight: optionsSetup.textFontWeightX, + fontStyle: optionsSetup.textFontStyleX, + fontFamily: optionsSetup.textFontFamilyX, }, }, + // X轴线 axisLine: { - show: true, + show: optionsSetup.isShowAxisLineX, lineStyle: { color: optionsSetup.lineColorX, width: optionsSetup.lineWidthX, }, }, + // X轴刻度线 + axisTick: { + show: optionsSetup.isShowAxisLineX, + lineStyle: { + color: optionsSetup.lineColorX, + width: optionsSetup.lineWidthX, + }, + }, + // X轴分割线 + splitLine: { + show: optionsSetup.isShowSplitLineX, + lineStyle: { + color: optionsSetup.splitLineColorX, + width: optionsSetup.splitLineWidthX, + }, + }, }; this.options.xAxis = xAxis; }, @@ -217,52 +248,79 @@ export default { setOptionsY() { const optionsSetup = this.optionsSetup; const yAxis = { - type: "value", + max: optionsSetup.maxY !== "" ? optionsSetup.maxY : null, + type: "category", scale: optionsSetup.scale, // 均分 splitNumber: optionsSetup.splitNumberY, // 坐标轴是否显示 show: optionsSetup.isShowY, + position: optionsSetup.positionY, + offset: optionsSetup.offsetY, // 坐标轴名称 name: optionsSetup.textNameY, + nameLocation: optionsSetup.nameLocationY, nameTextStyle: { color: optionsSetup.nameColorY, fontSize: optionsSetup.nameFontSizeY, + fontWeight: optionsSetup.nameFontWeightY, + fontStyle: optionsSetup.nameFontStyleY, + fontFamily: optionsSetup.nameFontFamilyY, }, // 轴反转 inverse: optionsSetup.reversalY, axisLabel: { - show: true, + show: optionsSetup.isShowAxisLabelY, // 文字角度 rotate: optionsSetup.textAngleY, + //interval: optionsSetup.textIntervalY, textStyle: { // 坐标文字颜色 - color: optionsSetup.colorY, - fontSize: optionsSetup.fontSizeY, + color: optionsSetup.textColorY, + fontSize: optionsSetup.textFontSizeY, + fontWeight: optionsSetup.textFontWeightY, + fontStyle: optionsSetup.textFontStyleY, + fontFamily: optionsSetup.textFontFamilyY, }, }, axisLine: { - show: true, + show: optionsSetup.isShowAxisLineY, lineStyle: { color: optionsSetup.lineColorY, width: optionsSetup.lineWidthY, }, }, + axisTick: { + show: optionsSetup.isShowAxisLineY, + lineStyle: { + color: optionsSetup.lineColorY, + width: optionsSetup.lineWidthY, + }, + }, + splitLine: { + show: optionsSetup.isShowSplitLineY, + lineStyle: { + color: optionsSetup.splitLineColorY, + width: optionsSetup.splitLineWidthY, + }, + }, }; this.options.yAxis = yAxis; }, // 数值设定 setOptionsSeries() { const optionsSetup = this.optionsSetup; - const lable = { + const label = { show: optionsSetup.isShow, - textStyle: { - fontSize: optionsSetup.fontSize, - color: optionsSetup.dataColor, - fontWeight: optionsSetup.fontWeight, - }, + position: optionsSetup.fontPosition, + distance: optionsSetup.fontDistance, + fontSize: optionsSetup.fontSize, + color: optionsSetup.fontColor, + fontWeight: optionsSetup.fontWeight, + fontStyle: optionsSetup.fontStyle, + fontFamily: optionsSetup.fontFamily, }; - this.options.series[0].label = lable; + this.options.series[0].label = label; }, // 边距设置 setOptionsMargin() { @@ -282,33 +340,51 @@ export default { const tooltip = { trigger: "item", position: "top", - show: true, + show: optionsSetup.isShowTooltip, textStyle: { - color: optionsSetup.tipsColor, - fontSize: optionsSetup.tipsFontSize, + color: optionsSetup.tooltipColor, + fontSize: optionsSetup.tooltipFontSize, + fontWeight: optionsSetup.tooltipFontWeight, + fontStyle: optionsSetup.tooltipFontStyle, + fontFamily: optionsSetup.tooltipFontFamily, }, + formatter: function (params) { + if (params.value.length > 1) { + return '坐标：' + params.data[0] + ',' + params.data[1] + '
' + '数值：' + params.data[2]; + } + } }; this.options.tooltip = tooltip; }, // 图设置 setOptionsVisualMap() { const optionsSetup = this.optionsSetup; - const visualMap = this.options.visualMap; - visualMap.show = optionsSetup.isShowLegend; - visualMap.min = optionsSetup.dataMin; - visualMap.max = optionsSetup.dataMax; - visualMap.textStyle = { - fontSize: optionsSetup.legendFontSize, - color: optionsSetup.legendColor, + const visualMap = { + show: optionsSetup.isShowLegend, + type: optionsSetup.visualMapType, + min: optionsSetup.dataMin, + max: optionsSetup.dataMax, + calculable: true, + inRange: { + color: optionsSetup.legendColorList.map((x) => { + return x.color; + }), + }, + left: optionsSetup.lateralPosition, + top: optionsSetup.longitudinalPosition, + bottom: optionsSetup.longitudinalPosition, + orient: optionsSetup.layoutFront, + textStyle: { + color: optionsSetup.legendColor, + fontSize: optionsSetup.legendFontSize, + fontWeight: optionsSetup.legendFontWeight, + fontStyle: optionsSetup.legendFontStyle, + fontFamily: optionsSetup.legendFontFamily, + }, + itemHeight: optionsSetup.legendHeight, + itemWidth: optionsSetup.legendWidth, }; - visualMap.inRange.color = optionsSetup.legendColorList.map((x) => { - return x.color; - }); - visualMap.left = optionsSetup.lateralPosition; - visualMap.top = optionsSetup.longitudinalPosition; - visualMap.bottom = optionsSetup.longitudinalPosition; - visualMap.orient = optionsSetup.layoutFront; - visualMap.itemWidth = optionsSetup.legendWidth; + this.options.visualMap = visualMap; }, setOptionsData(e, paramsConfig) { const optionsData = this.optionsData; // 数据类型 静态 or 动态 diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/wordcloud/widgetWordCloud.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/wordcloud/widgetWordCloud.vue index d52f00d8..e6e26087 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/widget/wordcloud/widgetWordCloud.vue +++ b/report-ui/src/views/bigscreenDesigner/designer/widget/wordcloud/widgetWordCloud.vue @@ -105,22 +105,27 @@ export default { // 标题修改 setOptionsTitle() { const optionsSetup = this.optionsSetup; - const title = {}; - title.text = optionsSetup.titleText; - title.show = optionsSetup.isNoTitle; - title.left = optionsSetup.textAlign; - title.textStyle = { - color: optionsSetup.textColor, - fontSize: optionsSetup.textFontSize, - fontWeight: optionsSetup.textFontWeight, - fontStyle: optionsSetup.textFontStyle, - }; - title.subtext = optionsSetup.subText; - title.subtextStyle = { - color: optionsSetup.subTextColor, - fontWeight: optionsSetup.subTextFontWeight, - fontSize: optionsSetup.subTextFontSize, - fontStyle: optionsSetup.subTextFontStyle, + const title = { + text: optionsSetup.text, + show: optionsSetup.isShowTitle, + left: optionsSetup.titleLeft, + top: optionsSetup.titleTop + "%", + itemGap: optionsSetup.titleItemGap, + textStyle: { + color: optionsSetup.textColor, + fontSize: optionsSetup.textFontSize, + fontWeight: optionsSetup.textFontWeight, + fontStyle: optionsSetup.textFontStyle, + fontFamily: optionsSetup.textFontFamily, + }, + subtext: optionsSetup.subtext, + subtextStyle: { + color: optionsSetup.subtextColor, + fontWeight: optionsSetup.subtextFontWeight, + fontSize: optionsSetup.subtextFontSize, + fontStyle: optionsSetup.subtextFontStyle, + fontFamily: optionsSetup.subtextFontFamily + }, }; this.options.title = title; }, @@ -145,10 +150,13 @@ export default { const optionsSetup = this.optionsSetup; const tooltip = { trigger: "item", - show: true, + show: optionsSetup.isShowTooltip, textStyle: { - color: optionsSetup.tipsColor, - fontSize: optionsSetup.tipsFontSize, + color: optionsSetup.tooltipColor, + fontSize: optionsSetup.tooltipFontSize, + fontWeight: optionsSetup.tooltipFontWeight, + fontStyle: optionsSetup.tooltipFontStyle, + fontFamily: optionsSetup.tooltipFontFamily, }, }; this.options.tooltip = tooltip;