持续集成分支

library/project/saas/AppResidentStatistics/components/Files.vue

@@ -0,0 +1,170 @@
+<template>
+  <div class="Files">
+    <div class="title">特殊人群</div>
+    <div class="chart-content" style="height: 264px;" id="echartDataSpecial"></div>
+    <div class="title">年龄分布</div>
+    <div class="chart-content" style="height: 244px;" id="echartDataAge"></div>
+    <div class="title">男女比例</div>
+    <div class="chart-content" style="height: 264px;" id="echartDataSex"></div>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import echarts from 'echarts'
+export default {
+  name: "Files",
+  data() {
+    return {
+      echartDataSpecial: null,
+      echartDataAge: null,
+      echartDataSex: null
+    }
+  },
+  computed: { ...mapState(['user']) },
+  methods: {
+    chartInit() {
+      this.echartDataSpecial = echarts.init(document.getElementById('echartDataSpecial'))
+      this.echartDataAge = echarts.init(document.getElementById('echartDataAge'))
+      this.echartDataSex = echarts.init(document.getElementById('echartDataSex'))
+      var option = {
+        tooltip: {
+          trigger: 'item'
+        },
+        series: [
+          {
+            name: '特殊人群',
+            type: 'pie',
+            radius: ['30%', '60%'],
+            itemStyle: {
+              normal: {
+                color: function (colors) {
+                  var colorList = ['#83B5F7', '#7E94F6', '#85E3D5', '#2891FF'];
+                  return colorList[colors.dataIndex];
+                }
+              },
+            },
+            data: [
+              { value: 100, name: '吸毒人员100' },
+              { value: 150, name: '高龄老人150' },
+              { value: 80, name: '刑满释放人员80' },
+              { value: 84, name: '退伍军人84' },
+            ],
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.5)',
+              }
+            }
+          }
+        ]
+      };
+      this.echartDataSpecial.setOption(option)
+
+      var option2 = {
+          grid: {
+            top: '10%',
+            left: '4%',
+            right: '4%',
+            bottom: '10%',
+            containLabel: true
+          },
+        xAxis: {
+          type: 'category',
+          data: ['10岁以下', '10-18岁', '18-65岁', '65-80岁', '80岁以上']
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [
+          {
+            itemStyle: {
+              normal: {
+                color: ['#0072FF'],
+                label: {
+                  show: true, //开启显示数值
+                  position: 'top', //数值在上方显示
+                  textStyle: {  //数值样式
+                    color: '#919191',   //字体颜色
+                    fontSize: 14  //字体大小
+                  }
+                }
+              }
+            },
+            data: [
+              136, 195, 162, 138,
+              {
+                value: 98,
+                itemStyle: {
+                  color: '#F09535'
+                }
+              },
+            ],
+            type: 'bar',
+            barWidth : 20,
+          }
+        ]
+      };
+      this.echartDataAge.setOption(option2)
+
+      var option3 = {
+        tooltip: {
+          trigger: 'item'
+        },
+        series: [
+          {
+            name: '男女比例',
+            type: 'pie',
+            radius: ['40%', '70%'],
+            itemStyle: {
+              normal: {
+                color: function (colors) {
+                  var colorList = ['#2891FF', '#FF8700'];
+                  return colorList[colors.dataIndex];
+                }
+              },
+            },
+            data: [
+              { value: 100, name: '男100' },
+              { value: 100, name: '女100' },
+            ],
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.5)',
+              }
+            }
+          }
+        ]
+      };
+      this.echartDataSex.setOption(option3)
+    },
+  },
+  created() {
+    this.$nextTick(() => {
+      this.chartInit()
+    })
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.Files {
+  padding: 0 32px;
+  .title {
+    font-size: 32px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #333;
+    line-height: 44px;
+    padding: 40px 0 24px 0;
+  }
+  .chart-content{
+    width: 100%;
+    background-color: #fff;
+    border-radius: 8px;
+  }
+}
+</style>