From 3a5137a569fab985b0ca796e35acd05ee7ee9dde Mon Sep 17 00:00:00 2001 From: qianming Date: Fri, 5 Nov 2021 16:18:08 +0800 Subject: [PATCH] =?UTF-8?q?=E9=9D=99=E6=80=81=E6=95=B0=E6=8D=AE=E8=B0=83?= =?UTF-8?q?=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../widget-gradient-barchart.js | 1156 +++++++++-------- .../bar/widgetGradientColorBarchart.vue | 27 +- 2 files changed, 597 insertions(+), 586 deletions(-) diff --git a/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/widget-gradient-barchart.js b/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/widget-gradient-barchart.js index 7d1c1d16..7a6c7696 100644 --- a/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/widget-gradient-barchart.js +++ b/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/widget-gradient-barchart.js @@ -6,601 +6,607 @@ * @LastEditors: qianlishi * @LastEditTime: 2021-09-28 14:14:08 */ -export const widgetGradientBarchart = { - code: 'widget-gradient-color-barchart', - type: 'chart', - label: '柱形图-渐变色', - icon: 'iconzhuzhuangtu', - options: { - // 配置 - setup: [ +export const widgetGradientBarchart = { + code: 'widget-gradient-color-barchart', + type: 'chart', + label: '柱形图-渐变色', + icon: 'iconzhuzhuangtu', + options: { + // 配置 + setup: [ + { + type: 'el-input-text', + label: '图层名称', + name: 'layerName', + required: false, + placeholder: '', + value: '柱形图-渐变色', + }, + { + type: 'el-switch', + label: '竖展示', + name: 'verticalShow', + required: false, + placeholder: '', + value: false, + }, + { + type: 'vue-color', + label: '背景颜色', + name: 'background', + required: false, + placeholder: '', + value: '' + }, + [ { - type: 'el-input-text', - label: '图层名称', - name: 'layerName', - required: false, - placeholder: '', - value: '柱形图-渐变色', - }, - { - type: 'el-switch', - label: '竖展示', - name: 'verticalShow', - required: false, - placeholder: '', - value: false, - }, - { - type: 'vue-color', - label: '背景颜色', - name: 'background', - required: false, - placeholder: '', - 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, - }, - ], - }, - { - 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: '#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' - }, - { - type: 'el-input-number', - label: '字体大小', - name: 'textFontSize', - required: false, - placeholder: '', - value: 22 - }, - { - type: 'el-select', - label: '字体位置', - name: 'textAlign', - required: false, - placeholder: '', - selectOptions: [ - {code: 'center', name: '居中'}, - {code: 'left', name: '左对齐'}, - {code: 'right', name: '右对齐'}, - ], - value: 'center' - }, - { - type: 'el-input-text', - label: '副标题', - name: 'subText', - required: false, - placeholder: '', - value: '' - }, - { - type: 'vue-color', - label: '字体颜色', - name: 'subTextColor', - required: false, - placeholder: '', - value: '#90979c' - }, - { - type: 'el-input-text', - label: '字体粗细', - name: 'subTextFontWeight', - required: false, - placeholder: '', - selectOptions: [ - {code: 'normal', name: '正常'}, - {code: 'bold', name: '粗体'}, - {code: 'bolder', name: '特粗体'}, - {code: 'lighter', name: '细体'} - ], - value: 'normal' - }, - { - type: 'el-input-number', - label: '字体大小', - name: 'subTextFontSize', - required: false, - placeholder: '', - value: 20 - }, - ], - }, - { - name: 'X轴设置', - list: [ - { - type: 'el-switch', - label: '显示', - name: 'hideX', - required: false, - placeholder: '', - value: true, - }, - { - type: 'el-input-text', - label: '坐标名', - name: 'xName', - required: false, - placeholder: '', - value: '' - }, - { - type: 'vue-color', - label: '坐标名颜色', - name: 'nameColorX', - required: false, - placeholder: '', - value: '#fff', - }, - { - type: 'el-input-number', - label: '坐标字号', - name: 'nameFontSizeX', - required: false, - placeholder: '', - value: 14, - }, - { - type: 'vue-color', - label: '数值颜色', - name: 'Xcolor', - required: false, - placeholder: '', - value: '#fff', - }, - { - type: 'el-input-number', - label: '数值字号', - name: 'fontSizeX', - required: false, - placeholder: '', - value: 14, - }, - { - type: 'el-slider', - label: '数值角度', - name: 'textAngle', - required: false, - placeholder: '', - value: 0 - }, - { - type: 'el-input-number', - label: '数值间隔', - name: 'textInterval', - required: false, - placeholder: '', - value: '' - }, - { - type: 'el-switch', - label: '轴反转', - name: 'reversalX', - required: false, - placeholder: '', - value: false - }, - { - type: 'vue-color', - label: '轴颜色', - name: 'lineColorX', - required: false, - placeholder: '', - value: '#fff', - }, - { - type: 'el-switch', - label: '分割线显示', - name: 'isShowSplitLineX', - require: false, - placeholder: '', - value: false, - }, - { - type: 'vue-color', - label: '分割线颜色', - name: 'splitLineColorX', - required: false, - placeholder: '', - value: '#fff', - } - ], - }, - { - name: 'Y轴设置', - list: [ - { - type: 'el-switch', - label: '显示', - name: 'isShowY', - require: false, - placeholder: '', - value: true, - }, - { - type: 'el-input-text', - label: '坐标名', - name: 'textNameY', - require: false, - placeholder: '', - value: '' - },{ - type: 'vue-color', - label: '坐标名颜色', - name: 'nameColorY', - required: false, - placeholder: '', - value: '#fff', - }, - { - type: 'el-input-number', - label: '坐标字号', - name: 'namefontSizeY', - required: false, - placeholder: '', - value: 14, - }, - { - type: 'vue-color', - label: '数值颜色', - name: 'colorY', - required: false, - placeholder: '', - value: '#fff', - }, - { - type: 'el-input-number', - label: '数值字号', - name: 'fontSizeY', - required: false, - placeholder: '', - value: 14, - }, - { - type: 'el-slider', - label: '数值角度', - name: 'ytextAngle', - required: false, - placeholder: '', - value: 0 - }, - { - type: 'el-switch', - label: '缩放', - name: 'scale', - require: false, - placeholder: '', - value: false, - }, - { - type: 'el-input-number', - label: '均分', - name: 'splitNumber', - required: false, - placeholder: '', - value: '' - }, - { - type: 'el-switch', - label: '轴反转', - name: 'reversalY', - required: false, - placeholder: '', - value: false - }, - { - type: 'vue-color', - label: '轴颜色', - name: 'lineColorY', - required: false, - placeholder: '', - value: '#fff', - }, - { - type: 'el-switch', - label: '分割线显示', - name: 'isShowSplitLineY', - require: false, - placeholder: '', - value: false, - }, - { - type: 'vue-color', - label: '分割线颜色', - name: 'splitLineColorY', - required: false, - placeholder: '', - value: '#fff', - } - ], - }, - { - name: '数值设定', - list: [ - { - type: 'el-switch', - label: '显示', - name: 'isShow', - required: false, - placeholder: '', - value: true - }, - { - type: 'el-input-number', - label: '距离', - name: 'distance', - required: false, - placeholder: '', - value: 5 - }, - { - 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: [ - { - type: 'el-input-number', - label: '字体大小', - name: 'tipsFontSize', - required: false, - placeholder: '', - value: 16 - }, - { - type: 'vue-color', - label: '字体颜色', - name: 'lineColor', - required: false, - placeholder: '#ff7f50', - }, - ], - }, - { - name: '坐标轴边距设置', - list: [ - { - type: 'el-slider', - label: '左边距(像素)', - name: 'marginLeft', - required: false, - placeholder: '', - value: 10, - }, { - type: 'el-slider', - label: '顶边距(像素)', - name: 'marginTop', - required: false, - placeholder: '', - value: 50, - }, { - type: 'el-slider', - label: '右边距(像素)', - name: 'marginRight', - required: false, - placeholder: '', - value: 40, - }, { - type: 'el-slider', - label: '底边距(像素)', - name: 'marginBottom', - required: false, - placeholder: '', - value: 10, - }, - ], - }, - { - name: '渐变色', - list: [ - { - type: 'vue-color', - label: '0%处', - name: 'bar0color', - required: false, - placeholder: '', - value: 'rgba(0,244,255,1)' - }, - { - type: 'vue-color', - label: '100%处', - name: 'bar100color', - required: false, - placeholder: '', - value: 'rgba(0,77,167,1)' - }, - { - type: 'vue-color', - label: '阴影颜色', - name: 'shadowColor', - required: false, - placeholder: '', - value: 'rgba(0,160,221,1)' - }, - { - type: 'el-input-number', - label: '模糊系数', - name: 'shadowBlur', - required: false, - placeholder: '', - value: 4, - }, - ], - }, - ], - ], - // 数据 - data: [ - { - type: 'el-radio-group', - label: '数据类型', - name: 'dataType', - require: false, - placeholder: '', - selectValue: true, - selectOptions: [ + name: '柱体设置', + list: [ { - code: 'staticData', - name: '静态数据', + type: 'el-slider', + label: '最大宽度', + name: 'maxWidth', + required: false, + placeholder: '', + value: 10, }, { - code: 'dynamicData', - name: '动态数据', + type: 'el-slider', + label: '圆角', + name: 'radius', + require: false, + placeholder: '', + value: 5, }, ], - value: 'staticData', }, { - type: 'el-input-number', - label: '刷新时间(毫秒)', - name: 'refreshTime', - relactiveDom: 'dataType', - relactiveDomValue: 'dynamicData', - value: 5000 + 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: '#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' + }, + { + type: 'el-input-number', + label: '字体大小', + name: 'textFontSize', + required: false, + placeholder: '', + value: 22 + }, + { + type: 'el-select', + label: '字体位置', + name: 'textAlign', + required: false, + placeholder: '', + selectOptions: [ + {code: 'center', name: '居中'}, + {code: 'left', name: '左对齐'}, + {code: 'right', name: '右对齐'}, + ], + value: 'center' + }, + { + type: 'el-input-text', + label: '副标题', + name: 'subText', + required: false, + placeholder: '', + value: '' + }, + { + type: 'vue-color', + label: '字体颜色', + name: 'subTextColor', + required: false, + placeholder: '', + value: '#90979c' + }, + { + type: 'el-input-text', + label: '字体粗细', + name: 'subTextFontWeight', + required: false, + placeholder: '', + selectOptions: [ + {code: 'normal', name: '正常'}, + {code: 'bold', name: '粗体'}, + {code: 'bolder', name: '特粗体'}, + {code: 'lighter', name: '细体'} + ], + value: 'normal' + }, + { + type: 'el-input-number', + label: '字体大小', + name: 'subTextFontSize', + required: false, + placeholder: '', + value: 20 + }, + ], }, { - type: 'el-button', - label: '静态数据', - name: 'staticData', - required: false, - placeholder: '', - relactiveDom: 'dataType', - relactiveDomValue: 'staticData', - value: {"categories": ["苹果","三星","小米","oppo","vivo"],"series": [{"name": "手机品牌","data": [1000,2229,3879,2379,4079]}]}, + name: 'X轴设置', + list: [ + { + type: 'el-switch', + label: '显示', + name: 'hideX', + required: false, + placeholder: '', + value: true, + }, + { + type: 'el-input-text', + label: '坐标名', + name: 'xName', + required: false, + placeholder: '', + value: '' + }, + { + type: 'vue-color', + label: '坐标名颜色', + name: 'nameColorX', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-input-number', + label: '坐标字号', + name: 'nameFontSizeX', + required: false, + placeholder: '', + value: 14, + }, + { + type: 'vue-color', + label: '数值颜色', + name: 'Xcolor', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-input-number', + label: '数值字号', + name: 'fontSizeX', + required: false, + placeholder: '', + value: 14, + }, + { + type: 'el-slider', + label: '数值角度', + name: 'textAngle', + required: false, + placeholder: '', + value: 0 + }, + { + type: 'el-input-number', + label: '数值间隔', + name: 'textInterval', + required: false, + placeholder: '', + value: '' + }, + { + type: 'el-switch', + label: '轴反转', + name: 'reversalX', + required: false, + placeholder: '', + value: false + }, + { + type: 'vue-color', + label: '轴颜色', + name: 'lineColorX', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-switch', + label: '分割线显示', + name: 'isShowSplitLineX', + require: false, + placeholder: '', + value: false, + }, + { + type: 'vue-color', + label: '分割线颜色', + name: 'splitLineColorX', + required: false, + placeholder: '', + value: '#fff', + } + ], }, { - type: 'dycustComponents', - label: '', - name: 'dynamicData', - required: false, - placeholder: '', - relactiveDom: 'dataType', - relactiveDomValue: 'dynamicData', - chartType: 'widget-barchart', - dictKey: 'BAR_PROPERTIES', - value: '', + name: 'Y轴设置', + list: [ + { + type: 'el-switch', + label: '显示', + name: 'isShowY', + require: false, + placeholder: '', + value: true, + }, + { + type: 'el-input-text', + label: '坐标名', + name: 'textNameY', + require: false, + placeholder: '', + value: '' + }, { + type: 'vue-color', + label: '坐标名颜色', + name: 'nameColorY', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-input-number', + label: '坐标字号', + name: 'namefontSizeY', + required: false, + placeholder: '', + value: 14, + }, + { + type: 'vue-color', + label: '数值颜色', + name: 'colorY', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-input-number', + label: '数值字号', + name: 'fontSizeY', + required: false, + placeholder: '', + value: 14, + }, + { + type: 'el-slider', + label: '数值角度', + name: 'ytextAngle', + required: false, + placeholder: '', + value: 0 + }, + { + type: 'el-switch', + label: '缩放', + name: 'scale', + require: false, + placeholder: '', + value: false, + }, + { + type: 'el-input-number', + label: '均分', + name: 'splitNumber', + required: false, + placeholder: '', + value: '' + }, + { + type: 'el-switch', + label: '轴反转', + name: 'reversalY', + required: false, + placeholder: '', + value: false + }, + { + type: 'vue-color', + label: '轴颜色', + name: 'lineColorY', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-switch', + label: '分割线显示', + name: 'isShowSplitLineY', + require: false, + placeholder: '', + value: false, + }, + { + type: 'vue-color', + label: '分割线颜色', + name: 'splitLineColorY', + required: false, + placeholder: '', + value: '#fff', + } + ], }, - ], - // 坐标 - position: [ { - type: 'el-input-number', - label: '左边距', - name: 'left', - required: false, - placeholder: '', - value: 0, + name: '数值设定', + list: [ + { + type: 'el-switch', + label: '显示', + name: 'isShow', + required: false, + placeholder: '', + value: true + }, + { + type: 'el-input-number', + label: '距离', + name: 'distance', + required: false, + placeholder: '', + value: 5 + }, + { + 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' + }, + ], }, { - type: 'el-input-number', - label: '上边距', - name: 'top', - required: false, - placeholder: '', - value: 0, + name: '提示语设置', + list: [ + { + type: 'el-input-number', + label: '字体大小', + name: 'tipsFontSize', + required: false, + placeholder: '', + value: 16 + }, + { + type: 'vue-color', + label: '字体颜色', + name: 'lineColor', + required: false, + placeholder: '#ff7f50', + }, + ], }, { - type: 'el-input-number', - label: '宽度', - name: 'width', - required: false, - placeholder: '该容器在1920px大屏中的宽度', - value: 400, + name: '坐标轴边距设置', + list: [ + { + type: 'el-slider', + label: '左边距(像素)', + name: 'marginLeft', + required: false, + placeholder: '', + value: 10, + }, { + type: 'el-slider', + label: '顶边距(像素)', + name: 'marginTop', + required: false, + placeholder: '', + value: 50, + }, { + type: 'el-slider', + label: '右边距(像素)', + name: 'marginRight', + required: false, + placeholder: '', + value: 40, + }, { + type: 'el-slider', + label: '底边距(像素)', + name: 'marginBottom', + required: false, + placeholder: '', + value: 10, + }, + ], }, { - type: 'el-input-number', - label: '高度', - name: 'height', - required: false, - placeholder: '该容器在1080px大屏中的高度', - value: 200, + name: '渐变色', + list: [ + { + type: 'vue-color', + label: '0%处', + name: 'bar0color', + required: false, + placeholder: '', + value: 'rgba(0,244,255,1)' + }, + { + type: 'vue-color', + label: '100%处', + name: 'bar100color', + required: false, + placeholder: '', + value: 'rgba(0,77,167,1)' + }, + { + type: 'vue-color', + label: '阴影颜色', + name: 'shadowColor', + required: false, + placeholder: '', + value: 'rgba(0,160,221,1)' + }, + { + type: 'el-input-number', + label: '模糊系数', + name: 'shadowBlur', + required: false, + placeholder: '', + value: 4, + }, + ], }, ], - } + ], + // 数据 + data: [ + { + type: 'el-radio-group', + label: '数据类型', + name: 'dataType', + require: false, + placeholder: '', + selectValue: true, + selectOptions: [ + { + code: 'staticData', + name: '静态数据', + }, + { + code: 'dynamicData', + name: '动态数据', + }, + ], + value: 'staticData', + }, + { + type: 'el-input-number', + label: '刷新时间(毫秒)', + name: 'refreshTime', + relactiveDom: 'dataType', + relactiveDomValue: 'dynamicData', + value: 5000 + }, + { + type: 'el-button', + label: '静态数据', + name: 'staticData', + required: false, + placeholder: '', + relactiveDom: 'dataType', + relactiveDomValue: 'staticData', + value: [ + {"axis": "苹果", "data": 1000}, + {"axis": "三星", "data": 2229}, + {"axis": "小米", "data": 3879}, + {"axis": "oppo", "data": 2379}, + {"axis": "vivo", "data": 4079}, + ], + }, + { + type: 'dycustComponents', + label: '', + name: 'dynamicData', + required: false, + placeholder: '', + relactiveDom: 'dataType', + relactiveDomValue: 'dynamicData', + chartType: 'widget-barchart', + dictKey: 'BAR_PROPERTIES', + value: '', + }, + ], + // 坐标 + position: [ + { + type: 'el-input-number', + label: '左边距', + name: 'left', + required: false, + placeholder: '', + value: 0, + }, + { + type: 'el-input-number', + label: '上边距', + name: 'top', + required: false, + placeholder: '', + value: 0, + }, + { + type: 'el-input-number', + label: '宽度', + name: 'width', + required: false, + placeholder: '该容器在1920px大屏中的宽度', + value: 400, + }, + { + type: 'el-input-number', + label: '高度', + name: 'height', + required: false, + placeholder: '该容器在1080px大屏中的高度', + value: 200, + }, + ], } +} 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 eed79f71..9daadfc5 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 @@ -384,32 +384,37 @@ export default { const optionsSetup = this.optionsSetup; const optionsData = this.optionsData; // 数据类型 静态 or 动态 optionsData.dataType == "staticData" - ? this.staticDataFn(optionsData.staticData, optionsSetup) + ? this.staticDataFn(optionsData.staticData) : this.dynamicDataFn( - optionsData.dynamicData, - optionsData.refreshTime, - optionsSetup + optionsData.dynamicData, + optionsData.refreshTime, + optionsSetup ); }, // 静态数据 - staticDataFn(val, optionsSetup) { - const staticData = typeof val == "string" ? JSON.parse(val) : val; + staticDataFn(val) { + const optionsSetup = this.optionsSetup; + const series = this.options.series; + let axis = []; + let data = []; + for (const i in val) { + axis[i] = val[i].axis; + data[i] = val[i].data + } // x轴 if (optionsSetup.verticalShow) { this.options.xAxis.data = []; - this.options.yAxis.data = staticData.categories; + this.options.yAxis.data = axis; this.options.xAxis.type = "value"; this.options.yAxis.type = "category"; } else { - this.options.xAxis.data = staticData.categories; + this.options.xAxis.data = axis; this.options.yAxis.data = []; this.options.xAxis.type = "category"; this.options.yAxis.type = "value"; } - // series - const series = this.options.series; if (series[0].type == "bar") { - series[0].data = staticData.series[0].data; + series[0].data = data; } }, // 动态数据