热力图新增动态数据解析

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") {
+      } else if (chartType == "widget-coord") {
-        return this.heatmapChartFn(params.chartProperties, data)
+        return this.coordChartFn(params.chartProperties, data)
-      }else {
+      } 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 = [];

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: '',

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(
+        this.renderingFn(res);
-          res.map((item) => {
-            return [item.x, item.y, item.data];
-          })
-        );
       });
     },
     renderingFn(val) {
-      let x = 0,
+      this.options.xAxis.data = val.xAxis;
-        y = 0;
+      this.options.yAxis.data = val.yAxis;
-      val.forEach((element) => {
+      this.options.series[0].data = val.series;
-        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;
     },
   },
 };