From 10108cea553d00e785a736912a926ef86eb2ebb8 Mon Sep 17 00:00:00 2001 From: qianming Date: Thu, 20 Jan 2022 16:52:33 +0800 Subject: [PATCH] =?UTF-8?q?=E5=9B=BE=E4=BE=8B=E5=8A=9F=E8=83=BD=E6=9B=B4?= =?UTF-8?q?=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../tools/configure/widget-barchart.js | 155 +++++++++--------- .../configure/widget-gradient-barchart.js | 84 +++++++++- .../designer/widget/bar/widgetBarchart.vue | 36 +++- .../bar/widgetGradientColorBarchart.vue | 37 ++++- .../widget/bar/widgetMoreBarLineChart.vue | 7 +- 5 files changed, 234 insertions(+), 85 deletions(-) diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-barchart.js b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-barchart.js index eb7b110c..d7f401c5 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-barchart.js +++ b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-barchart.js @@ -170,6 +170,88 @@ export const widgetBarchart = { }, ], }, + { + name: '图例操作', + list: [ + { + type: 'el-switch', + label: '图例显示', + name: 'isShowLegend', + required: false, + placeholder: '', + value: true, + }, + { + type: 'el-input-text', + label: '图例名称', + name: 'legendName', + required: false, + placeholder: '', + value: '' + }, + { + type: 'vue-color', + label: '字体颜色', + name: 'lengedColor', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-input-number', + label: '字体字号', + name: 'lengedFontSize', + required: false, + placeholder: '', + value: 12, + }, + { + type: 'el-input-number', + label: '图例宽度', + name: 'lengedWidth', + 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: 'X轴设置', list: [ @@ -484,79 +566,6 @@ export const widgetBarchart = { }, ], }, - { - name: '图例操作', - list: [ - { - type: 'el-switch', - label: '图例', - name: 'isShowLegend', - required: false, - placeholder: '', - value: true, - }, - { - type: 'vue-color', - label: '字体颜色', - name: 'lengedColor', - required: false, - placeholder: '', - value: '#fff', - }, - { - type: 'el-input-number', - label: '字体字号', - name: 'lengedFontSize', - required: false, - placeholder: '', - value: 16, - }, - { - type: 'el-input-number', - label: '图例宽度', - name: 'lengedWidth', - required: false, - placeholder: '', - value: 15, - }, - { - type: 'el-select', - label: '横向位置', - name: 'lateralPosition', - required: false, - placeholder: '', - selectOptions: [ - {code: 'left', name: '左对齐'}, - {code: 'right', name: '右对齐'}, - ], - value: '' - }, - { - type: 'el-select', - label: '纵向位置', - name: 'longitudinalPosition', - required: false, - placeholder: '', - selectOptions: [ - {code: 'top', name: '顶部'}, - {code: 'bottom', name: '底部'}, - ], - value: '' - }, - { - type: 'el-select', - label: '布局前置', - name: 'layoutFront', - required: false, - placeholder: '', - selectOptions: [ - {code: 'vertical', name: '竖排'}, - {code: 'horizontal', name: '横排'}, - ], - value: '' - }, - ], - }, { name: '自定义配色', list: [ diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-gradient-barchart.js b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-gradient-barchart.js index 7a6c7696..6b1dac1a 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-gradient-barchart.js +++ b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-gradient-barchart.js @@ -9,7 +9,7 @@ export const widgetGradientBarchart = { code: 'widget-gradient-color-barchart', type: 'chart', - label: '柱形图-渐变色', + label: '柱状图-渐变色', icon: 'iconzhuzhuangtu', options: { // 配置 @@ -162,6 +162,88 @@ export const widgetGradientBarchart = { }, ], }, + { + name: '图例操作', + list: [ + { + type: 'el-switch', + label: '图例显示', + name: 'isShowLegend', + required: false, + placeholder: '', + value: true, + }, + { + type: 'el-input-text', + label: '图例名称', + name: 'legendName', + required: false, + placeholder: '', + value: '' + }, + { + type: 'vue-color', + label: '字体颜色', + name: 'lengedColor', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-input-number', + label: '字体字号', + name: 'lengedFontSize', + required: false, + placeholder: '', + value: 12, + }, + { + type: 'el-input-number', + label: '图例宽度', + name: 'lengedWidth', + 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: 'X轴设置', list: [ diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarchart.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarchart.vue index ed8a08bd..74090891 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarchart.vue +++ b/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarchart.vue @@ -258,11 +258,11 @@ export default { const optionsSetup = this.optionsSetup; const legend = this.options.legend; legend.show = optionsSetup.isShowLegend; - legend.left = optionsSetup.lateralPosition == "left" ? 0 : "auto"; - legend.right = optionsSetup.lateralPosition == "right" ? 0 : "auto"; - legend.top = optionsSetup.longitudinalPosition == "top" ? 0 : "auto"; + legend.left = optionsSetup.lateralPosition; + legend.right = optionsSetup.lateralPosition; + legend.top = optionsSetup.longitudinalPosition; legend.bottom = - optionsSetup.longitudinalPosition == "bottom" ? 0 : "auto"; + optionsSetup.longitudinalPosition; legend.orient = optionsSetup.layoutFront; legend.textStyle = { color: optionsSetup.lengedColor, @@ -270,6 +270,25 @@ export default { }; legend.itemWidth = optionsSetup.lengedWidth; }, + // 图例名称设置 + setOptionsLegendName(name){ + const optionsSetup = this.optionsSetup; + const series = this.options.series; + const legendName = optionsSetup.legendName; + // 图例没有手动写则显示原值，写了则显示新值 + if (null == legendName || legendName == '') { + for (let i = 0; i < name.length; i++) { + series[i].name = name[i]; + } + this.options.legend['data'] = name; + }else { + const arr = legendName.split('|'); + for (let i = 0; i < arr.length; i++) { + series[i].name = arr[i]; + } + this.options.legend['data'] = arr + } + }, // 图例颜色修改 setOptionsColor() { const optionsSetup = this.optionsSetup; @@ -331,6 +350,10 @@ export default { if (series[0].type == "bar") { series[0].data = data; } + const legendName = []; + legendName.push('销售量') + this.options.legend['data'] = legendName; + this.setOptionsLegendName(legendName); }, // 动态数据 dynamicDataFn(val, refreshTime, optionsSetup) { @@ -365,11 +388,16 @@ export default { } // series const series = this.options.series; + const legendName = []; for (const i in series) { if (series[i].type == "bar") { + series[i].name = val.series[i].name; series[i].data = val.series[i].data; } + legendName.push(val.series[i].name); } + this.options.legend['data'] = legendName; + this.setOptionsLegendName(legendName); } } }; diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetGradientColorBarchart.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetGradientColorBarchart.vue index 9daadfc5..b3b02b79 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetGradientColorBarchart.vue +++ b/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetGradientColorBarchart.vue @@ -167,6 +167,7 @@ export default { this.setOptionsX(); this.setOptionsY(); this.setOptionsTop(); + this.setOptionsLegend(); this.setOptionsMargin(); this.setOptionsColor(); this.setOptionsData(); @@ -323,11 +324,11 @@ export default { const optionsSetup = this.optionsSetup; const legend = this.options.legend; legend.show = optionsSetup.isShowLegend; - legend.left = optionsSetup.lateralPosition == "left" ? 0 : "auto"; - legend.right = optionsSetup.lateralPosition == "right" ? 0 : "auto"; - legend.top = optionsSetup.longitudinalPosition == "top" ? 0 : "auto"; + legend.left = optionsSetup.lateralPosition; + legend.right = optionsSetup.lateralPosition; + legend.top = optionsSetup.longitudinalPosition; legend.bottom = - optionsSetup.longitudinalPosition == "bottom" ? 0 : "auto"; + optionsSetup.longitudinalPosition; legend.orient = optionsSetup.layoutFront; legend.textStyle = { color: optionsSetup.lengedColor, @@ -335,6 +336,25 @@ export default { }; legend.itemWidth = optionsSetup.lengedWidth; }, + // 图例名称设置 + setOptionsLegendName(name){ + const optionsSetup = this.optionsSetup; + const series = this.options.series; + const legendName = optionsSetup.legendName; + // 图例没有手动写则显示原值，写了则显示新值 + if (null == legendName || legendName == '') { + for (let i = 0; i < name.length; i++) { + series[i].name = name[i]; + } + this.options.legend['data'] = name; + }else { + const arr = legendName.split('|'); + for (let i = 0; i < arr.length; i++) { + series[i].name = arr[i]; + } + this.options.legend['data'] = arr + } + }, // 渐变色 setOptionsColor() { const optionsSetup = this.optionsSetup; @@ -416,6 +436,10 @@ export default { if (series[0].type == "bar") { series[0].data = data; } + const legendName = []; + legendName.push('销售量') + this.options.legend['data'] = legendName; + this.setOptionsLegendName(legendName); }, // 动态数据 dynamicDataFn(val, refreshTime, optionsSetup) { @@ -451,11 +475,16 @@ export default { // series const series = this.options.series; + const legendName = []; for (const i in series) { if (series[i].type == "bar") { + series[i].name = val.series[i].name; series[i].data = val.series[i].data; } + legendName.push(val.series[i].name); } + this.options.legend['data'] = legendName; + this.setOptionsLegendName(legendName); } } }; diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetMoreBarLineChart.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetMoreBarLineChart.vue index bd89bcb9..c2b8f485 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetMoreBarLineChart.vue +++ b/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetMoreBarLineChart.vue @@ -363,9 +363,9 @@ export default { const legend = this.options.legend; legend.show = optionsSetup.isShowLegend; legend.left = optionsSetup.lateralPosition; - legend.top = optionsSetup.longitudinalPosition == 'top' ? 0 : 'auto'; + legend.top = optionsSetup.longitudinalPosition; legend.bottom = - optionsSetup.longitudinalPosition == 'bottom' ? 0 : 'auto'; + optionsSetup.longitudinalPosition; legend.orient = optionsSetup.layoutFront; legend.textStyle = { color: optionsSetup.lengedColor, @@ -373,6 +373,7 @@ export default { }; legend.itemWidth = optionsSetup.lengedWidth; }, + // 图例名称设置 setOptionsLegendName(name){ const optionsSetup = this.optionsSetup; const series = this.options.series; @@ -560,8 +561,8 @@ export default { } legendName.push(val.series[i].name); } - this.options.legend['data'] = legendName; this.options.series = series; + this.options.legend['data'] = legendName; this.setOptionsLegendName(legendName); }, }