diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/barlineCharts/widget-bar-line-stack.js b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/barlineCharts/widget-bar-line-stack.js index be8b1670..4d6576d1 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/barlineCharts/widget-bar-line-stack.js +++ b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/barlineCharts/widget-bar-line-stack.js @@ -448,6 +448,14 @@ export const widgetBarLineStack = { placeholder: '', value: 14, }, + { + type: 'el-slider', + label: '数值角度', + name: 'textAngleYLeft', + required: false, + placeholder: '', + value: 0 + }, { type: 'el-input-number', label: '均分', @@ -464,6 +472,22 @@ export const widgetBarLineStack = { placeholder: '', value: '#fff', }, + { + type: 'el-switch', + label: '分割线显示', + name: 'isShowSplitLineYLeft', + require: false, + placeholder: '', + value: false, + }, + { + type: 'vue-color', + label: '分割线颜色', + name: 'splitLineColorYLeft', + required: false, + placeholder: '', + value: '#fff', + }, { type: 'el-switch', label: '右显示', @@ -511,6 +535,14 @@ export const widgetBarLineStack = { placeholder: '', value: 14, }, + { + type: 'el-slider', + label: '数值角度', + name: 'textAngleYRight', + required: false, + placeholder: '', + value: 0 + }, { type: 'el-input-number', label: '均分', @@ -527,6 +559,22 @@ export const widgetBarLineStack = { placeholder: '', value: '#fff', }, + { + type: 'el-switch', + label: '分割线显示', + name: 'isShowSplitLineYRight', + require: false, + placeholder: '', + value: false, + }, + { + type: 'vue-color', + label: '分割线颜色', + name: 'splitLineColorYRight', + required: false, + placeholder: '', + value: '#fff', + }, ], }, { diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/barlineCharts/widget-barlinechart.js b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/barlineCharts/widget-barlinechart.js index 67a84d64..a6936579 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/barlineCharts/widget-barlinechart.js +++ b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/barlineCharts/widget-barlinechart.js @@ -32,6 +32,35 @@ export const widgetBarlinechart = { 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, + }, + { + type: 'el-slider', + label: '最小高度', + name: 'minHeight', + require: false, + placeholder: '', + value: 0, + }, + ], + }, { name: '折线设置', list: [ @@ -85,35 +114,6 @@ export const widgetBarlinechart = { }, ], }, - { - name: '柱体设置', - list: [ - { - type: 'el-slider', - label: '最大宽度', - name: 'maxWidth', - required: false, - placeholder: '', - value: 10, - }, - { - type: 'el-slider', - label: '圆角', - name: 'radius', - require: false, - placeholder: '', - value: 5, - }, - { - type: 'el-slider', - label: '最小高度', - name: 'minHeight', - require: false, - placeholder: '', - value: 0, - }, - ], - }, { name: '标题设置', list: [ @@ -337,67 +337,67 @@ export const widgetBarlinechart = { }, { type: 'el-input-text', - label: '坐标名', - name: 'xName', + label: '轴别名', + name: 'nameX', required: false, placeholder: '', value: '' }, { type: 'vue-color', - label: '坐标名颜色', + label: '别名颜色', name: 'nameColorX', required: false, placeholder: '', - value: '#fff', + value: '#fff' }, { type: 'el-input-number', - label: '坐标字号', + label: '别名字号', name: 'nameFontSizeX', required: false, placeholder: '', - value: 14, - }, - { - type: 'vue-color', - label: '数值颜色', - name: 'Xcolor', - required: false, - placeholder: '', - value: '#fff', + value: 14 }, { - type: 'el-input-number', - label: '数值字号', - name: 'fontSizeX', + type: 'el-switch', + label: '轴反转', + name: 'reversalX', required: false, placeholder: '', - value: 14, + value: false }, { type: 'el-slider', - label: '数值角度', - name: 'textAngle', + label: '文字角度', + name: 'textAngleX', required: false, placeholder: '', value: 0 }, { type: 'el-input-number', - label: '数值间隔', + label: '文字间隔', name: 'textInterval', required: false, placeholder: '', value: '' }, { - type: 'el-switch', - label: '轴反转', - name: 'reversalX', + type: 'vue-color', + label: '文字颜色', + name: 'colorX', required: false, placeholder: '', - value: false + value: '#fff', + }, + { + type: 'el-input-number', + label: '文字字号', + name: 'fontSizeX', + required: false, + placeholder: '', + value: 14, }, { type: 'vue-color', @@ -438,7 +438,7 @@ export const widgetBarlinechart = { }, { type: 'el-input-text', - label: '左坐标名', + label: '坐标名', name: 'textNameYLeft', require: false, placeholder: '', @@ -446,7 +446,7 @@ export const widgetBarlinechart = { }, { type: 'vue-color', - label: '左坐标名颜色', + label: '坐标名颜色', name: 'nameColorYLeft', required: false, placeholder: '', @@ -454,20 +454,68 @@ export const widgetBarlinechart = { }, { type: 'el-input-number', - label: '左坐标字号', - name: 'namefontSizeYLeft', + label: '坐标名字号', + name: 'nameFontSizeYLeft', + required: false, + placeholder: '', + value: 14, + }, + { + type: 'vue-color', + label: '数值颜色', + name: 'colorYLeft', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-input-number', + label: '数值字号', + name: 'fontSizeYLeft', required: false, placeholder: '', value: 14, }, + { + type: 'el-slider', + label: '数值角度', + name: 'textAngleYLeft', + required: false, + placeholder: '', + value: 0 + }, { type: 'el-input-number', - label: '左均分', + label: '均分', name: 'splitNumberLeft', required: false, placeholder: '', value: '' }, + { + type: 'vue-color', + label: '轴颜色', + name: 'lineColorYLeft', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-switch', + label: '分割线显示', + name: 'isShowSplitLineYLeft', + require: false, + placeholder: '', + value: false, + }, + { + type: 'vue-color', + label: '分割线颜色', + name: 'splitLineColorYLeft', + required: false, + placeholder: '', + value: '#fff', + }, { type: 'el-switch', label: '右显示', @@ -478,7 +526,7 @@ export const widgetBarlinechart = { }, { type: 'el-input-text', - label: '右坐标名', + label: '坐标名', name: 'textNameYRight', require: false, placeholder: '', @@ -486,7 +534,7 @@ export const widgetBarlinechart = { }, { type: 'vue-color', - label: '右坐标名颜色', + label: '坐标名颜色', name: 'nameColorYRight', required: false, placeholder: '', @@ -494,48 +542,63 @@ export const widgetBarlinechart = { }, { type: 'el-input-number', - label: '右坐标字号', - name: 'namefontSizeYRight', + label: '坐标名字号', + name: 'nameFontSizeYRight', required: false, placeholder: '', value: 14, + }, { + type: 'vue-color', + label: '数值颜色', + name: 'colorYRight', + required: false, + placeholder: '', + value: '#fff', }, { type: 'el-input-number', - label: '右均分', - name: 'splitNumberRight', + label: '数值字号', + name: 'fontSizeYRight', required: false, placeholder: '', - value: '' + value: 14, }, { - type: 'vue-color', - label: '数值颜色', - name: 'colorY', + type: 'el-slider', + label: '数值角度', + name: 'textAngleYRight', required: false, placeholder: '', - value: '#fff', + value: 0 }, { type: 'el-input-number', - label: '数值字号', - name: 'fontSizeY', + label: '均分', + name: 'splitNumberRight', required: false, placeholder: '', - value: 14, + value: '' }, { - type: 'el-switch', - label: '轴反转', - name: 'reversalY', + type: 'vue-color', + label: '轴颜色', + name: 'lineColorYRight', required: false, placeholder: '', - value: false + value: '#fff', + }, + { + type: 'el-switch', + label: '分割线显示', + name: 'isShowSplitLineYRight', + require: false, + placeholder: '', + value: false, }, { type: 'vue-color', - label: '轴颜色', - name: 'lineColorY', + label: '分割线颜色', + name: 'splitLineColorYRight', required: false, placeholder: '', value: '#fff', diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/barlineCharts/widget-more-bar-line.js b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/barlineCharts/widget-more-bar-line.js index 1a342782..c274c768 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/barlineCharts/widget-more-bar-line.js +++ b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/barlineCharts/widget-more-bar-line.js @@ -32,6 +32,27 @@ export const widgetMoreBarLine = { 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: [ @@ -85,27 +106,6 @@ export const widgetMoreBarLine = { }, ], }, - { - 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: [ @@ -329,67 +329,67 @@ export const widgetMoreBarLine = { }, { type: 'el-input-text', - label: '坐标名', - name: 'xName', + label: '轴别名', + name: 'nameX', required: false, placeholder: '', value: '' }, { type: 'vue-color', - label: '坐标名颜色', + label: '别名颜色', name: 'nameColorX', required: false, placeholder: '', - value: '#fff', + value: '#fff' }, { type: 'el-input-number', - label: '坐标字号', + label: '别名字号', name: 'nameFontSizeX', required: false, placeholder: '', - value: 14, - }, - { - type: 'vue-color', - label: '数值颜色', - name: 'Xcolor', - required: false, - placeholder: '', - value: '#fff', + value: 14 }, { - type: 'el-input-number', - label: '数值字号', - name: 'fontSizeX', + type: 'el-switch', + label: '轴反转', + name: 'reversalX', required: false, placeholder: '', - value: 14, + value: false }, { type: 'el-slider', - label: '数值角度', - name: 'textAngle', + label: '文字角度', + name: 'textAngleX', required: false, placeholder: '', value: 0 }, { type: 'el-input-number', - label: '数值间隔', + label: '文字间隔', name: 'textInterval', required: false, placeholder: '', value: '' }, { - type: 'el-switch', - label: '轴反转', - name: 'reversalX', + type: 'vue-color', + label: '文字颜色', + name: 'colorX', required: false, placeholder: '', - value: false + value: '#fff', + }, + { + type: 'el-input-number', + label: '文字字号', + name: 'fontSizeX', + required: false, + placeholder: '', + value: 14, }, { type: 'vue-color', @@ -430,7 +430,7 @@ export const widgetMoreBarLine = { }, { type: 'el-input-text', - label: '左坐标名', + label: '坐标名', name: 'textNameYLeft', require: false, placeholder: '', @@ -438,7 +438,7 @@ export const widgetMoreBarLine = { }, { type: 'vue-color', - label: '左坐标名颜色', + label: '坐标名颜色', name: 'nameColorYLeft', required: false, placeholder: '', @@ -446,12 +446,68 @@ export const widgetMoreBarLine = { }, { type: 'el-input-number', - label: '左坐标字号', + label: '坐标名字号', name: 'nameFontSizeYLeft', required: false, placeholder: '', value: 14, }, + { + type: 'vue-color', + label: '数值颜色', + name: 'colorYLeft', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-input-number', + label: '数值字号', + name: 'fontSizeYLeft', + required: false, + placeholder: '', + value: 14, + }, + { + type: 'el-slider', + label: '数值角度', + name: 'textAngleYLeft', + required: false, + placeholder: '', + value: 0 + }, + { + type: 'el-input-number', + label: '均分', + name: 'splitNumberLeft', + required: false, + placeholder: '', + value: '' + }, + { + type: 'vue-color', + label: '轴颜色', + name: 'lineColorYLeft', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-switch', + label: '分割线显示', + name: 'isShowSplitLineYLeft', + require: false, + placeholder: '', + value: false, + }, + { + type: 'vue-color', + label: '分割线颜色', + name: 'splitLineColorYLeft', + required: false, + placeholder: '', + value: '#fff', + }, { type: 'el-switch', label: '右显示', @@ -462,7 +518,7 @@ export const widgetMoreBarLine = { }, { type: 'el-input-text', - label: '右坐标名', + label: '坐标名', name: 'textNameYRight', require: false, placeholder: '', @@ -470,7 +526,7 @@ export const widgetMoreBarLine = { }, { type: 'vue-color', - label: '右坐标名颜色', + label: '坐标名颜色', name: 'nameColorYRight', required: false, placeholder: '', @@ -478,16 +534,15 @@ export const widgetMoreBarLine = { }, { type: 'el-input-number', - label: '右坐标字号', + label: '坐标名字号', name: 'nameFontSizeYRight', required: false, placeholder: '', value: 14, - }, - { + }, { type: 'vue-color', label: '数值颜色', - name: 'colorY', + name: 'colorYRight', required: false, placeholder: '', value: '#fff', @@ -495,15 +550,47 @@ export const widgetMoreBarLine = { { type: 'el-input-number', label: '数值字号', - name: 'fontSizeY', + name: 'fontSizeYRight', required: false, placeholder: '', value: 14, }, + { + type: 'el-slider', + label: '数值角度', + name: 'textAngleYRight', + required: false, + placeholder: '', + value: 0 + }, + { + type: 'el-input-number', + label: '均分', + name: 'splitNumberRight', + required: false, + placeholder: '', + value: '' + }, { type: 'vue-color', label: '轴颜色', - name: 'lineColorY', + name: 'lineColorYRight', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-switch', + label: '分割线显示', + name: 'isShowSplitLineYRight', + require: false, + placeholder: '', + value: false, + }, + { + type: 'vue-color', + label: '分割线颜色', + name: 'splitLineColorYRight', required: false, placeholder: '', value: '#fff', diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/index.js b/report-ui/src/views/bigscreenDesigner/designer/tools/index.js index c6f9575f..4a298073 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/tools/index.js +++ b/report-ui/src/views/bigscreenDesigner/designer/tools/index.js @@ -44,6 +44,7 @@ const screenConfig = { name: 'description', required: false, placeholder: '', + value: '' }, { type: 'vue-color', @@ -51,7 +52,7 @@ const screenConfig = { name: 'backgroundColor', required: false, placeholder: '', - value: '#000', + value: 'rgba(45, 86, 126, 1)', }, { type: 'custom-upload', @@ -59,7 +60,7 @@ const screenConfig = { name: 'backgroundImage', required: false, placeholder: '', - value: 'https://ajreport.beliefteam.cn/file/download/bf566e48-ccad-40e1-8ee9-228427e5466b', + value: '', }, ], data: [], diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/barline/widgetBarLineStackChart.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/barline/widgetBarLineStackChart.vue index 2e94ef35..fe031382 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/widget/barline/widgetBarLineStackChart.vue +++ b/report-ui/src/views/bigscreenDesigner/designer/widget/barline/widgetBarLineStackChart.vue @@ -219,6 +219,8 @@ export default { }, axisLabel: { show: true, + // 文字角度 + rotate: optionsSetup.textAngleYLeft, textStyle: { // 坐标文字颜色 color: optionsSetup.colorYLeft, @@ -228,11 +230,14 @@ export default { axisLine: { show: true, lineStyle: { - color: optionsSetup.lineColorYLeft + color: optionsSetup.lineColorYLeft, } }, splitLine: { - show: false, + show: optionsSetup.isShowSplitLineYLeft, + lineStyle: { + color: optionsSetup.splitLineColorYLeft, + } } }, { @@ -250,6 +255,8 @@ export default { }, axisLabel: { show: true, + // 文字角度 + rotate: optionsSetup.textAngleYRight, textStyle: { // 坐标文字颜色 color: optionsSetup.colorYRight, @@ -259,11 +266,14 @@ export default { axisLine: { show: true, lineStyle: { - color: optionsSetup.lineColorYRight + color: optionsSetup.lineColorYRight, } }, splitLine: { - show: false, + show: optionsSetup.isShowSplitLineYRight, + lineStyle: { + color: optionsSetup.splitLineColorYRight, + } } } ]; diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/barline/widgetBarlinechart.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/barline/widgetBarlinechart.vue index e0995288..4e9a4f1a 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/widget/barline/widgetBarlinechart.vue +++ b/report-ui/src/views/bigscreenDesigner/designer/widget/barline/widgetBarlinechart.vue @@ -225,6 +225,8 @@ export default { }, axisLabel: { show: true, + // 文字角度 + rotate: optionsSetup.textAngleYLeft, textStyle: { // 坐标文字颜色 color: optionsSetup.colorYLeft, @@ -234,11 +236,14 @@ export default { axisLine: { show: true, lineStyle: { - color: optionsSetup.lineColorYLeft + color: optionsSetup.lineColorYLeft, } }, splitLine: { - show: false, + show: optionsSetup.isShowSplitLineYLeft, + lineStyle: { + color: optionsSetup.splitLineColorYLeft, + } } }, { @@ -256,6 +261,8 @@ export default { }, axisLabel: { show: true, + // 文字角度 + rotate: optionsSetup.textAngleYRight, textStyle: { // 坐标文字颜色 color: optionsSetup.colorYRight, @@ -265,11 +272,14 @@ export default { axisLine: { show: true, lineStyle: { - color: optionsSetup.lineColorYRight + color: optionsSetup.lineColorYRight, } }, splitLine: { - show: false, + show: optionsSetup.isShowSplitLineYRight, + lineStyle: { + color: optionsSetup.splitLineColorYRight, + } } } ]; diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/barline/widgetMoreBarLineChart.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/barline/widgetMoreBarLineChart.vue index 2c771bf7..f09aaa96 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/widget/barline/widgetMoreBarLineChart.vue +++ b/report-ui/src/views/bigscreenDesigner/designer/widget/barline/widgetMoreBarLineChart.vue @@ -242,21 +242,26 @@ export default { setOptionsX() { const optionsSetup = this.optionsSetup; const xAxis = { - type: 'category', - show: optionsSetup.hideX, // 坐标轴是否显示 - name: optionsSetup.xName, // 坐标轴名称 + type: "category", + // 坐标轴是否显示 + show: optionsSetup.hideX, + // 坐标轴名称 + name: optionsSetup.nameX, nameTextStyle: { color: optionsSetup.nameColorX, fontSize: optionsSetup.nameFontSizeX }, - nameRotate: optionsSetup.textAngle, // 文字角度 - inverse: optionsSetup.reversalX, // 轴反转 + // 轴反转 + inverse: optionsSetup.reversalX, axisLabel: { show: true, - interval: optionsSetup.textInterval, // 文字间隔 - rotate: optionsSetup.textAngle, // 文字角度 + // 文字间隔 + interval: optionsSetup.textInterval, + // 文字角度 + rotate: optionsSetup.textAngleX, textStyle: { - color: optionsSetup.Xcolor, // x轴 坐标文字颜色 + // 坐标文字颜色 + color: optionsSetup.colorX, fontSize: optionsSetup.fontSizeX } }, @@ -280,53 +285,75 @@ export default { const optionsSetup = this.optionsSetup; const yAxis = [ { - type: 'value', - show: optionsSetup.isShowYLeft, // 坐标轴是否显示 - name: optionsSetup.textNameYLeft, // 坐标轴名称 - nameTextStyle: { //颜色字号 + type: "value", + // 均分 + splitNumber: optionsSetup.splitNumberLeft, + // 坐标轴是否显示 + show: optionsSetup.isShowYLeft, + // 坐标轴名称 + name: optionsSetup.textNameYLeft, + // 别名 + nameTextStyle: { color: optionsSetup.nameColorYLeft, fontSize: optionsSetup.nameFontSizeYLeft }, axisLabel: { show: true, + // 文字角度 + rotate: optionsSetup.textAngleYLeft, textStyle: { - color: optionsSetup.colorY, // y轴 坐标文字颜色 - fontSize: optionsSetup.fontSizeY + // 坐标文字颜色 + color: optionsSetup.colorYLeft, + fontSize: optionsSetup.fontSizeYLeft } }, axisLine: { show: true, lineStyle: { - color: optionsSetup.lineColorY + color: optionsSetup.lineColorYLeft } }, splitLine: { - show: false, + show: optionsSetup.isShowSplitLineYLeft, + lineStyle: { + color: optionsSetup.splitLineColorYLeft, + } } }, { - type: 'value', - show: optionsSetup.isShowYRight, // 坐标轴是否显示 - name: optionsSetup.textNameYRight, // 坐标轴名称 - nameTextStyle: { // 颜色字号 + type: "value", + // 均分 + splitNumber: optionsSetup.splitNumberRight, + // 坐标轴是否显示 + show: optionsSetup.isShowYRight, + // 坐标轴名称 + name: optionsSetup.textNameYRight, + // 别名 + nameTextStyle: { color: optionsSetup.nameColorYRight, fontSize: optionsSetup.nameFontSizeYRight }, axisLabel: { show: true, + // 文字角度 + rotate: optionsSetup.textAngleYRight, textStyle: { - color: optionsSetup.colorY, // y轴 坐标文字颜色 - fontSize: optionsSetup.fontSizeY + // 坐标文字颜色 + color: optionsSetup.colorYRight, + fontSize: optionsSetup.fontSizeYRight } }, axisLine: { show: true, lineStyle: { - color: optionsSetup.lineColorY + color: optionsSetup.lineColorYRight } }, splitLine: { - show: false, + show: optionsSetup.isShowSplitLineYRight, + lineStyle: { + color: optionsSetup.splitLineColorYRight, + } } } ];