From 4fa13f35688c15c0fb95aea004cd6af52f006d63 Mon Sep 17 00:00:00 2001 From: qianming Date: Fri, 21 Jan 2022 12:50:24 +0800 Subject: [PATCH] =?UTF-8?q?=E5=9B=BE=E8=A1=A8=E5=9B=BE=E4=BE=8B=E8=B0=83?= =?UTF-8?q?=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../tools/configure/widget-bar-compare.js | 162 +++++++++--------- .../tools/configure/widget-bar-stack.js | 160 +++++++++-------- .../tools/configure/widget-barlinechart.js | 86 +++++++++- .../tools/configure/widget-line-stack.js | 160 +++++++++-------- .../tools/configure/widget-linechart.js | 155 +++++++++-------- .../widget/bar/widgetBarCompareChart.vue | 66 +++++-- .../widget/bar/widgetBarStackChart.vue | 59 +++++-- .../widget/bar/widgetBarlinechart.vue | 45 ++++- .../widget/line/widgetLineStackChart.vue | 59 +++++-- .../designer/widget/line/widgetLinechart.vue | 35 +++- 10 files changed, 627 insertions(+), 360 deletions(-) diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-bar-compare.js b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-bar-compare.js index 09a0042d..1907da7b 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-bar-compare.js +++ b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-bar-compare.js @@ -1,6 +1,6 @@ /* * @Descripttion: 柱状对比图 json - * @version: + * @version: * @Author: qianlishi * @Date: 2021-08-29 07:39:35 * @LastEditors: qianlishi @@ -116,6 +116,88 @@ export const widgetBarCompare = { }, ], }, + { + 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: [ @@ -460,80 +542,6 @@ export const widgetBarCompare = { }, ], }, - { - 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: '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: [ @@ -635,7 +643,7 @@ export const widgetBarCompare = { name: 'width', required: false, placeholder: '该容器在1920px大屏中的宽度', - value: 400, + value: 500, }, { type: 'el-input-number', @@ -643,7 +651,7 @@ export const widgetBarCompare = { name: 'height', required: false, placeholder: '该容器在1080px大屏中的高度', - value: 200, + value: 250, }, ], } diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-bar-stack.js b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-bar-stack.js index 9def8d44..f9f0c3bd 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-bar-stack.js +++ b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-bar-stack.js @@ -174,6 +174,88 @@ export const widgetBarStack = { }, ], }, + { + 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: [ @@ -465,80 +547,6 @@ export const widgetBarStack = { }, ], }, - { - 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: '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: [ @@ -635,7 +643,7 @@ export const widgetBarStack = { name: 'width', required: false, placeholder: '该容器在1920px大屏中的宽度', - value: 400, + value: 500, }, { type: 'el-input-number', @@ -643,7 +651,7 @@ export const widgetBarStack = { name: 'height', required: false, placeholder: '该容器在1080px大屏中的高度', - value: 200, + value: 250, }, ], } diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-barlinechart.js b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-barlinechart.js index d6b030e0..36740201 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-barlinechart.js +++ b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-barlinechart.js @@ -215,6 +215,88 @@ export const widgetBarlinechart = { }, ], }, + { + 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: [ @@ -692,7 +774,7 @@ export const widgetBarlinechart = { name: 'width', required: false, placeholder: '该容器在1920px大屏中的宽度', - value: 400, + value: 500, }, { type: 'el-input-number', @@ -700,7 +782,7 @@ export const widgetBarlinechart = { name: 'height', required: false, placeholder: '该容器在1080px大屏中的高度', - value: 200, + value: 250, }, ], } diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-line-stack.js b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-line-stack.js index 4f904d1f..b0d5e10f 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-line-stack.js +++ b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-line-stack.js @@ -194,6 +194,88 @@ export const widgetLineStack = { }, ], }, + { + 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: [ @@ -485,80 +567,6 @@ export const widgetLineStack = { }, ], }, - { - 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: '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: [ @@ -655,7 +663,7 @@ export const widgetLineStack = { name: 'width', required: false, placeholder: '该容器在1920px大屏中的宽度', - value: 400, + value: 500, }, { type: 'el-input-number', @@ -663,7 +671,7 @@ export const widgetLineStack = { name: 'height', required: false, placeholder: '该容器在1080px大屏中的高度', - value: 200, + value: 250, }, ], } diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-linechart.js b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-linechart.js index 3614ded3..ae09d0fb 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-linechart.js +++ b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-linechart.js @@ -186,6 +186,88 @@ export const widgetLinechart = { }, ], }, + { + 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: [ @@ -497,79 +579,6 @@ export const widgetLinechart = { }, ], }, - { - 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: 'left' - }, - { - 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/widget/bar/widgetBarCompareChart.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarCompareChart.vue index b757c8d3..17adedba 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarCompareChart.vue +++ b/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarCompareChart.vue @@ -483,9 +483,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, @@ -493,6 +493,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; @@ -545,33 +564,37 @@ export default { let xAxisList = []; let yAxisList = []; let arrayList = []; + const legendName = []; for (const i in val) { - xAxisList[i] = val[i].axis - yAxisList[i] = val[i].name + xAxisList[i] = val[i].axis; + yAxisList[i] = val[i].name; } - xAxisList = this.setUnique(xAxisList) - yAxisList = this.setUnique(yAxisList) + xAxisList = this.setUnique(xAxisList); + yAxisList = this.setUnique(yAxisList); for (const i in yAxisList) { - const data = new Array(yAxisList.length).fill(0) + const data = new Array(yAxisList.length).fill(0); for (const j in xAxisList) { for (const k in val) { if (val[k].name == yAxisList[i]) { if (val[k].axis == xAxisList[j]) { - data[j] = val[k].data + data[j] = val[k].data; } } } } arrayList.push({ name: yAxisList[i], - data: data + data: data, }) + legendName.push(yAxisList[i]); } - this.options.series[0]['name'] = arrayList[0].name - this.options.series[0]['data'] = arrayList[0].data - this.options.series[1]['name'] = arrayList[1].name - this.options.series[1]['data'] = arrayList[1].data - this.options.yAxis[1]['data'] = xAxisList + this.options.series[0]['name'] = arrayList[0].name; + this.options.series[0]['data'] = arrayList[0].data; + this.options.series[1]['name'] = arrayList[1].name; + this.options.series[1]['data'] = arrayList[1].data; + this.options.yAxis[1]['data'] = xAxisList; + this.options.legend['data'] = legendName; + this.setOptionsLegendName(legendName); }, // 动态数据 dynamicDataFn(val, refreshTime, optionsSetup) { @@ -592,13 +615,18 @@ export default { }); }, renderingFn(optionsSetup, val) { - this.options.yAxis[1]['data'] = val.xAxis + const legendName = []; + this.options.yAxis[1]['data'] = val.xAxis; if (val.series[0].type == "bar"){ - this.options.series[0]['name'] = val.series[0].name - this.options.series[0]['data'] = val.series[0].data - this.options.series[1]['name'] = val.series[1].name - this.options.series[1]['data'] = val.series[1].data + this.options.series[0]['name'] = val.series[0].name; + this.options.series[0]['data'] = val.series[0].data; + this.options.series[1]['name'] = val.series[1].name; + this.options.series[1]['data'] = val.series[1].data; + legendName.push(val.series[0].name); + legendName.push(val.series[1].name); } + this.options.legend['data'] = legendName; + this.setOptionsLegendName(legendName); } } }; diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarStackChart.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarStackChart.vue index 1c6880c1..dc06b0b4 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarStackChart.vue +++ b/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarStackChart.vue @@ -234,9 +234,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, @@ -244,6 +244,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 + } + }, // 数据解析 setOptionsData() { const optionsSetup = this.optionsSetup; @@ -285,21 +304,22 @@ export default { } //数据 const series = []; - let xAxisList = [] - let yAxisList = [] + let xAxisList = []; + let yAxisList = []; + const legendName = []; for (const i in val) { - xAxisList[i] = val[i].axis - yAxisList[i] = val[i].name + xAxisList[i] = val[i].axis; + yAxisList[i] = val[i].name; } - xAxisList = this.setUnique(xAxisList) - yAxisList = this.setUnique(yAxisList) + xAxisList = this.setUnique(xAxisList); + yAxisList = this.setUnique(yAxisList); for (const i in yAxisList) { - const data = new Array(yAxisList.length).fill(0) + const data = new Array(yAxisList.length).fill(0); for (const j in xAxisList) { for (const k in val) { - if (val[k].name == yAxisList[i]) { // a = a - if (val[k].axis == xAxisList[j]) { // 0725 - data[j] = val[k].data + if (val[k].name == yAxisList[i]) { + if (val[k].axis == xAxisList[j]) { + data[j] = val[k].data; } } } @@ -317,7 +337,7 @@ export default { distance: 10, fontSize: optionsSetup.fontSize, color: optionsSetup.subTextColor, - fontWeight: optionsSetup.fontWeight + fontWeight: optionsSetup.fontWeight, }, //颜色，圆角属性 itemStyle: { @@ -327,8 +347,9 @@ export default { } } }) + legendName.push(yAxisList[i]); } - this.options.series = series + this.options.series = series; if (optionsSetup.verticalShow) { this.options.xAxis.data = []; this.options.yAxis.data = xAxisList; @@ -340,6 +361,8 @@ export default { this.options.xAxis.type = "category"; this.options.yAxis.type = "value"; } + this.options.legend['data'] = legendName; + this.setOptionsLegendName(legendName); }, // 动态数据 dynamicDataFn(val, refreshTime, optionsSetup) { @@ -379,6 +402,7 @@ export default { this.options.yAxis.type = "value"; } const series = []; + const legendName = []; for (const i in val.series) { if (val.series[i].type == "bar") { series.push({ @@ -394,7 +418,7 @@ export default { distance: 10, fontSize: optionsSetup.fontSize, color: optionsSetup.subTextColor, - fontWeight: optionsSetup.fontWeight + fontWeight: optionsSetup.fontWeight, }, //颜色，圆角属性 itemStyle: { @@ -405,8 +429,11 @@ export default { } }) } + legendName.push(val.series[i].name); } - this.options.series = series + this.options.series = series; + this.options.legend['data'] = legendName; + this.setOptionsLegendName(legendName); } } }; diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarlinechart.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarlinechart.vue index c605d19f..79891373 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarlinechart.vue +++ b/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarlinechart.vue @@ -139,7 +139,7 @@ export default { this.setOptionsTooltip(); this.setOptionsData(); this.setOptionsMargin(); - //this.setOptionsLegend(); + this.setOptionsLegend(); this.setOptionsColor(); }, // 标题修改 @@ -341,6 +341,40 @@ export default { }; this.options.grid = grid; }, + setOptionsLegend() { + const optionsSetup = this.optionsSetup; + const legend = this.options.legend; + legend.show = optionsSetup.isShowLegend; + legend.left = optionsSetup.lateralPosition; + legend.top = optionsSetup.longitudinalPosition; + legend.bottom = + optionsSetup.longitudinalPosition; + legend.orient = optionsSetup.layoutFront; + legend.textStyle = { + color: optionsSetup.lengedColor, + fontSize: optionsSetup.lengedFontSize + }; + 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; @@ -380,6 +414,11 @@ export default { series[i].data = line; } } + const legendName = []; + legendName.push('bar'); + legendName.push('line'); + this.options.legend['data'] = legendName; + this.setOptionsLegendName(legendName); }, dynamicDataFn(val, refreshTime) { if (!val) return; @@ -402,13 +441,17 @@ export default { this.options.xAxis.data = val.xAxis; // series const series = this.options.series; + const legendName = []; for (const i in series) { for (const j in val.series) { if (series[i].type == val.series[j].type) { series[i].data = val.series[j].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/line/widgetLineStackChart.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/line/widgetLineStackChart.vue index 83675c9a..c06ec3d4 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/widget/line/widgetLineStackChart.vue +++ b/report-ui/src/views/bigscreenDesigner/designer/widget/line/widgetLineStackChart.vue @@ -249,9 +249,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, @@ -259,6 +259,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 optionsCollapse = this.optionsSetup; @@ -303,21 +322,22 @@ export default { } //数据 const series = []; - let xAxisList = [] - let yAxisList = [] + let xAxisList = []; + let yAxisList = []; + const legendName = []; for (const i in val) { - xAxisList[i] = val[i].axis - yAxisList[i] = val[i].name + xAxisList[i] = val[i].axis; + yAxisList[i] = val[i].name; } - xAxisList = this.setUnique(xAxisList) - yAxisList = this.setUnique(yAxisList) + xAxisList = this.setUnique(xAxisList); + yAxisList = this.setUnique(yAxisList); for (const i in yAxisList) { - const data = new Array(yAxisList.length).fill(0) + const data = new Array(yAxisList.length).fill(0); for (const j in xAxisList) { for (const k in val) { if (val[k].name == yAxisList[i]) { if (val[k].axis == xAxisList[j]) { - data[j] = val[k].data + data[j] = val[k].data; } } } @@ -334,7 +354,7 @@ export default { // 线条 lineStyle: { color: arrColor[i], - width: optionsSetup.lineWidth + width: optionsSetup.lineWidth, }, //点 itemStyle: { @@ -348,11 +368,12 @@ export default { distance: 10, fontSize: optionsSetup.fontSize, color: optionsSetup.subTextColor, - fontWeight: optionsSetup.fontWeight + fontWeight: optionsSetup.fontWeight, }, }) + legendName.push(yAxisList[i]); } - this.options.series = series + this.options.series = series; if (optionsSetup.verticalShow) { this.options.xAxis.data = []; this.options.yAxis.data = xAxisList; @@ -364,6 +385,8 @@ export default { this.options.xAxis.type = "category"; this.options.yAxis.type = "value"; } + this.options.legend['data'] = legendName; + this.setOptionsLegendName(legendName); }, // 动态数据 dynamicDataFn(val, refreshTime, optionsSetup) { @@ -403,6 +426,7 @@ export default { this.options.yAxis.type = "value"; } const series = []; + const legendName = []; for (const i in val.series) { if (val.series[i].type == "line") { series.push({ @@ -418,7 +442,7 @@ export default { // 线条 lineStyle: { color: arrColor[i], - width: optionsSetup.lineWidth + width: optionsSetup.lineWidth, }, //点 itemStyle: { @@ -432,12 +456,15 @@ export default { distance: 10, fontSize: optionsSetup.fontSize, color: optionsSetup.subTextColor, - fontWeight: optionsSetup.fontWeight + fontWeight: optionsSetup.fontWeight, }, }) } + legendName.push(val.series[i].name); } - this.options.series = series + this.options.series = series; + this.options.legend['data'] = legendName; + this.setOptionsLegendName(legendName); } } }; diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/line/widgetLinechart.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/line/widgetLinechart.vue index 87ad9b28..15e931ba 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/widget/line/widgetLinechart.vue +++ b/report-ui/src/views/bigscreenDesigner/designer/widget/line/widgetLinechart.vue @@ -266,11 +266,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, @@ -278,6 +278,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; @@ -313,6 +332,10 @@ export default { series[i].data = data; } } + const legendName = []; + legendName.push('销售量') + this.options.legend['data'] = legendName; + this.setOptionsLegendName(legendName); }, dynamicDataFn(val, refreshTime) { if (!val) return; @@ -336,11 +359,15 @@ export default { this.options.xAxis.data = val.xAxis; // series const series = this.options.series; + const legendName = []; for (const i in series) { if (series[i].type == "line") { series[i].data = val.series[i].data; } + legendName.push(val.series[i].name); } + this.options.legend['data'] = legendName; + this.setOptionsLegendName(legendName); } } };