修改区域停车主题

src/pages/index/components/parking_area.vue

@@ -80,7 +80,7 @@ export default {
         amap: {
           viewMode: '3D',
           center: [114.02, 33.58],
-          zoom: 10,
+          zoom: 12,
           resizeEnable: true,
           //使用自定义主题
           mapStyle: 'amap://styles/grey',
@@ -200,114 +200,101 @@ export default {
     },
     getMapData() {
       api.queryParkingArea_Tcrdskfb({...this.formInline}).then(res => {
-        console.log(res, '===9999====')
-      });
+        let resData = res.data || []
+        let data = resData.map(item => ({name: item[2], value: item[3]}))
+        let geoCoordMap = {}
+        resData.map(item => {geoCoordMap[item[2]] = [item[0],item[1]]})
         let myChart = echarts.init(document.getElementById("map"));
-      var data = [
-        { name: '车场A', value: 200 },
-        { name: '车场B', value: 100 },
-        { name: '车场C', value: 200 },
-        { name: '车场D', value: 100 },
-        { name: '车场E', value: 200 },
-        { name: '车场F', value: 300 },
-      ];
-      var geoCoordMap = {
-        '车场A': [113.97421800, 33.57179100],
-        '车场B': [114.03585100,33.56888800],
-        '车场C': [114.03213800, 33.56496300],
-        '车场D': [114.01477400, 33.59063500],
-        '车场E': [114.03300900, 33.57035200],
-        '车场F': [114.06586500, 33.56006500],
-      };
-      var convertData = function (data) {
-        var res = [];
-        for (var i = 0; i < data.length; i++) {
-          var geoCoord = geoCoordMap[data[i].name];
-          if (geoCoord) {
-            res.push({
-              name: data[i].name,
-              value: geoCoord.concat(data[i].value)
-            });
+        var convertData = function (data) {
+          var res = [];
+          for (var i = 0; i < data.length; i++) {
+            var geoCoord = geoCoordMap[data[i].name];
+            if (geoCoord) {
+              res.push({
+                name: data[i].name,
+                value: geoCoord.concat(data[i].value)
+              });
+            }
           }
-        }
-        return res;
-      };
-      let option = {
-        amap: {
-          viewMode: '3D',
-          center: [114.02, 33.58],
-          zoom: 10,
-          resizeEnable: true,
-          //使用自定义主题
-          mapStyle: 'amap://styles/grey',
-          renderOnMoving: true,
-          largeMode: false
-        },
-        tooltip: {
-          trigger: 'item'
-        },
-        animation: true,
-        series: [
-          {
-            name: 'PM2.5',
-            type: 'scatter',
-            coordinateSystem: 'amap',
-            data: convertData(data),
-            symbolSize: function (val) {
-              return val[2] / 10;
-            },
-            encode: {
-              value: 2
-            },
-            label: {
-              formatter: '{b}',
-              position: 'right',
-              show: false
-            },
-            itemStyle: {
-              normal: {
-                color: '#00c1de'
+          return res;
+        };
+        let option = {
+          amap: {
+            viewMode: '3D',
+            center: [114.02, 33.58],
+            zoom: 10,
+            resizeEnable: true,
+            //使用自定义主题
+            mapStyle: 'amap://styles/grey',
+            renderOnMoving: true,
+            largeMode: false
+          },
+          tooltip: {
+            trigger: 'item'
+          },
+          animation: true,
+          series: [
+            {
+              name: '停车热度',
+              type: 'scatter',
+              coordinateSystem: 'amap',
+              data: convertData(data),
+              symbolSize: function (val) {
+                return val[2] / 100;
+              },
+              encode: {
+                value: 2
+              },
+              label: {
+                formatter: '{b}',
+                position: 'right',
+                show: false
+              },
+              itemStyle: {
+                normal: {
+                  color: '#00c1de'
+                }
+              },
+              emphasis: {
+                label: {
+                  show: true
+                }
               }
             },
-            emphasis: {
+            {
+              name: 'Top 5',
+              type: 'effectScatter',
+              coordinateSystem: 'amap',
+              data: convertData(data.sort(function (a, b) {
+                return b.value - a.value;
+              }).slice(0, 5)),
+              symbolSize: function (val) {
+                return val[2] / 100;
+              },
+              encode: {
+                value: 2
+              },
+              showEffectOn: 'render',
+              rippleEffect: {
+                brushType: 'stroke'
+              },
+              hoverAnimation: true,
               label: {
-                show: true
-              }
+                formatter: '{b}',
+                position: 'right',
+                show: false
+              },
+              itemStyle: {
+                color: '#f00',
+                shadowBlur: 10,
+                shadowColor: '#333'
+              },
+              zlevel: 1
             }
-          },
-          {
-            name: 'Top 5',
-            type: 'effectScatter',
-            coordinateSystem: 'amap',
-            data: convertData(data.sort(function (a, b) {
-              return b.value - a.value;
-            }).slice(0, 5)),
-            symbolSize: function (val) {
-              return val[2] / 10;
-            },
-            encode: {
-              value: 2
-            },
-            showEffectOn: 'render',
-            rippleEffect: {
-              brushType: 'stroke'
-            },
-            hoverAnimation: true,
-            label: {
-              formatter: '{b}',
-              position: 'right',
-              show: false
-            },
-            itemStyle: {
-              color: '#f00',
-              shadowBlur: 10,
-              shadowColor: '#333'
-            },
-            zlevel: 1
-          }
-        ]
-      };
-      myChart.setOption(option);
+          ]
+        };
+        myChart.setOption(option);
+      });
     }
   }
 }