From b69dc41fd42584679937e7840ea5e74ad78fb488 Mon Sep 17 00:00:00 2001 From: qianming Date: Mon, 16 Aug 2021 16:34:03 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A0=86=E5=8F=A0=E5=9B=BE=E7=94=9F=E6=95=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- report-ui/src/mixins/queryform.js | 51 +++++++++- .../widget/bar/widgetBarStackChart.vue | 96 ++++++++++--------- 2 files changed, 99 insertions(+), 48 deletions(-) diff --git a/report-ui/src/mixins/queryform.js b/report-ui/src/mixins/queryform.js index 3ec8d289..5e48fde5 100644 --- a/report-ui/src/mixins/queryform.js +++ b/report-ui/src/mixins/queryform.js @@ -128,7 +128,7 @@ export default { return this.widgettext(params.chartProperties, data) } else if (chartType == "widget-stackchart") { return this.stackChartFn(params.chartProperties, data) - }else{ + } else { return data } }, @@ -161,8 +161,37 @@ export default { return ananysicData; }, //堆叠图 - stackChartFn(chartProperties, data){ + stackChartFn(chartProperties, data) { + const ananysicData = {}; + const series = []; + //全部字段字典值 + const types = Object.values(chartProperties) + //x轴字段、y轴字段名 + const xAxisField = Object.keys(chartProperties)[types.indexOf('xAxis')] + const yAxisField = Object.keys(chartProperties)[types.indexOf('yAxis')] + //x轴数值去重，y轴去重 + const xAxisList = this.setUnique(data.map(item => item[xAxisField])) + const yAxisList = this.setUnique(data.map(item => item[yAxisField])) + const dataGroup = this.setGroupBy(data, yAxisField) + for (const key in chartProperties) { + if (chartProperties[key] !== 'yAxis' && !chartProperties[key].startsWith('xAxis')) { + Object.keys(dataGroup).forEach(item => { + const data = new Array(yAxisList.length).fill(0) + dataGroup[item].forEach(res => { + data[xAxisList.indexOf(res[xAxisField])]= res[key] + }) + series.push({ + name: yAxisList[item], + type: chartProperties[key], + data, + }) + }) + } + } + ananysicData["xAxis"] = xAxisList; + ananysicData["series"] = series; + return ananysicData; }, // 饼图、漏斗图 piechartFn(chartProperties, data) { @@ -215,6 +244,24 @@ export default { } return ananysicData; }, + setUnique(arr) { + let newArr = []; + arr.forEach(item => { + return newArr.includes(item) ? '' : newArr.push(item); + }); + return newArr; + }, + setGroupBy(array, name) { + const groups = {} + array.forEach(function (o) { + const group = JSON.stringify(o[name]) + groups[group] = groups[group] || [] + groups[group].push(o) + }) + return Object.keys(groups).map(function (group) { + return groups[group] + }) + }, }, watch: { 'selectInput.keyname'(newVal, oldVal) { diff --git a/report-ui/src/views/report/bigscreen/designer/widget/bar/widgetBarStackChart.vue b/report-ui/src/views/report/bigscreen/designer/widget/bar/widgetBarStackChart.vue index 4413748e..93d01f35 100644 --- a/report-ui/src/views/report/bigscreen/designer/widget/bar/widgetBarStackChart.vue +++ b/report-ui/src/views/report/bigscreen/designer/widget/bar/widgetBarStackChart.vue @@ -289,9 +289,9 @@ export default { optionsData.dataType == "staticData" ? this.staticDataFn(optionsData.staticData, optionsSetup) : this.dynamicDataFn( - optionsData.dynamicData, - optionsData.refreshTime, - optionsSetup + optionsData.dynamicData, + optionsData.refreshTime, + optionsSetup ); }, //去重 @@ -305,7 +305,7 @@ export default { //静态数据 staticDataFn(val) { const optionsSetup = this.optionsSetup; - const series = this.options.series; + const series = []; let xAxisList = [] let yAxisList = [] for (const i in val) { @@ -315,7 +315,7 @@ export default { xAxisList = this.setUnique(xAxisList) // x轴 0725 0726 0727 yAxisList = this.setUnique(yAxisList) // y轴 A B C for (const i in yAxisList) { - const data = new Array(xAxisList.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 @@ -328,9 +328,14 @@ export default { series.push({ name: yAxisList[i], type: "bar", - data: data + data: data , + barGap: "0%", + itemStyle: { + borderRadius: null + } }) } + this.options.series = series if (optionsSetup.verticalShow) { this.options.xAxis.data = []; this.options.yAxis.data = xAxisList; @@ -342,48 +347,47 @@ export default { this.options.xAxis.type = "category"; this.options.yAxis.type = "value"; } - } - + }, // 动态数据 - /* dynamicDataFn(val, refreshTime, optionsSetup) { - if (!val) return; - if (this.ispreview) { - this.getEchartData(val, optionsSetup); - this.flagInter = setInterval(() => { - this.getEchartData(val, optionsSetup); - }, refreshTime); - } else { - this.getEchartData(val, optionsSetup); - } - }, - getEchartData(val, optionsSetup) { - const data = this.queryEchartsData(val); - data.then(res => { - this.renderingFn(optionsSetup, res); - }); - }, - renderingFn(optionsSetup, val) { - // x轴 - if (optionsSetup.verticalShow) { - this.options.xAxis.data = []; - this.options.yAxis.data = val.xAxis; - this.options.xAxis.type = "value"; - this.options.yAxis.type = "category"; - } else { - this.options.xAxis.data = val.xAxis; - this.options.yAxis.data = []; - this.options.xAxis.type = "category"; - this.options.yAxis.type = "value"; - } + dynamicDataFn(val, refreshTime, optionsSetup) { + if (!val) return; + if (this.ispreview) { + this.getEchartData(val, optionsSetup); + this.flagInter = setInterval(() => { + this.getEchartData(val, optionsSetup); + }, refreshTime); + } else { + this.getEchartData(val, optionsSetup); + } + }, + getEchartData(val, optionsSetup) { + const data = this.queryEchartsData(val); + data.then(res => { + this.renderingFn(optionsSetup, res); + }); + }, + renderingFn(optionsSetup, val) { + // x轴 + if (optionsSetup.verticalShow) { + this.options.xAxis.data = []; + this.options.yAxis.data = val.xAxis; + this.options.xAxis.type = "value"; + this.options.yAxis.type = "category"; + } else { + this.options.xAxis.data = val.xAxis; + this.options.yAxis.data = []; + this.options.xAxis.type = "category"; + this.options.yAxis.type = "value"; + } - // series - const series = this.options.series; - for (const i in series) { - if (series[i].type == "bar") { - series[i].data = val.series[i].data; - } - } - }*/ + const series = this.options.series; + for (const i in series) { + if (series[i].type == "bar") { + series[i].name = val.series[i].name; + series[i].data = val.series[i].data; + } + } + } } };