From 0bfdb5f18dce9cddebcd84dc50e532a0ecea65a5 Mon Sep 17 00:00:00 2001 From: qianming Date: Thu, 21 Apr 2022 13:44:58 +0800 Subject: [PATCH] =?UTF-8?q?=E7=83=AD=E5=8A=9B=E5=9B=BE=E6=96=B0=E5=A2=9E?= =?UTF-8?q?=E5=8A=A8=E6=80=81=E6=95=B0=E6=8D=AE=E8=A7=A3=E6=9E=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- report-ui/src/mixins/queryform.js | 25 ++- .../tools/configure/widget-heatmap.js | 182 +++++++++--------- .../designer/widget/heatmap/widgetHeatmap.vue | 18 +- 3 files changed, 111 insertions(+), 114 deletions(-) diff --git a/report-ui/src/mixins/queryform.js b/report-ui/src/mixins/queryform.js index d4bd93a2..bdcdb0c3 100644 --- a/report-ui/src/mixins/queryform.js +++ b/report-ui/src/mixins/queryform.js @@ -122,13 +122,13 @@ export default { chartType == "widget-funnel" ) { return this.piechartFn(params.chartProperties, data); - } else if (chartType == "widget-text") { + } else if (chartType == "widget-text") { return this.widgettext(params.chartProperties, data) } else if (chartType == "widget-stackchart") { return this.stackChartFn(params.chartProperties, data) - } else if (chartType == "widget-heatmap") { - return this.heatmapChartFn(params.chartProperties, data) - }else { + } else if (chartType == "widget-coord") { + return this.coordChartFn(params.chartProperties, data) + } else { return data } }, @@ -180,7 +180,7 @@ export default { Object.keys(dataGroup).forEach(item => { const data = new Array(xAxisList.length).fill(0) dataGroup[item].forEach(res => { - data[xAxisList.indexOf(res[xAxisField])]= res[key] + data[xAxisList.indexOf(res[xAxisField])] = res[key] }) series.push({ name: yAxisList[item], @@ -227,18 +227,25 @@ export default { return ananysicData; }, // 坐标系数据解析 - heatmapChartFn(chartProperties,data){ + coordChartFn(chartProperties, data) { const ananysicData = {}; - const series = []; + let series = []; //全部字段字典值 const types = Object.values(chartProperties) - //x轴字段、y轴字段名 + //x轴字段、y轴字段、数值字段名 const xAxisField = Object.keys(chartProperties)[types.indexOf('xAxis')] const yAxisField = Object.keys(chartProperties)[types.indexOf('yAxis')] + const dataField = Object.keys(chartProperties)[types.indexOf('series')] //x轴数值去重，y轴去重 const xAxisList = this.setUnique(data.map(item => item[xAxisField])) const yAxisList = this.setUnique(data.map(item => item[yAxisField])) - + ananysicData["xAxis"] = xAxisList; + ananysicData["yAxis"] = yAxisList; + for (const i in data) { + series[i] = [data[i][xAxisField], data[i][yAxisField], data[i][dataField]]; + } + ananysicData["series"] = series; + return ananysicData; }, setUnique(arr) { let newArr = []; diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-heatmap.js b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-heatmap.js index d0b267d0..d1abf4c0 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-heatmap.js +++ b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-heatmap.js @@ -295,96 +295,6 @@ export const widgetHeatmap = { }, ], }, - { - name: '图设置', - list: [ - { - type: 'el-switch', - label: '图例', - name: 'isShowLegend', - required: false, - placeholder: '', - value: false, - }, - { - type: 'el-input-number', - label: '最小值', - name: 'dataMin', - required: false, - placeholder: '', - value: 0, - }, - { - type: 'el-input-number', - label: '最大值', - name: 'dataMax', - required: false, - placeholder: '', - value: 5000, - }, - { - 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: '数值设定', list: [ @@ -482,6 +392,96 @@ export const widgetHeatmap = { }, ], }, + { + name: '图设置', + list: [ + { + type: 'el-switch', + label: '图例', + name: 'isShowLegend', + required: false, + placeholder: '', + value: false, + }, + { + type: 'el-input-number', + label: '最小值', + name: 'dataMin', + required: false, + placeholder: '', + value: 0, + }, + { + type: 'el-input-number', + label: '最大值', + name: 'dataMax', + required: false, + placeholder: '', + value: 5000, + }, + { + 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: '自定义配色', list: [ @@ -643,7 +643,7 @@ export const widgetHeatmap = { required: false, placeholder: '', relactiveDom: 'dataType', - chartType: 'widget-heatmap', + chartType: 'widget-coord', relactiveDomValue: 'dynamicData', dictKey: 'COORD_PROPERTIES', value: '', diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/heatmap/widgetHeatmap.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/heatmap/widgetHeatmap.vue index 81f02056..47dd9268 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/widget/heatmap/widgetHeatmap.vue +++ b/report-ui/src/views/bigscreenDesigner/designer/widget/heatmap/widgetHeatmap.vue @@ -346,23 +346,13 @@ export default { getEchartData(val) { const data = this.queryEchartsData(val); data.then((res) => { - this.renderingFn( - res.map((item) => { - return [item.x, item.y, item.data]; - }) - ); + this.renderingFn(res); }); }, renderingFn(val) { - let x = 0, - y = 0; - val.forEach((element) => { - x = element[0] > x ? element[0] : x; - y = element[1] > y ? element[1] : y; - }); - this.options.xAxis.data = [...Array(x + 1).keys()]; - this.options.yAxis.data = [...Array(y + 1).keys()]; - this.options.series[0].data = val; + this.options.xAxis.data = val.xAxis; + this.options.yAxis.data = val.yAxis; + this.options.series[0].data = val.series; }, }, };