工作台静态页画写(部分完成)

package-lock.json

@@ -7420,6 +7420,15 @@
         "safer-buffer": "^2.1.0"
       }
     },
+    "echarts": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmmirror.com/echarts/-/echarts-6.0.0.tgz",
+      "integrity": "sha512-Tte/grDQRiETQP4xz3iZWSvoHrkCQtwqd6hs+mifXcjrCuo2iKWbajFObuLJVBlDIJlOzgQPd1hsaKt/3+OMkQ==",
+      "requires": {
+        "tslib": "2.3.0",
+        "zrender": "6.0.0"
+      }
+    },
     "ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmmirror.com/ee-first/-/ee-first-1.1.1.tgz",
@@ -17902,6 +17911,11 @@
         }
       }
     },
+    "tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+    },
     "tty-browserify": {
       "version": "0.0.0",
       "resolved": "https://registry.npmmirror.com/tty-browserify/-/tty-browserify-0.0.0.tgz",
@@ -19530,6 +19544,14 @@
           "dev": true
         }
       }
+    },
+    "zrender": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmmirror.com/zrender/-/zrender-6.0.0.tgz",
+      "integrity": "sha512-41dFXEEXuJpNecuUQq6JlbybmnHaqqpGlbH1yxnA5V9MMP4SbohSVZsJIwz+zdjQXSSlR1Vc34EgH1zxyTDvhg==",
+      "requires": {
+        "tslib": "2.3.0"
+      }
     }
   }
 }

package.json

@@ -17,6 +17,7 @@
     "axios": "^0.19.0",
     "babel-eslint": "^8.0.1",
     "babel-plugin-component": "^1.1.1",
+    "echarts": "^6.0.0",
     "element-theme": "^2.0.1",
     "element-ui": "^2.11.1",
     "gulp-autoprefixer": "^6.1.0",

src/views/modules/home.vue

@@ -1,24 +1,359 @@
 <template>
-  <el-card shadow="never" class="aui-card--fill">
-      <div class="mod-home">
-          <h3>工作台</h3>
-      </div>
-  </el-card>
+  <div>
+    <el-row :gutter="10">
+      <el-col :span="24">
+        <el-card class="box-card" shadow="none">
+          <div class="htitle">活动概览</div>
+          <div class="nums adf">
+            <div class="nums-pre adffc">
+              <div class="nums-pre-title adfac">
+                <img src="" alt="">
+                <span>活动总数</span>
+              </div>
+              <div class="nums-pre-sz">{{ 458 }}</div>
+              <div class="nums-pre-text adfac">较昨日<i class="el-icon-bottom xj"></i>{{ 23 }}</div>
+            </div>
+            <div class="nums-pre adffc">
+              <div class="nums-pre-title adfac">
+                <img src="" alt="">
+                <span>未开始活动</span>
+              </div>
+              <div class="nums-pre-sz">{{ 158 }}</div>
+              <div class="nums-pre-text adfac">较昨日<i class="el-icon-bottom xj"></i>{{ 0 }}</div>
+            </div>
+            <div class="nums-pre adffc">
+              <div class="nums-pre-title adfac">
+                <img src="" alt="">
+                <span>进行中活动</span>
+              </div>
+              <div class="nums-pre-sz">{{ 140 }}</div>
+              <div class="nums-pre-text adfac">较昨日<i class="el-icon-bottom xj"></i>{{ 23 }}</div>
+            </div>
+            <div class="nums-pre adffc">
+              <div class="nums-pre-title adfac">
+                <img src="" alt="">
+                <span>已结束活动</span>
+              </div>
+              <div class="nums-pre-sz">{{ 546 }}</div>
+              <div class="nums-pre-text adfac">较昨日<i class="el-icon-top ss"></i>{{ 2 }}</div>
+            </div>
+            <div class="nums-pre adffc">
+              <div class="nums-pre-title adfac">
+                <img src="" alt="">
+                <span>累计报名人数</span>
+              </div>
+              <div class="nums-pre-sz">{{ 5098 }}</div>
+              <div class="nums-pre-text adfac">较昨日<i class="el-icon-top ss"></i>{{ 280 }}</div>
+            </div>
+            <div class="nums-pre adffc">
+              <div class="nums-pre-title adfac">
+                <img src="" alt="">
+                <span>活动参与率</span>
+              </div>
+              <div class="nums-pre-sz">{{ 89 }}%</div>
+              <div class="nums-pre-text adfac">较昨日<i class="el-icon-top ss"></i>{{ 100 }}</div>
+            </div>
+            <div class="nums-pre adffc">
+              <div class="nums-pre-title adfac">
+                <img src="" alt="">
+                <span>累计导入爱心值总额</span>
+              </div>
+              <div class="nums-pre-sz">{{ 985000 }}</div>
+              <div class="nums-pre-text adfac">较昨日<i class="el-icon-top ss"></i>{{ 8000 }}</div>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+    <el-row :gutter="10" style="margin-top: 10px;">
+      <el-col :span="8">
+        <el-card class="box-card" shadow="none">
+          <div class="htitle">用户来源</div>
+          <div class="chartbox">
+            <div ref="yhlyRef" 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">
+            <div ref="nnblRef" 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>
+        </el-card>
+      </el-col>
+    </el-row>
+    <el-row :gutter="10" style="margin-top: 10px;">
+      <el-col :span="8">
+        <el-card class="box-card" shadow="none">
+          <div class="htitle">爱心值变化趋势</div>
+        </el-card>
+      </el-col>
+      <el-col :span="8">
+        <el-card class="box-card" shadow="none">
+          <div class="htitle">活动参与用户排行榜</div>
+        </el-card>
+      </el-col>
+      <el-col :span="8">
+        <el-card class="box-card" shadow="none">
+          <div class="htitle">热门活动排名</div>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
 </template>
 
 <script>
+import * as echarts from 'echarts'
 export default {
   data () {
     return {
 
     }
   },
+  mounted () {
+    this.initYhlyChart()
+    this.initNnblChart()
+  },
   methods: {
-
+    initYhlyChart () {
+      let myChart = echarts.init(this.$refs.yhlyRef)
+      let echartData = [
+        {
+          value: 899,
+          name: '中国银行'
+        },
+        {
+          value: 899,
+          name: '平安银行'
+        },
+        {
+          value: 1889,
+          name: '招商银行'
+        },
+        {
+          value: 1199,
+          name: '建设银行'
+        },
+        {
+          value: 599,
+          name: '工商银行'
+        },
+        {
+          value: 399,
+          name: '浦发银行'
+        }
+      ]
+      let seriesData = echartData.map((item, index) => {
+        return {
+          ...item,
+          actValue: item.value,
+          label: {
+            show: true,
+            position: 'outside',
+            borderRadius: 50,
+            padding: [10, -10, 3, -3],
+            textStyle: {
+              fontSize: 10
+            },
+            formatter: '{white|{b}}\n{three|  {d}人}',
+            rich: {
+              test: {},
+              white: {
+                align: 'center',
+                color: '#989998',
+                fontSize: 14
+              },
+              three: {
+                color: '#252525',
+                align: 'center',
+                padding: [6, 0],
+                fontSize: 14,
+                fontWeight: 600
+              }
+            }
+          }
+        }
+      })
+      let option = {
+        title: {
+          show: true,
+          text: '总人数',
+          itemGap: 10,
+          x: 'center',
+          y: '130',
+          subtext: '3897',
+          textStyle: {
+            fontSize: 14,
+            color: '#989998'
+          },
+          subtextStyle: {
+            fontSize: 14,
+            color: '#252525',
+            fontWeight: 600
+          }
+        },
+        tooltip: {
+          trigger: 'item',
+          formatter: '{b}<br/>{c} 人',
+          textStyle: {
+            fontSize: 16,
+            color: '#252525'
+          }
+        },
+        series: [
+          {
+            name: 'pie',
+            type: 'pie',
+            radius: ['30%', '70%'],
+            hoverAnimation: false,
+            color: ['#0370F2', '#488CF6', '#4CAFF9', '#39CAFB', '#49DECA', '#16AECA'],
+            itemStyle: {
+              normal: {
+                borderColor: '#fff',
+                borderWidth: 2
+              }
+            },
+            labelLine: {
+              length: 10,
+              length2: 70,
+              lineStyle: {
+                color: '#4CAFF9'
+              }
+            },
+            data: seriesData
+          }
+        ]
+      }
+      myChart.setOption(option)
+      this.resizeEcharts(this.$refs.yhlyRef)
+    },
+    initNnblChart () {
+      let myChart = echarts.init(this.$refs.nnblRef)
+      let echartsData = [{ value: 45, name: '女性' }, { value: 55, name: '男性' }]
+      let colorList = ['#F4657A', '#49DECA']
+      let option = {
+        backgroundColor: '#FFF',
+        color: colorList,
+        tooltip: {
+          trigger: 'item'
+        },
+        series: [{
+          name: '',
+          type: 'pie',
+          radius: ['30%', '70%'],
+          center: ['50%', '50%'],
+          roseType: 'radius',
+          label: {
+            show: true,
+            position: 'outside',
+            fontSize: 16,
+            formatter: (params) => {
+              return `{a|${params.name}${params.value}%}`
+            },
+            rich: {
+              a: {
+                align: 'left',
+                fontSize: 14,
+                color: '#252525'
+              }
+            }
+          },
+          labelLine: {
+            length: 10,
+            length2: 30
+          },
+          data: echartsData.map((item, index) => {
+            return {
+              ...item,
+              label: {
+                color: colorList[index]
+              }
+            }
+          })
+        }]
+      }
+      myChart.setOption(option)
+      this.resizeEcharts(this.$refs.nnblRef)
+    },
+    resizeEcharts (ele) {
+      let rate = 1920 / window.innerWidth
+      if (ele.style) {
+        ele.style.zoom = 1 * rate
+        ele.style.transform = `scale(${1 / rate})`
+        ele.style.transformOrigin = 'top left'
+      }
+    }
   }
 }
 </script>
 
 <style scoped lang="scss">
+.htitle {
+  font-family: PingFang-SC, PingFang-SC;
+  font-weight: bold;
+  font-size: 16px;
+  color: #252525;
+  line-height: 16px;
+}
+
+.nums{
+  margin-top: 26px;
+  &-pre{
+    width: calc(100% / 7);
+    border-left: 1px solid #ECEEF5;
+    padding-left: 16px;
+    box-sizing: border-box;
+    &:first-child{
+      border: none;
+      padding: 0;
+    }
+    &-title{
+      img{
+        width: 14px;height: 16px;
+      }
+      span{
+        font-family: PingFangSC, PingFang SC;
+        font-weight: 400;
+        font-size: 14px;
+        color: #6B7280;
+        line-height: 14px;
+        margin-left: 6px;
+      }
+    }
+    &-sz{
+      font-family: DINAlternate, DINAlternate;
+      font-weight: bold;
+      font-size: 28px;
+      color: #252525;
+      line-height: 28px;
+      margin-top: 16px;
+    }
+    &-text{
+      font-family: PingFangSC, PingFang SC;
+      font-weight: 400;
+      font-size: 12px;
+      color: #6B7280;
+      line-height: 12px;
+      margin-top: 16px;
+      i{
+        margin: 0 3px 0 7px;
+        font-size: 14px;
+        font-weight: bolder;
+        &.xj{color: #67C23A;}
+        &.ss{color: #F4657A;}
+      }
+    }
+  }
+}
 
+.chartbox{
+  width: 100%;
+  height: 300px;
+}
 </style>