统计

src/project/saas/AppDataStatistics/components/resident.vue

@@ -19,7 +19,8 @@
     <div class="ageDistribution">
       <h3>年龄分布</h3>
       <div class="ageBox">
-        <div id="ageEcharts"></div>
+        <div id="ageEcharts" v-if="ageFlag"></div>
+        <AiEmpty style="padding-top: 10px;" description="暂无数据" v-else></AiEmpty>
       </div>
     </div>
     <!-- 男女比例 -->
@@ -44,6 +45,7 @@ export default {
       specialPeople: {},
       specialFlag: true,
       ageArray: [],
+      ageFlag: true,
       sexArray: [],
       sexFlag: true,
       cardArray: ['居民总数','本地居民','流动人口']
@@ -68,8 +70,10 @@ export default {
               this.specialFlag = false
             }
           }
-          this.ageArray = res.data.年龄层次
-          this.aexArray = res.data.男女比例
+          this.ageArray = res.data.年龄层次.map(v=> v.v2)
+          this.ageFlag = !this.ageArray.every(e=> e==0)
+          this.sexArray = res.data.男女比例.map(v=> v.v2)
+          this.sexFlag = !this.sexArray.every(e=> e==0)
         }
       })
     },
@@ -159,16 +163,15 @@ export default {
         },
         series: [
           {
-            data: [136, 195, 162, 138, {
-              value: 98,
-              itemStyle: {
-                color: '#F3A963'
-              }
-            }],
+            data: this.ageArray,
             type: 'bar',
             itemStyle: {
               normal: {
-                color: "#3975C6",
+                // 每个柱子的颜色
+                color: function(params) {
+                  var colorList = ['#3975C6','#3975C6', '#3975C6', '#3975C6', '#F3A963',];
+                  return colorList[params.dataIndex]
+                },
                 label: {
                   show: true,  //开启显示
                   position: 'top',    //在上方显示