From a43f966c69f3f60b2cf5455e098871627691a266 Mon Sep 17 00:00:00 2001 From: qianming Date: Wed, 1 Sep 2021 13:45:53 +0800 Subject: [PATCH] update --- .../componentsJSON/widget-barlinechart.js | 165 +++++++++++------- .../widget-gradient-barchart.js | 3 +- .../tools/componentsJSON/widget-linechart.js | 147 +++++++++------- .../designer/widget/widgetBarlinechart.vue | 43 ++--- .../designer/widget/widgetLinechart.vue | 16 +- 5 files changed, 213 insertions(+), 161 deletions(-) diff --git a/report-ui/src/views/report/bigscreen/designer/tools/componentsJSON/widget-barlinechart.js b/report-ui/src/views/report/bigscreen/designer/tools/componentsJSON/widget-barlinechart.js index a6275ed1..afaa2aaa 100644 --- a/report-ui/src/views/report/bigscreen/designer/tools/componentsJSON/widget-barlinechart.js +++ b/report-ui/src/views/report/bigscreen/designer/tools/componentsJSON/widget-barlinechart.js @@ -1,6 +1,6 @@ /* * @Descripttion: 主线图 - * @version: + * @version: * @Author: qianlishi * @Date: 2021-08-29 07:26:48 * @LastEditors: qianlishi @@ -218,14 +218,6 @@ export const widgetBarlinechart = { { name: 'X轴设置', list: [ - { - type: 'el-input-text', - label: '名称', - name: 'xName', - required: false, - placeholder: '', - value: '' - }, { type: 'el-switch', label: '显示', @@ -234,61 +226,69 @@ export const widgetBarlinechart = { placeholder: '', value: true, }, + { + type: 'el-input-text', + label: '坐标名', + name: 'xName', + required: false, + placeholder: '', + value: '' + }, { type: 'vue-color', label: '坐标名颜色', - name: 'xNameColor', + name: 'nameColorX', required: false, placeholder: '', - value: '#fff' + value: '#fff', }, { type: 'el-input-number', - label: '字体大小', - name: 'xNameFontSize', + label: '坐标字号', + name: 'nameFontSizeX', required: false, placeholder: '', - value: 12 + value: 14, }, { - type: 'el-slider', - label: '文字角度', - name: 'textAngle', + type: 'vue-color', + label: '数值颜色', + name: 'Xcolor', required: false, placeholder: '', - value: 0 + value: '#fff', }, { type: 'el-input-number', - label: '文字间隔', - name: 'textInterval', + label: '数值字号', + name: 'fontSizeX', required: false, placeholder: '', - value: 0 + value: 14, }, { - type: 'el-switch', - label: '轴反转', - name: 'reversalX', + type: 'el-slider', + label: '数值角度', + name: 'textAngle', required: false, placeholder: '', value: 0 }, { - type: 'vue-color', - label: '颜色', - name: 'Xcolor', + type: 'el-input-number', + label: '数值间隔', + name: 'textInterval', required: false, placeholder: '', - value: '#fff', + value: '' }, { - type: 'el-input-number', - label: '字号', - name: 'fontSizeX', + type: 'el-switch', + label: '轴反转', + name: 'reversalX', required: false, placeholder: '', - value: 16, + value: false }, { type: 'vue-color', @@ -313,56 +313,95 @@ export const widgetBarlinechart = { required: false, placeholder: '', value: '#fff', - } ], }, { name: 'Y轴设置', list: [ + { + type: 'el-switch', + label: '左显示', + name: 'isShowYLeft', + require: false, + placeholder: '', + value: true, + }, { type: 'el-input-text', - label: '名称', - name: 'textNameY', + label: '左坐标名', + name: 'textNameYLeft', require: false, placeholder: '', value: '' }, + { + type: 'vue-color', + label: '左坐标名颜色', + name: 'nameColorYLeft', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-input-number', + label: '左坐标字号', + name: 'namefontSizeYLeft', + required: false, + placeholder: '', + value: 14, + }, + { + type: 'el-input-number', + label: '左均分', + name: 'splitNumberLeft', + required: false, + placeholder: '', + value: '' + }, { type: 'el-switch', - label: '显示', - name: 'isShowY', + label: '右显示', + name: 'isShowYRight', require: false, placeholder: '', value: true, }, + { + type: 'el-input-text', + label: '右坐标名', + name: 'textNameYRight', + require: false, + placeholder: '', + value: '' + }, { type: 'vue-color', - label: '坐标名颜色', - name: 'NameColorY', + label: '右坐标名颜色', + name: 'nameColorYRight', required: false, placeholder: '', - value: '#fff' + value: '#fff', }, { type: 'el-input-number', - label: '字体大小', - name: 'NameFontSizeY', + label: '右坐标字号', + name: 'namefontSizeYRight', required: false, placeholder: '', - value: 12 + value: 14, }, { - type: 'el-switch', - label: '轴反转', - name: 'reversalY', + type: 'el-input-number', + label: '右均分', + name: 'splitNumberRight', required: false, placeholder: '', - value: 0 + value: '' }, { type: 'vue-color', - label: '颜色', + label: '数值颜色', name: 'colorY', required: false, placeholder: '', @@ -370,36 +409,28 @@ export const widgetBarlinechart = { }, { type: 'el-input-number', - label: '字号', + label: '数值字号', name: 'fontSizeY', required: false, placeholder: '', - value: 12, + value: 14, }, { - type: 'vue-color', - label: '轴颜色', - name: 'lineColorY', + type: 'el-switch', + label: '轴反转', + name: 'reversalY', required: false, placeholder: '', - value: '#fff', + value: false }, { - type: 'el-switch', - label: '分割线显示', - name: 'isShowSplitLineY', - require: false, - placeholder: '', - value: false, - }, { type: 'vue-color', - label: '分割线颜色', - name: 'splitLineColorY', + label: '轴颜色', + name: 'lineColorY', required: false, placeholder: '', value: '#fff', - - } + }, ], }, { @@ -538,7 +569,7 @@ export const widgetBarlinechart = { label: '', name: 'customColor', required: false, - value: [{color: '#00F4FFFF'}, {color: '#42fffd'}], + value: [{color: '#00F4FFFF'}, {color: '#e68b55'}], }, ], }, @@ -631,4 +662,4 @@ export const widgetBarlinechart = { }, ], } - } \ No newline at end of file + } diff --git a/report-ui/src/views/report/bigscreen/designer/tools/componentsJSON/widget-gradient-barchart.js b/report-ui/src/views/report/bigscreen/designer/tools/componentsJSON/widget-gradient-barchart.js index 91e588c4..fb8855e6 100644 --- a/report-ui/src/views/report/bigscreen/designer/tools/componentsJSON/widget-gradient-barchart.js +++ b/report-ui/src/views/report/bigscreen/designer/tools/componentsJSON/widget-gradient-barchart.js @@ -368,7 +368,8 @@ export const widgetGradientBarchart = { require: false, placeholder: '', value: false, - }, { + }, + { type: 'vue-color', label: '分割线颜色', name: 'splitLineColorY', diff --git a/report-ui/src/views/report/bigscreen/designer/tools/componentsJSON/widget-linechart.js b/report-ui/src/views/report/bigscreen/designer/tools/componentsJSON/widget-linechart.js index f0832bb8..c7e1dde2 100644 --- a/report-ui/src/views/report/bigscreen/designer/tools/componentsJSON/widget-linechart.js +++ b/report-ui/src/views/report/bigscreen/designer/tools/componentsJSON/widget-linechart.js @@ -1,6 +1,6 @@ /* * @Descripttion: 折线图json - * @version: + * @version: * @Author: qianlishi * @Date: 2021-08-29 07:24:48 * @LastEditors: qianlishi @@ -109,7 +109,7 @@ export const widgetLinechart = { name: 'textColor', required: false, placeholder: '', - value: '##FFD700' + value: '#fff' }, { type: 'el-select', @@ -127,7 +127,7 @@ export const widgetLinechart = { }, { type: 'el-input-number', - label: '字体大小', + label: '字体字号', name: 'textFontSize', required: false, placeholder: '', @@ -178,7 +178,7 @@ export const widgetLinechart = { }, { type: 'el-input-number', - label: '字体大小', + label: '字体字号', name: 'subTextFontSize', required: false, placeholder: '', @@ -189,41 +189,57 @@ export const widgetLinechart = { { name: 'X轴设置', list: [ + { + type: 'el-switch', + label: '显示', + name: 'hideX', + required: false, + placeholder: '', + value: true, + }, { type: 'el-input-text', - label: '名称', + label: '坐标名', name: 'xName', required: false, placeholder: '', value: '' }, { - type: 'el-switch', - label: '显示', - name: 'hideX', + type: 'vue-color', + label: '坐标名颜色', + name: 'nameColorX', required: false, placeholder: '', - value: true, + value: '#fff', + }, + { + type: 'el-input-number', + label: '坐标字号', + name: 'nameFontSizeX', + required: false, + placeholder: '', + value: 14, }, { type: 'vue-color', - label: '坐标名颜色', - name: 'xNameColor', + label: '数值颜色', + name: 'Xcolor', required: false, placeholder: '', - value: '#fff' + value: '#fff', }, { type: 'el-input-number', - label: '字体大小', - name: 'xNameFontSize', + label: '数值字号', + name: 'fontSizeX', required: false, placeholder: '', - value: 12 + value: 14, }, { type: 'el-slider', - label: '文字角度', + label: '数值角度', name: 'textAngle', required: false, placeholder: '', @@ -231,11 +247,11 @@ export const widgetLinechart = { }, { type: 'el-input-number', - label: '文字间隔', + label: '数值间隔', name: 'textInterval', required: false, placeholder: '', - value: 0 + value: '' }, { type: 'el-switch', @@ -245,22 +261,6 @@ export const widgetLinechart = { placeholder: '', value: false }, - { - type: 'vue-color', - label: '颜色', - name: 'Xcolor', - required: false, - placeholder: '', - value: '#fff', - }, - { - type: 'el-input-text', - label: '字号', - name: 'fontSizeX', - required: false, - placeholder: '', - value: 12, - }, { type: 'vue-color', label: '轴颜色', @@ -284,21 +284,12 @@ export const widgetLinechart = { required: false, placeholder: '', value: '#fff', - } ], }, { name: 'Y轴设置', list: [ - { - type: 'el-input-text', - label: '名称', - name: 'textNameY', - require: false, - placeholder: '', - value: '' - }, { type: 'el-switch', label: '显示', @@ -308,44 +299,76 @@ export const widgetLinechart = { value: true, }, { - type: 'vue-color', - label: '坐标名颜色', - name: 'NameColorY', - required: false, + type: 'el-input-text', + label: '坐标名', + name: 'textNameY', + require: false, placeholder: '', - value: '#fff' + value: '' }, { - type: 'el-input-text', - label: '字体大小', - name: 'NameFontSizeY', + type: 'vue-color', + label: '坐标名颜色', + name: 'nameColorY', required: false, placeholder: '', - value: 12 + value: '#fff', }, { - type: 'el-switch', - label: '轴反转', - name: 'reversalY', + type: 'el-input-number', + label: '坐标字号', + name: 'namefontSizeY', required: false, placeholder: '', - value: false + value: 14, }, { type: 'vue-color', - label: '颜色', + label: '数值颜色', name: 'colorY', required: false, placeholder: '', value: '#fff', }, { - type: 'el-input-text', - label: '字号', + type: 'el-input-number', + label: '数值字号', name: 'fontSizeY', required: false, placeholder: '', - value: 12, + 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', @@ -362,14 +385,14 @@ export const widgetLinechart = { require: false, placeholder: '', value: false, - }, { + }, + { type: 'vue-color', label: '分割线颜色', name: 'splitLineColorY', required: false, placeholder: '', value: '#fff', - } ], }, diff --git a/report-ui/src/views/report/bigscreen/designer/widget/widgetBarlinechart.vue b/report-ui/src/views/report/bigscreen/designer/widget/widgetBarlinechart.vue index 7c05f35d..38ea4f25 100644 --- a/report-ui/src/views/report/bigscreen/designer/widget/widgetBarlinechart.vue +++ b/report-ui/src/views/report/bigscreen/designer/widget/widgetBarlinechart.vue @@ -171,14 +171,14 @@ export default { show: optionsCollapse.hideX, // 坐标轴是否显示 name: optionsCollapse.xName, // 坐标轴名称 nameTextStyle: { - color: optionsCollapse.xNameColor, - fontSize: optionsCollapse.xNameFontSize + color: optionsCollapse.nameColorX, + fontSize: optionsCollapse.nameFontSizeX }, nameRotate: optionsCollapse.textAngle, // 文字角度 inverse: optionsCollapse.reversalX, // 轴反转 axisLabel: { show: true, - interval: optionsCollapse.textInterval, // 文字角度 + interval: optionsCollapse.textInterval, // 文字间隔 rotate: optionsCollapse.textAngle, // 文字角度 textStyle: { color: optionsCollapse.Xcolor, // x轴 坐标文字颜色 @@ -206,46 +206,45 @@ export default { const yAxis = [ { type: "value", - show: optionsCollapse.isShowY, // 坐标轴是否显示 - name: optionsCollapse.textNameY, // 坐标轴名称 - nameTextStyle: { - color: optionsCollapse.NameColorY, - fontSize: optionsCollapse.NameFontSizeY + splitNumber: optionsCollapse.splitNumberLeft,// 均分 + show: optionsCollapse.isShowYLeft, // 坐标轴是否显示 + name: optionsCollapse.textNameYLeft, // 坐标轴名称 + nameTextStyle: { // 别名 + color: optionsCollapse.nameColorYLeft, + fontSize: optionsCollapse.namefontSizeYLeft }, inverse: optionsCollapse.reversalY, // 轴反转 axisLabel: { show: true, textStyle: { - color: optionsCollapse.colorY, // x轴 坐标文字颜色 + color: optionsCollapse.colorY, // y轴 坐标文字颜色 fontSize: optionsCollapse.fontSizeY } }, axisLine: { show: true, lineStyle: { - color: "#fff" + color: optionsCollapse.lineColorY } }, splitLine: { - show: optionsCollapse.isShowSplitLineY, - lineStyle: { - color: optionsCollapse.splitLineColorY - } + show: false, } }, { type: "value", - show: optionsCollapse.isShowY, // 坐标轴是否显示 - name: optionsCollapse.textNameY, // 坐标轴名称 - nameTextStyle: { - color: optionsCollapse.NameColorY, - fontSize: optionsCollapse.NameFontSizeY + splitNumber: optionsCollapse.splitNumberRight,// 均分 + show: optionsCollapse.isShowYRight, // 坐标轴是否显示 + name: optionsCollapse.textNameYRight, // 坐标轴名称 + nameTextStyle: { // 别名 + color: optionsCollapse.nameColorYRight, + fontSize: optionsCollapse.namefontSizeYRight }, inverse: optionsCollapse.reversalY, // 轴反转 axisLabel: { show: true, textStyle: { - color: optionsCollapse.colorY, // x轴 坐标文字颜色 + color: optionsCollapse.colorY, // y轴 坐标文字颜色 fontSize: optionsCollapse.fontSizeY } }, @@ -257,13 +256,9 @@ export default { }, splitLine: { show: false, - lineStyle: { - color: optionsCollapse.splitLineColorY - } } } ]; - this.options.yAxis = yAxis; }, // 折线设置 diff --git a/report-ui/src/views/report/bigscreen/designer/widget/widgetLinechart.vue b/report-ui/src/views/report/bigscreen/designer/widget/widgetLinechart.vue index 955fa859..9b87050b 100644 --- a/report-ui/src/views/report/bigscreen/designer/widget/widgetLinechart.vue +++ b/report-ui/src/views/report/bigscreen/designer/widget/widgetLinechart.vue @@ -136,14 +136,14 @@ export default { show: optionsCollapse.hideX, // 坐标轴是否显示 name: optionsCollapse.xName, // 坐标轴名称 nameTextStyle: { - color: optionsCollapse.xNameColor, - fontSize: optionsCollapse.xNameFontSize + color: optionsCollapse.nameColorX, + fontSize: optionsCollapse.nameFontSizeX }, nameRotate: optionsCollapse.textAngle, // 文字角度 inverse: optionsCollapse.reversalX, // 轴反转 axisLabel: { show: true, - interval: optionsCollapse.textInterval, // 文字角度 + interval: optionsCollapse.textInterval, // 文字间隔 rotate: optionsCollapse.textAngle, // 文字角度 textStyle: { color: optionsCollapse.Xcolor, // x轴 坐标文字颜色 @@ -170,15 +170,18 @@ export default { const optionsCollapse = this.optionsSetup; const yAxis = { type: "value", + scale : optionsCollapse.scale, + splitNumber: optionsCollapse.splitNumber,// 均分 show: optionsCollapse.isShowY, // 坐标轴是否显示 name: optionsCollapse.textNameY, // 坐标轴名称 - nameTextStyle: { - color: optionsCollapse.NameColorY, - fontSize: optionsCollapse.NameFontSizeY + nameTextStyle: { // 别名 + color: optionsCollapse.nameColorY, + fontSize: optionsCollapse.namefontSizeY }, inverse: optionsCollapse.reversalY, // 轴反转 axisLabel: { show: true, + rotate: optionsCollapse.ytextAngle, // 文字角度 textStyle: { color: optionsCollapse.colorY, // y轴 坐标文字颜色 fontSize: optionsCollapse.fontSizeY @@ -197,7 +200,6 @@ export default { } } }; - this.options.yAxis = yAxis; }, // 折线设置