bug fixed

src/pages/index/components/business_overview.vue

@@ -6,7 +6,7 @@
         <piechart
           class="model-pie-body"
           id="chart1"
-          :radiusArr="['30%', '70%']"
+          :radiusArr="['30%', '50%']"
           :roseType = "false"
           :colorArr="modelPieColor"
           :labelFormat="['{name|{b}}', '{sub|{@value} {d}%}', '{hr|}']"

src/pages/index/components/park_bahavior.vue

@@ -32,12 +32,12 @@
     </el-form>
     <br>
     <div class="charts" style="display: flex">
-      <div style="width: 50%;height: 300px;">
+      <div style="width: 50%;height: 320px;">
         <h5 style="color: white">停车时长分析</h5>
         <piechart
           class="model-pie-body"
           id="chart1"
-          :radiusArr="['30%', '70%']"
+          :radiusArr="['30%', '50%']"
           :roseType = "false"
           :colorArr="modelPieColor"
           :labelFormat="['{name|{b}}', '{sub|{@value}辆 {d}%}', '{hr|}']"
@@ -45,7 +45,7 @@
           :encode="{ itemName: 'name', value: 'value' }"
         />
       </div>
-      <div style="width: 50%;height: 300px;">
+      <div style="width: 50%;height: 320px;">
         <h5 style="color: white">停车时段分析</h5>
         <linechart
           :autoStop="false"

src/pages/index/components/parking_area.vue

@@ -39,6 +39,7 @@
           :left="40"
           :legendTop="0"
           yAxisName="(%)"
+          :rotate="30"
           :dataset="linedata"
           :tooltipFormat="lineTooltipFormat1"
           :encode="[
@@ -50,8 +51,8 @@
     </div>
     <div style="display: flex; justify-content: space-between;margin-top: 5%">
       <div style="width: 100%; height: 500px;">
-        <div align="center" style="color: white">停车热度时空分布</div>
-        <div class="bottom" id="map"></div>
+        <div align="center" style="color: white;margin-bottom: 10px;">停车热度时空分布</div>
+        <div id="map" style="width: 100%; height: 600px;"/>
       </div>
     </div>
   </div>
@@ -59,11 +60,10 @@
 <script>
 import linechart from "@/components/lineChart";
 import barchart from "@/components/barChart";
-import * as echarts from 'echarts';
-import * as geoJson from '../../../util/411100.json';
 import api from '@/api/article_z'
 import options from '@/util/options'
-
+import * as echarts from 'echarts'
+import 'echarts-extension-amap'
 
 export default {
   components: {
@@ -77,47 +77,78 @@ export default {
       },
       districtOptions: options.districtOptions,
       option: {
-        backgroundColor: '#0c0c0c',
-        visualMap: {
-          bottom: 100,
-          left: 100,
-          min: 0,
-          max: 100,
-          color: ['#ff4601', '#fffc00', '#87cffa'],
-          calculable: true,
-          textStyle: {
-            color: '#fff',
-            fontSize: 12
-          },
-          seriesIndex: 0
+        amap: {
+          viewMode: '3D',
+          center: [114.02, 33.58],
+          zoom: 10,
+          resizeEnable: true,
+          //使用自定义主题
+          mapStyle: 'amap://styles/grey',
+          renderOnMoving: true,
+          largeMode: false
+
         },
-        geo: {
-          map: 'luohe',
-          show: true,
-          roam: false,
-          label: {
-            emphasis: {
+        tooltip: {
+          trigger: 'item'
+        },
+        animation: true,
+        series: [
+          {
+            name: 'PM2.5',
+            type: 'scatter',
+            coordinateSystem: 'amap',
+            data: [],
+            symbolSize: function (val) {
+              return val[2] / 10;
+            },
+            encode: {
+              value: 2
+            },
+            label: {
+              formatter: '{b}',
+              position: 'right',
               show: false
-            }
-          },
-          itemStyle: {
-            normal: {
-              areaColor: '#17439a',
-              borderColor: '#fff'
+            },
+            itemStyle: {
+              normal: {
+                color: '#00c1de'
+              }
             },
             emphasis: {
-              areaColor: '#17439a',
-              borderColor: '#fff'
+              label: {
+                show: true
+              }
             }
+          },
+          {
+            name: 'Top 5',
+            type: 'effectScatter',
+            coordinateSystem: 'amap',
+            data: [],
+            symbolSize: function (val) {
+              return val[2] / 10;
+            },
+            encode: {
+              value: 2
+            },
+            showEffectOn: 'render',
+            rippleEffect: {
+              brushType: 'stroke'
+            },
+            hoverAnimation: true,
+            label: {
+              formatter: '{b}',
+              position: 'right',
+              show: true
+            },
+            itemStyle: {
+              color: '#f00',
+              shadowBlur: 10,
+              shadowColor: '#333'
+            },
+            zlevel: 1
           }
-        },
-        series: [{
-          name: 'AQI',
-          type: 'heatmap',
-          coordinateSystem: 'geo',
-          blurSize: 40,
-          data: []
-        }]
+        ]
       },
       linedata: [],
       bardata: [],
@@ -125,6 +156,7 @@ export default {
   },
   mounted() {
     this.queryAll()
+
   },
   watch: {
 
@@ -167,23 +199,104 @@ export default {
       return `<div class="${type==='bar' ? 'bar-tooltip-dz' : type==='line' ? 'line-tooltip-dz' : ''}">${params[0].seriesName}:${data.hs || "--"}%</div>`;
     },
     getMapData() {
-      api.queryParkingArea_Tcrdskfb({...this.formInline}).then(res => {
-        let data = res.data || []
-        let areaData = [];
-        data.map(item => { //扩大热力图效果
-          areaData.push(...new Array(3).fill(item))
-        })
-        let mapMax = Math.max(...data.map(item => item[2]))
-        let mapMin = Math.min(...data.map(item => item[2]))
-        let chart = echarts.init(document.getElementById("map"));
-        echarts.registerMap("luohe", geoJson);
-
-        // echarts.registerMap('china', china)
-        this.option.series[0].data = areaData;
-        this.option.visualMap.min = mapMin;
-        this.option.visualMap.max = mapMax;
-        chart.setOption(this.option);
-      })
+      let myChart = echarts.init(document.getElementById("map"));
+      var data = [
+        { name: '车场A', value: 200 },
+        { name: '车场B', value: 100 },
+      ];
+      var geoCoordMap = {
+        '车场A': [113.97421800, 33.57179100],
+        '车场B': [114.03213800, 33.56496300],
+      };
+      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'
+              }
+            },
+            emphasis: {
+              label: {
+                show: true
+              }
+            }
+          },
+          {
+            name: 'Top 5',
+            type: 'effectScatter',
+            coordinateSystem: 'amap',
+            data: convertData(data.sort(function (a, b) {
+              return b.value - a.value;
+            }).slice(0, 6)),
+            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);
     }
   }
 }
@@ -199,7 +312,7 @@ export default {
 </style>
 <style lang="less" scoped>
   .bottom {
-    height: 100%;
+    height: 600px;
     width: 100%;
   }
   /deep/ .el-input__inner {

src/pages/index/index.html

@@ -5,7 +5,9 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <title>监管平台管理</title>
     <script src="static/mung-local-config.js"></script>
-    <script src="static/jquery-3.1.0.min.js"></script>
+    <script src="static/jquery-3.1.0.min.js"></script>   <!-- 在index.html中添加 -->
+    <script src="https://webapi.amap.com/maps?v=2.0&key=f1a27c94cbb2e9163a60a67b113245da"></script>
+
   </head>
   <body>
     <div id="index"></div>