居民统计

src/project/saas/AppResidentStatistics/components/People.vue

@@ -0,0 +1,210 @@
+<template>
+  <div class="People">
+    <div class="title">
+      居民好友统计<span>（统计数据为去重后的数据）</span>
+    </div>
+    <div class="tab-content">
+      <div class="item" v-for="(item, index) in friendList" :key="index">
+        <p>{{ item.label }}</p>
+        <h3>{{ item.value }}</h3>
+      </div>
+    </div>
+    <div class="chart-content" id="chartFriend"></div>
+    <div class="title">
+      居民群统计<span>（统计数据为去重后的数据）</span>
+    </div>
+    <div class="tab-content">
+      <div class="item" v-for="(item, index) in groupList" :key="index">
+        <p>{{ item.label }}</p>
+        <h3>{{ item.value }}</h3>
+      </div>
+    </div>
+    <div class="chart-content" id="chartGroup"></div>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import echarts from 'echarts'
+export default {
+  name: "People",
+  data() {
+    return {
+      friendList: [
+        {
+          label: '居民好友',
+          value: '235,625'
+        },
+        {
+          label: '昨日新增',
+          value: '235'
+        },
+        {
+          label: '昨日流失',
+          value: '18'
+        }
+      ],
+      groupList: [
+        {
+          label: '居民群',
+          value: '235'
+        },
+        {
+          label: '居民群',
+          value: '235,625'
+        },
+        {
+          label: '昨日新增',
+          value: '235'
+        },
+        {
+          label: '昨日流失',
+          value: '18'
+        }
+      ],
+      echartDataFriend: null,
+      echartDataGroup: null
+    }
+  },
+  computed: { ...mapState(['user']) },
+  methods: {
+    chartInit() {
+      this.echartDataFriend = echarts.init(document.getElementById('chartFriend'))
+      this.echartDataGroup = echarts.init(document.getElementById('chartGroup'))
+      var option = {
+        grid: {
+          left: '5%',
+          right: '5%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          axisLine: {
+            lineStyle: {
+              color: '#E1E5EF', //x轴的颜色
+              width: 1, //轴线的宽度
+            },
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: '#666',
+            },
+          },
+          data: ['4月', '5月', '6月', '7月', '8月',]
+        },
+        yAxis: {
+          axisLine:{       //y轴
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: '#666',
+            },
+          },
+          type: 'value',
+          minInterval: 50,
+        },
+        tooltip: {
+          trigger: 'axis'
+        },
+        series: [
+          {
+            data: [155, 130, 120, 160, 120, 130, 110],
+            type: 'line',
+            areaStyle: {//覆盖区域的渐变色
+            	normal: {
+            		color: {
+                  type: 'linear',x: 0,y: 0,x2: 0,y2: 1,
+                  colorStops: [
+                    {
+                      offset: 0, color: 'rgba(58,132,255, 0.8)' // 0% 处的颜色
+                    },
+                    {
+                      offset: 1, color: 'rgba(58,132,255, 0)' // 100% 处的颜色
+                    }
+                  ],
+                  global: false // 缺省为 false
+		       		  },
+            	}
+            },
+            lineStyle: {
+              normal: {
+                color: '#2891FF'
+              }
+            },
+            itemStyle : {
+              normal : {
+                color:'#2891FF',
+              }
+            }
+          }
+        ]
+      };
+      this.echartDataFriend.setOption(option)
+       this.echartDataGroup.setOption(option)
+    },
+  },
+  created() {
+    this.$nextTick(() => {
+      this.chartInit()
+    })
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.People {
+  padding: 0 30px;
+  .title {
+    font-size: 32px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #333;
+    line-height: 44px;
+    padding: 40px 0 24px 0;
+    span {
+      font-size: 26px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      color: #999;
+      line-height: 36px;
+    }
+  }
+  .tab-content {
+    display: flex;
+    padding: 24px 0;
+    background-color: #fff;
+    border-radius: 16px;
+    margin-bottom: 16px;
+    .item {
+      flex: 1;
+      text-align: center;
+      p {
+        font-size: 24px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        color: #666;
+        line-height: 48px;
+      }
+      h3 {
+        font-size: 36px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #000;
+        line-height: 48px;
+      }
+    }
+  }
+  .chart-content {
+    width: 100%;
+    height: 517px;
+    background-color: #fff;
+    border-radius: 8px;
+  }
+}
+</style>