工作台静态页完成

src/assets/scss/common.scss

@@ -726,6 +726,10 @@ img {
   display: flex;
   align-items: center;
 }
+.adffc{
+  display: flex;
+  flex-direction: column;
+}
 .adfacjc{
   display: flex;
   align-items: center;

src/views/modules/home.vue

@@ -85,6 +85,9 @@
       <el-col :span="8">
         <el-card class="box-card" shadow="none">
           <div class="htitle">活动成员年龄分布</div>
+          <div class="chartbox">
+            <div ref="nlfbRef" style="width: 100%;height: 100%;"></div>
+          </div>
         </el-card>
       </el-col>
     </el-row>
@@ -92,16 +95,66 @@
       <el-col :span="8">
         <el-card class="box-card" shadow="none">
           <div class="htitle">爱心值变化趋势</div>
+          <div class="chartbox two">
+            <div class="query adfac">
+              <el-select v-model="year" placeholder="年份" style="width: 82px;margin-left: 8px;">
+                <el-option v-for="item in yearList" :label="item" :value="item" :key="item"></el-option>
+              </el-select>
+              <el-select v-model="month" placeholder="月份" style="width: 82px;margin-left: 8px;">
+                <el-option v-for="item in 12" :label="item+'月'" :value="item" :key="item"></el-option>
+              </el-select>
+              <el-select v-model="quarter" placeholder="季度" style="width: 82px;margin-left: 8px;">
+                <el-option v-for="item in 4" :label="item+'季度'" :value="item" :key="item"></el-option>
+              </el-select>
+            </div>
+            <div ref="bhqsRef" style="width: 100%;height: 100%;"></div>
+          </div>
         </el-card>
       </el-col>
       <el-col :span="8">
         <el-card class="box-card" shadow="none">
           <div class="htitle">活动参与用户排行榜</div>
+          <div class="chartbox two adffc">
+            <div class="th adf">
+              <div class="th-pre tp1">排名</div>
+              <div class="th-pre tp2">姓名</div>
+              <div class="th-pre tp3">渠道</div>
+              <div class="th-pre tp4">参与次数</div>
+            </div>
+            <div class="list">
+              <div class="list-item adf" v-for="(item,index) in 8" :key="index">
+                <div class="list-item-pre lip1 adfacjc">
+                  <div :class="{'red':index===0,'yellow':index===1,'green':index===2}">{{ index + 1 }}</div>
+                </div>
+                <div class="list-item-pre lip2">{{ '周晓瑾' }}</div>
+                <div class="list-item-pre lip3">{{ '建设银行' }}</div>
+                <div class="list-item-pre lip4">{{ '999次' }}</div>
+              </div>
+            </div>
+          </div>
         </el-card>
       </el-col>
       <el-col :span="8">
         <el-card class="box-card" shadow="none">
           <div class="htitle">热门活动排名</div>
+          <div class="chartbox two adffc">
+            <div class="th adf">
+              <div class="th-pre tp1">排名</div>
+              <div class="th-pre tp2">活动名称</div>
+              <div class="th-pre tp3">爱心值捐赠量</div>
+              <div class="th-pre tp4">参与人数</div>
+            </div>
+            <div class="list">
+              <div class="list-item adf" v-for="(item,index) in 8" :key="index">
+                <div class="list-item-pre lip1 adfacjc">
+                  <div :class="{'red':index===0,'yellow':index===1,'green':index===2}">{{ index + 1 }}</div>
+                </div>
+                <div class="list-item-pre lip2">{{ '环保知识知多少' }}</div>
+                <div class="list-item-pre lip3">{{ '9527' }}</div>
+                <div class="list-item-pre lip4">{{ '888人' }}</div>
+              </div>
+            </div>
+          </div>
         </el-card>
       </el-col>
     </el-row>
@@ -113,12 +166,17 @@ import * as echarts from 'echarts'
 export default {
   data () {
     return {
-
+      year: '',
+      yearList: [new Date().getFullYear(), new Date().getFullYear() - 1, new Date().getFullYear() - 2, new Date().getFullYear() - 3, new Date().getFullYear() - 4],
+      month: '',
+      quarter: ''
     }
   },
   mounted () {
     this.initYhlyChart()
     this.initNnblChart()
+    this.initNlfbChart()
+    this.initBhqsChart()
   },
   methods: {
     initYhlyChart () {
@@ -243,6 +301,37 @@ export default {
         tooltip: {
           trigger: 'item'
         },
+        legend: {
+          itemWidth: 10, // 图例标记的图形宽度
+          itemHeight: 10, // 图例标记的图形高度
+          icon: 'circle', // 图例项的 icon
+          top: 'bottom', // 图例组件离容器右侧的距离
+          itemGap: 50,
+          data: echartsData, // 图例的数据数组
+          formatter: (name) => { // 用来格式化图例文本
+            const value = echartsData.find(item => item.name === name).value
+            const sum = echartsData.reduce((total, item) => total + item.value, 0)
+            return `{name|${name}}：{value|${value}人} {bl|${((value / sum) * 100).toFixed(0)}%}`
+          },
+          textStyle: {
+            rich: {
+              name: {
+                color: '#6B7280',
+                fontSize: 14
+              },
+              value: {
+                color: '#252525',
+                fontSize: 14,
+                padding: [0, 4],
+                fontWeight: 600
+              },
+              bl: {
+                fontSize: 14,
+                padding: [0, 4]
+              }
+            }
+          }
+        },
         series: [{
           name: '',
           type: 'pie',
@@ -281,6 +370,131 @@ export default {
       myChart.setOption(option)
       this.resizeEcharts(this.$refs.nnblRef)
     },
+    initNlfbChart () {
+      let myChart = echarts.init(this.$refs.nlfbRef)
+      const dataValues = [24, 34, 16, 20, 6]
+      const totalSum = dataValues.reduce((a, b) => a + b, 0)
+      let option = {
+        color: ['#05A9FE'],
+        xAxis: {
+          type: 'category',
+          data: ['10岁以下', '10-20岁', '20-40岁', '40-60岁', '60岁以上']
+        },
+        yAxis: {
+          type: 'value'
+        },
+        grid: {
+          left: '2%',
+          right: '2%',
+          top: '16%',
+          bottom: '2%'
+        },
+        series: [
+          {
+            data: dataValues,
+            type: 'bar',
+            label: {
+              show: true,
+              position: 'top',
+              formatter: function (params) {
+                const percentage = ((params.value / totalSum) * 100).toFixed(1)
+                return percentage + '%'
+              },
+              color: '#252525',
+              fontSize: 12
+            },
+            barMaxWidth: 25
+          }
+        ]
+      }
+      myChart.setOption(option)
+      this.resizeEcharts(this.$refs.nlfbRef)
+    },
+    initBhqsChart () {
+      let myChart = echarts.init(this.$refs.bhqsRef)
+      let option = {
+        color: ['#74E1F9', '#7C75FF'],
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: ['11-01', '11-02', '11-03', '11-04', '11-05', '11-06', '11-07']
+        },
+        yAxis: {
+          type: 'value'
+        },
+        grid: {
+          left: '1%',
+          right: '1%',
+          top: '20%',
+          bottom: '1%',
+          containLabel: true
+        },
+        legend: {
+          data: ['累计导入', '累计捐赠'],
+          top: '5%',
+          left: '1%'
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#6a7985'
+            }
+          }
+        },
+        series: [
+          {
+            name: '累计导入',
+            data: [30, 170, 30, 80, 50, 160, 20],
+            type: 'line',
+            smooth: true,
+            lineStyle: {
+              width: 2
+            },
+            areaStyle: {
+              opacity: 0.2,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: '#74E1F9'
+                },
+                {
+                  offset: 1,
+                  color: '#4FEDDB'
+                }
+              ])
+            },
+            showSymbol: false
+          },
+          {
+            name: '累计捐赠',
+            data: [200, 90, 130, 90, 220, 60, 80],
+            type: 'line',
+            smooth: true,
+            lineStyle: {
+              width: 2
+            },
+            areaStyle: {
+              opacity: 0.2,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: '#7C75FF'
+                },
+                {
+                  offset: 1,
+                  color: '#3EB1E8'
+                }
+              ])
+            },
+            showSymbol: false
+          }
+        ]
+      }
+      myChart.setOption(option)
+      this.resizeEcharts(this.$refs.bhqsRef)
+    },
     resizeEcharts (ele) {
       let rate = 1920 / window.innerWidth
       if (ele.style) {
@@ -355,5 +569,87 @@ export default {
 .chartbox{
   width: 100%;
   height: 300px;
+  position: relative;
+  &.two{
+    height: 350px;
+  }
+
+  .th{
+    height: 36px;
+    background: #F7F7F7;
+    margin-top: 20px;
+    &-pre{
+      font-family: PingFangSC, PingFang SC;
+      font-weight: 400;
+      font-size: 14px;
+      color: #646464;
+      line-height: 36px;
+      text-align: center;
+      &.tp1{
+        width: 50px;
+      }
+      &.tp2,&.tp3,&.tp4{
+        width: calc((100% - 50px) / 3);
+      }
+    }
+  }
+
+  .list{
+    flex: 1;
+    overflow-y: auto;
+    &-item{
+      margin-top: 15px;
+      &-pre{
+        font-family: PingFangSC, PingFang SC;
+        font-weight: 400;
+        font-size: 14px;
+        color: #252525;
+        line-height: 20px;
+        text-align: center;
+        &.lip1{
+          width: 50px;
+          &>div{
+            width: 16px;
+            height: 16px;
+            border-radius: 50%;
+            background: #C1C7D2;
+            font-family: PingFangSC, PingFang SC;
+            font-weight: 400;
+            font-size: 12px;
+            color: #FFFFFF;
+            line-height: 16px;
+            text-align: center;
+            &.red{
+              background: #FF4943;
+            }
+            &.yellow{
+              background: #FFC00A;
+            }
+            &.green{
+              background: #00AE57;
+            }
+          }
+        }
+        &.lip2,&.lip3,&.lip4{
+          width: calc((100% - 50px) / 3);
+        }
+      }
+    }
+  }
+
+  .query{
+    position: absolute;
+    top: 15px;
+    right: 11px;
+    z-index: 1000;
+  }
+}
+
+::v-deep .el-input__inner{
+  height: 24px !important;
+  line-height: 24px !important;
+}
+::v-deep .el-input__icon{
+  line-height: 24px !important;
 }
 </style>