From 23c79e192887eb05342c63c9b6bc271afa812af4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BB=BB=E6=A0=B9=E8=83=9C?= Date: Sun, 1 Aug 2021 01:10:03 +0800 Subject: [PATCH 1/2] =?UTF-8?q?=E5=A4=9A=E7=BB=B4=E6=8A=98=E7=8E=B0?= =?UTF-8?q?=E5=9B=BE&=E5=A4=9A=E7=BB=B4=E6=9F=B1=E7=8A=B6=E5=9B=BE&?= =?UTF-8?q?=E5=A0=86=E5=8F=A0=E6=9F=B1=E7=8A=B6=E5=9B=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../migration/V1.0.8__add_dict_category.sql | 4 ++ report-ui/src/mixins/queryform.js | 36 +++++++++++++ .../views/report/bigscreen/designer/tools.js | 8 +++ .../designer/widget/widgetBarchart.vue | 51 +++++++++++++++---- .../designer/widget/widgetLinechart.vue | 5 ++ 5 files changed, 94 insertions(+), 10 deletions(-) create mode 100644 report-core/src/main/resources/db/migration/V1.0.8__add_dict_category.sql diff --git a/report-core/src/main/resources/db/migration/V1.0.8__add_dict_category.sql b/report-core/src/main/resources/db/migration/V1.0.8__add_dict_category.sql new file mode 100644 index 00000000..883a8d05 --- /dev/null +++ b/report-core/src/main/resources/db/migration/V1.0.8__add_dict_category.sql @@ -0,0 +1,4 @@ +/* +字典更新 +*/ +INSERT INTO `aj_report`.`gaea_dict_item`(`dict_code`, `item_name`, `item_value`, `item_extend`, `enabled`, `locale`, `remark`, `sort`, `create_by`, `create_time`, `update_by`, `update_time`, `version`) VALUES ('CHART_PROPERTIES', '维度类别', 'category', NULL, 1, 'zh', NULL, 11, 'admin', now(), 'admin', now(), 1); diff --git a/report-ui/src/mixins/queryform.js b/report-ui/src/mixins/queryform.js index c368c32b..c5dfd46a 100644 --- a/report-ui/src/mixins/queryform.js +++ b/report-ui/src/mixins/queryform.js @@ -1,4 +1,5 @@ import miment from 'miment' +import _ from 'lodash' import {getData} from '@/api/bigscreen' export default { @@ -134,6 +135,41 @@ export default { const ananysicData = {}; const xAxisList = []; const series = []; + const types = Object.values(chartProperties) + + if (types.includes('category')) { + const categoryField = Object.keys(chartProperties)[types.indexOf('category')] + let xAxisListTmp = types.filter(item => item.startsWith('xAxis')) + if (xAxisListTmp.length === 0) { + // 未选择横坐标 + return { + xAxis: [], + series: [] + } + } + const xAxisField = Object.keys(chartProperties)[types.indexOf(xAxisListTmp[0])] + const xAxisList = _.sortBy(_.uniqWith(data.map(item => item[xAxisField]))) + const chartDatagroup = _.groupBy(data, categoryField) + for (let property in chartProperties) { + if (chartProperties[property] !== 'category' && !chartProperties[property].startsWith('xAxis')) { + Object.keys(chartDatagroup).forEach(groupKey => { + const data = new Array(xAxisList.length).fill(0); + chartDatagroup[groupKey].forEach(item => { + data[xAxisList.indexOf(item[xAxisField])]= item[property] + }) + series.push({ + name: groupKey, + type: chartProperties[property], + data, + }) + }) + } + } + ananysicData["xAxis"] = xAxisList; + ananysicData["series"] = series; + return ananysicData; + } + for (const key in chartProperties) { const obj = {}; const seriesData = []; diff --git a/report-ui/src/views/report/bigscreen/designer/tools.js b/report-ui/src/views/report/bigscreen/designer/tools.js index 77046c33..36c11880 100644 --- a/report-ui/src/views/report/bigscreen/designer/tools.js +++ b/report-ui/src/views/report/bigscreen/designer/tools.js @@ -1276,6 +1276,14 @@ const widgetTools = [ placeholder: '', value: false, }, + { + type: 'el-switch', + label: '堆叠展示', + name: 'stackShow', + required: false, + placeholder: '', + value: false, + }, { type: 'vue-color', label: '背景颜色', diff --git a/report-ui/src/views/report/bigscreen/designer/widget/widgetBarchart.vue b/report-ui/src/views/report/bigscreen/designer/widget/widgetBarchart.vue index 60153910..cd8e0af1 100644 --- a/report-ui/src/views/report/bigscreen/designer/widget/widgetBarchart.vue +++ b/report-ui/src/views/report/bigscreen/designer/widget/widgetBarchart.vue @@ -210,6 +210,9 @@ export default { color: optionsCollapse.subTextColor, fontWeight: optionsCollapse.fontWeight }; + if (optionsCollapse.stackShow) { + series[key].stack = 'total' + } series[key].barWidth = optionsCollapse.maxWidth; series[key].barMinHeight = optionsCollapse.minHeight; } @@ -259,7 +262,7 @@ export default { legend.itemWidth = optionsCollapse.lengedWidth; }, // 图例颜色修改 - setOptionsColor() { + setOptionsColor(isCategory = false) { const optionsCollapse = this.optionsSetup; const customColor = optionsCollapse.customColor; if (!customColor) return; @@ -267,17 +270,40 @@ export default { for (let i = 0; i < customColor.length; i++) { arrColor.push(customColor[i].color); } - const itemStyle = { - normal: { - color: params => { - return arrColor[params.dataIndex]; - }, - barBorderRadius: optionsCollapse.radius - } - }; + + const optionsData = this.optionsData; + if (optionsData.dataType === 'dynamicData') { + isCategory = isCategory || Object.values(optionsData.dynamicData.chartProperties).includes('category') + } + + let itemStyle = isCategory ? [] : {} + if (isCategory) { + arrColor.forEach(color => { + itemStyle.push({ + normal: { + color, + barBorderRadius: optionsCollapse.radius + } + }) + }) + } else { + itemStyle = { + normal: { + color: params => { + return arrColor[params.dataIndex]; + }, + barBorderRadius: optionsCollapse.radius + } + }; + } + for (const key in this.options.series) { if (this.options.series[key].type == "bar") { - this.options.series[key].itemStyle = itemStyle; + if (isCategory) { + this.options.series[key].itemStyle = itemStyle[key % itemStyle.length]; + } else { + this.options.series[key].itemStyle = itemStyle; + } } } this.options = Object.assign({}, this.options); @@ -351,6 +377,11 @@ export default { // series const series = this.options.series; + if (val.series.filter(item => item.type === 'bar').length !== series.length) { + this.options.series = val.series; + this.setOptionsColor(true) + return; + } for (const i in series) { if (series[i].type == "bar") { series[i].data = val.series[i].data; 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 12ff88fd..fca42d4d 100644 --- a/report-ui/src/views/report/bigscreen/designer/widget/widgetLinechart.vue +++ b/report-ui/src/views/report/bigscreen/designer/widget/widgetLinechart.vue @@ -330,6 +330,11 @@ export default { this.options.xAxis.data = val.xAxis; // series const series = this.options.series; + if (val.series.filter(item => item.type === 'bar').length !== series.length) { + this.options.series = val.series; + this.setOptionsColor() + return; + } for (const i in series) { if (series[i].type == "line") { series[i].data = val.series[i].data; -- Gitee From fdb54688889c83915303e09dc079e7ccb353bca9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BB=BB=E6=A0=B9=E8=83=9C?= Date: Sun, 1 Aug 2021 01:12:31 +0800 Subject: [PATCH 2/2] =?UTF-8?q?=E5=85=B3=E9=97=AD=E5=A0=86=E5=8F=A0?= =?UTF-8?q?=E6=A8=A1=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../views/report/bigscreen/designer/widget/widgetBarchart.vue | 2 ++ 1 file changed, 2 insertions(+) diff --git a/report-ui/src/views/report/bigscreen/designer/widget/widgetBarchart.vue b/report-ui/src/views/report/bigscreen/designer/widget/widgetBarchart.vue index cd8e0af1..2ce79b23 100644 --- a/report-ui/src/views/report/bigscreen/designer/widget/widgetBarchart.vue +++ b/report-ui/src/views/report/bigscreen/designer/widget/widgetBarchart.vue @@ -212,6 +212,8 @@ export default { }; if (optionsCollapse.stackShow) { series[key].stack = 'total' + } else { + delete series[key].stack; } series[key].barWidth = optionsCollapse.maxWidth; series[key].barMinHeight = optionsCollapse.minHeight; -- Gitee