feat--新增中国地图-柱形地图-动态数据解析

report-ui/src/mixins/queryform.js

@@ -1,5 +1,6 @@
 import miment from 'miment'
-import { getData } from '@/api/bigscreen'
+import {getData} from '@/api/bigscreen'
+
 export default {
   data() {
     return {
@@ -105,13 +106,13 @@ export default {
     },
     /**
      * 将url参数解析到图表参数中
-     * 1. tenantCode=aaa 
+     * 1. tenantCode=aaa
      * 2. [setCode].tenantCode=aaa
-     * 判断是否有点(.) 
+     * 判断是否有点(.)
      *  a. 没有 -> 把所有的参数全部给插入contextData
      *  b. 有 ->   点前缀的值去匹配相同的值再把对应的值插入contextData
-     * 
-     * **/ 
+     *
+     * **/
     toEchartsDataQueryParams(params) {
       const queryParams = this.deepClone(params)
       const query = this.$route.query
@@ -131,7 +132,7 @@ export default {
           }
         })
       }
-    
+
       return queryParams
     },
     // 判断对象是否包含点
@@ -180,6 +181,8 @@ export default {
         return this.radarChartFn(params.chartProperties, data)
       } else if (chartType == "widget-select") {
         return this.selectChartFn(params.chartProperties, data)
+      } else if (chartType == "widget-mapv2chart") {
+        return this.mapLLChartFn(params.chartProperties, data)
       } else {
         return data
       }
@@ -339,7 +342,7 @@ export default {
       return analysisData;
     },
     // 下拉框
-    selectChartFn(chartProperties, data){
+    selectChartFn(chartProperties, data) {
       let valueField;
       let labelField;
       for (const key in chartProperties) {
@@ -365,6 +368,27 @@ export default {
       }
       return analysisData;
     },
+    // 地图带经纬度数据解析
+    mapLLChartFn(chartProperties, data) {
+      const analysisData = [];
+      for (let i = 0; i < data.length; i++) {
+        const obj = {};
+        for (const key in chartProperties) {
+          const value = chartProperties[key];
+          if (value === "name") {
+            obj["name"] = data[i][key];
+          } else if (value === "longitude") {
+            obj["longitude"] = Number(data[i][key]);
+          } else if (value === "latitude") {
+            obj["latitude"] = Number(data[i][key]);
+          } else {
+            obj["value"] = data[i][key];
+          }
+        }
+        analysisData.push(obj);
+      }
+      return analysisData;
+    },
     setUnique(arr) {
       let newArr = [];
       arr.forEach(item => {

report-ui/src/views/bigscreenDesigner/designer/tools/configure/mapCharts/widget-bar-map.js

@@ -237,14 +237,6 @@ export const widgetBarMap = {
               placeholder: '',
               value: 20,
             },
-            /*{
-              type: 'vue-color',
-              label: '柱体颜色',
-              name: 'barColor',
-              required: false,
-              placeholder: '',
-              value: 'rgba(22,255,255, 1)'
-            },*/
             {
               type: 'el-input-number',
               label: '柱底外圆大小',
@@ -253,14 +245,6 @@ export const widgetBarMap = {
               placeholder: '',
               value: 30,
             },
-/*            {
-              type: 'vue-color',
-              label: '柱底外圆颜色',
-              name: 'barBottomOutColor',
-              required: false,
-              placeholder: '',
-              value: 'rgba(22,255,255, 1)'
-            },*/
           ],
         },
         {
@@ -282,14 +266,6 @@ export const widgetBarMap = {
               placeholder: '',
               value: 15,
             },
-           /* {
-              type: 'vue-color',
-              label: '文字颜色',
-              name: 'fontTextColor',
-              required: false,
-              placeholder: '',
-              value: '#D4EEFF'
-            },*/
             {
               type: 'el-select',
               label: '文字粗细',
@@ -333,14 +309,6 @@ export const widgetBarMap = {
               placeholder: '',
               value: 15,
             },
-            /*{
-              type: 'vue-color',
-              label: '数值颜色',
-              name: 'fontDataColor',
-              required: false,
-              placeholder: '',
-              value: '#D4EEFF'
-            },*/
             {
               type: 'el-select',
               label: '数值粗细',
@@ -466,8 +434,8 @@ export const widgetBarMap = {
         required: false,
         placeholder: '',
         relactiveDom: 'dataType',
-        chartType: 'widget-piechart',
-        dictKey: 'MAP_PROPERTIES',
+        chartType: 'widget-mapv2chart',
+        dictKey: 'MAP_V2_PROPERTIES',
         relactiveDomValue: 'dynamicData',
         value: '',
       },

report-ui/src/views/bigscreenDesigner/designer/widget/map/widgetBarMap.vue

@@ -50,7 +50,7 @@ export default {
             layoutSize: "80%",
             label: {
               emphasis: {
-                show: true,
+                show: false,
                 color: "white",
               },
             },
@@ -86,7 +86,7 @@ export default {
             aspectScale: 0.75,
             type: 'map',
             map: 'china',
-            roam: true,
+            //roam: true,
             effect: {
               show: false,
               period: 6,
@@ -318,8 +318,8 @@ export default {
     // 修改图标options属性
     editorOptions() {
       this.setOptionsTitle();
-      this.setOptionsMap();
       this.setOptionsTooltip();
+      this.setOptionsMap();
       this.setOptionsData();
     },
     // 标题设置
@@ -344,6 +344,27 @@ export default {
       };
       this.options.title = title;
     },
+    // tooltip 设置
+    setOptionsTooltip() {
+      const optionsSetup = this.optionsSetup;
+      const tooltip = {
+        trigger: "item",
+        show: true,
+        enterable: true,
+        textStyle: {
+          color: optionsSetup.tipsColor,
+          fontSize: optionsSetup.tipsFontSize,
+        },
+        formatter: function (params) {
+          if (params.seriesType == 'scatter') {
+            return params.data.name + "" + params.data.value[2];
+          } else {
+            return params.name;
+          }
+        },
+      };
+      this.options.tooltip = tooltip;
+    },
     // 地图设置
     setOptionsMap() {
       const optionsSetup = this.optionsSetup;
@@ -357,7 +378,7 @@ export default {
           fontSize: optionsSetup.fontSizeMap,
         },
         emphasis: {
-          show: true,
+          show: false,
         },
       }
       const itemStyle = {
@@ -410,7 +431,7 @@ export default {
       const maxValue = Math.max.apply(null, val.map(item => item.value))
       return heightRate / maxValue;
     },
-    // 柱体的主干
+    // 计算柱体的主干
     calScatterTrunk(val, heightRate) {
       return val.map((item) => {
         return {
@@ -418,13 +439,13 @@ export default {
         }
       })
     },
-    // 柱体顶部
+    // 计算柱体顶部
     calScatterTop(val, heightRate) {
       return val.map((item) => {
         return [geoCoordMap[item.name][0], geoCoordMap[item.name][1] + item.value * this.calMaxHeight(val, heightRate), item.value]
       })
     },
-    // 柱体的底部
+    // 计算柱体的底部
     calScatterBottom(val) {
       return val.map((item) => {
         return {
@@ -433,27 +454,6 @@ export default {
         }
       })
     },
-    // tooltip 设置
-    setOptionsTooltip() {
-      const optionsSetup = this.optionsSetup;
-      const tooltip = {
-        trigger: "item",
-        show: true,
-        enterable: true,
-        textStyle: {
-          color: optionsSetup.tipsColor,
-          fontSize: optionsSetup.tipsFontSize,
-        },
-        formatter: function (params) {
-          if (params.seriesType == 'scatter') {
-            return params.data.name + "" + params.data.value[2];
-          } else {
-            return params.name;
-          }
-        },
-      };
-      this.options.tooltip = tooltip;
-    },
     // 柱体主干
     getOptionsBarTrunk(optionsSetup, arrColor, allData, heightRate) {
       const barTrunk = {
@@ -635,7 +635,6 @@ export default {
         longitude[i] = val[i].longitude;
         value[i] = val[i].value;
       }
-      // console.log(Object.keys(val[0]))
       let allData = [];
       for (const i in name) {
         geoCoordMap[name[i]] = [latitude[i], longitude[i]]
@@ -678,28 +677,45 @@ export default {
       });
     },
     renderingFn(val) {
-      this.options.series[0]["data"] = val;
+      let name = [];
+      let latitude = [];
+      let longitude = [];
+      let value = [];
+      for (const i in val) {
+        name[i] = val[i].name;
+        latitude[i] = val[i].latitude;
+        longitude[i] = val[i].longitude;
+        value[i] = val[i].value;
+      }
+      for (const i in val) {
+        name[i] = val[i].name;
+        latitude[i] = val[i].latitude;
+        longitude[i] = val[i].longitude;
+        value[i] = val[i].value;
+      }
+      let allData = [];
+      for (const i in name) {
+        geoCoordMap[name[i]] = [latitude[i], longitude[i]]
+        const obj = {
+          name: name[i],
+          value: value[i]
+        }
+        allData.push(obj)
+      }
       const optionsSetup = this.optionsSetup;
-      const label = this.options.series[1]["label"];
-      const normal = {
-        show: true,
-        color: "#fff",
-        fontWeight: "bold",
-        position: "inside",
-        formatter: function (para) {
-          return "{cnNum|" + para.data.value[2] + "}";
-        },
-        rich: {
-          cnNum: {
-            fontSize: optionsSetup.fontDataSize,
-            color: optionsSetup.fontDataColor,
-            fontWeight: optionsSetup.fontDataWeight,
-          },
-        },
-      };
-      const data = convertData(val);
-      this.options.series[1]["data"] = data;
-      label["normal"] = normal;
+      const heightRate = optionsSetup.heightRate;
+      // 颜色设置
+      const customColor = optionsSetup.customColor;
+      if (!customColor) return;
+      const arrColor = [];
+      for (const i in val) {
+        arrColor.push(customColor[i % customColor.length].color)
+      }
+
+      this.$set(this.options.series,1,this.getOptionsBarTrunk(optionsSetup, arrColor, allData, heightRate))
+      this.$set(this.options.series,2,this.getOptionsBarTop(optionsSetup, arrColor, allData, heightRate))
+      this.$set(this.options.series,3,this.getOptionsBarBottom(optionsSetup, arrColor, allData))
+      this.$set(this.options.series,4,this.getOptionsBarBottomOut(optionsSetup, arrColor, allData))
     },
   },
 };