vuedx/src/views/index.vue

<template>
  <div class="app-container home">
    <div id="main">
      <div class="card_left">
        <el-card class="box-card card1 ">
          <div class="title">
            <span>用户概括</span>
          </div>
          <div class="contain">
            <i class="el-icon-s-custom"></i>
            <div class="num">999,999</div>
            <div class="num_txt">已注册人数</div>
          </div>
          <div id="user" style="width: 100%;height:374px;margin-left:-20%"></div>
        </el-card>
        <el-card class="box-card card2">
          <div class="title">
            <span>消费数据统计</span>
          </div>
          <div class="contain">
            <div class="day">
              <div class="rmb_icon">¥</div>
              <div class="right">
                <div class="num_txt">当天支付金额</div>
                <div class="num"><span>10,000</span> 元</div>
              </div>
            </div>
            <div class="now">
              <div class="rmb_icon">¥</div>
              <div class="right">
                <div class="num_txt">当前账户余额总额</div>
                <div class="num"><span>50,000,000</span> 元</div>
              </div>
            </div>
          </div>
        </el-card>
      </div>
      
      
      <div class="card_right">
        <el-card class="box-card card3">
          <div class="title">
            <span>充值行为分析</span>
          </div>
          <div class="contain">
            <div class="top">
              <div class="day_sum">
                  <div class="num_txt">今日充值总金额</div>
                  <div class="num"><span>10,000</span> 元</div>
              </div>
              <div class="day_count">
                  <div class="num_txt">今日充值次数</div>
                  <div class="num"><span>200</span> 次</div>
              </div>
              <div class="day_count">
                  <div class="num_txt">今日平均充值金额</div>
                  <div class="num"><span>200</span> 元</div>
              </div>
            </div>
            <div class="middle">
              <div id="pay_type" style="width: 500px;height:150px"></div>
              <div id="channel" style="width: 500px;height:150px"></div>
              
            </div>
            <div class="title" style="width:100%">
              <span>充值行为分析</span>
            </div>
            <div class="data">
              <el-dropdown @command="handleMonth" class="data_type">
                <span class="el-dropdown-link">
                  {{month}}<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="1">1月</el-dropdown-item>
                  <el-dropdown-item command="2">2月</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <el-dropdown @command="handleYear" class="data_type">
                <span class="el-dropdown-link">
                  {{year}}<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="2021">2021年</el-dropdown-item>
                  <el-dropdown-item command="2022">2022年</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
            <div class="bottom" >
              <div id="statistics" style="width: 800px;height:200px"></div>
            </div>
            
          </div>
          
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>


export default {
  name: "index",
  data() {
    return {
      // 版本号
      month:"月",
      year:"年"
      
    };
  },
  mounted() {
   this.drawLine();
  },
  methods: {
    handleMonth(month) {
      this.month = month + "月"
    },
    handleYear(year) {
      console.log(1)
      this.year = year + "年"
    },
    drawLine(){
	    // 基于准备好的dom，初始化echarts实例
      let user = this.$echarts.init(document.getElementById('user'))
      let pay_type = this.$echarts.init(document.getElementById('pay_type'))
      let channel = this.$echarts.init(document.getElementById('channel'))
      let statistics = this.$echarts.init(document.getElementById('statistics'))
      
      // 指定图表的配置项和数据
      var option1 = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          top: '15%',
          left: 'left',
          left: '80%'
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '16',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 1048, name: '东信员工' },
              { value: 735, name: '合作伙伴' },
              { value: 580, name: '租客' },
              { value: 1048, name: '东信员工1' },
              { value: 735, name: '合作伙伴1' },
              { value: 580, name: '租客1' },
              { value: 1048, name: '东信员工2' },
              { value: 735, name: '合作伙伴2' },
              { value: 580, name: '租客2' },
      
            ]
          }
        ]
      };
      var option2 = {
        title: {
          text: '支付方式'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          top: '15%',
          left: 'left',
          left: '80%'
          
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '12',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 1048, name: '支付宝' },
              { value: 735, name: '微信' },
              { value: 73, name: '现金' },
            ]
          }
        ]
      };
      var option3 = {
        title: {
          text: '充值渠道'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          top: '15%',
          left: 'left',
          left: '80%'
          
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '12',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 1048, name: '餐厅' },
              { value: 735, name: '活动中心' },
              { value: 73, name: '游泳馆' },
            ]
          }
        ]
      };
      var option4 = {
        title: {
          text: '充值总额'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          // data: ['Email']
        },
        grid: {
          // left: '3%',
          // right: '4%',
          // bottom: '3%',
          containLabel: false
        },
        // toolbox: {
        //   feature: {
        //     saveAsImage: {}
        //   }
        // },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['1日','2日','3日','4日','5日','6日','7日','8日','9日','10日','11日','12日','13日','14日','15日','16日','17日','18日','19日','20日','21日','22日','23日','24日','25日','26日','27日','28日','29日','30日']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            // name: 'Email',
            type: 'line',
            stack: 'Total',
            data: [120, 134, 90, 230, 210,120, 132, 10100, 134, 90,120, 134, 90, 230, 210,120, 132, 10100, 134, 90,120, 134, 90, 230, 210,120, 132, 10100, 134, 90]
          },
          
        ]
      };

      user.setOption(option1);
      pay_type.setOption(option2);
      channel.setOption(option3);
      statistics.setOption(option4);
    },
  }
}
</script>

<style scoped lang="scss">
  .text {
    font-size: 14px;
  }
  .item {
    margin-bottom: 18px;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
  .box-card {
    margin-top:10px;
  }
  #main{
    .box-card{
      .title{
        text-align: left;
        span{
          font-size: 16px;
          font-weight: 700;;
          padding-bottom:2px;
          border-bottom:1px solid #ccc !important;
        }
      }
    }
    .card_left{
      width:40%;
      float: left;
      .card1{
        .contain{
          margin:30px auto 0;
          text-align: center;
          &>div{
            display: inline-block;
          }
          .el-icon-s-custom{
            font-size:30px;
          }
          .num{
            font-size: 30px;
            font-weight: 700;
            margin:0 16px;
          }
          .num_txt{
            font-size: 12px;
            color:#ccc;
            
          }
        }
      }
      .card2{
        .contain{
          margin:30px auto 0;
          text-align: left;
          &>div>div{
            display: inline-block;
          }
          &>div:nth-child(2){
            margin:80px auto 40px;
          }
          .rmb_icon{
            font-size:40px;
            font-weight: 700;
            margin:0 10% 0 15%;
            vertical-align: middle;
          }
          .right{
            vertical-align: middle;
            width:40%;
            text-align: right;
            .num_txt{
              font-size: 12px;
              color:#ccc !important;
              text-align: right;
              margin-right:14px;
            }
            .num{
              font-size: 12px;
              margin-top:5px;
              color:#ccc;
              span{
                font-size: 30px;
                font-weight: 700;
                color:#000;
              }
            }
            
          }
          
        }
      }
    }
    .card_right{
      float:left;
      width:60%;
      .card3{
        width:100%;
        margin-left:10px;
        .title{
          width:85%;
          margin:0 auto;
        }
        .contain{
          width:85%;
          margin:30px auto 0;
          text-align: left;
          .top{
            display: flex;
            div{
              flex:3;
              text-align: center;
              .num_txt{
                font-size: 12px;
                color:#ccc !important;
                text-align: center;
              }
              .num{
                font-size: 12px;
                margin-top:5px;
                color:#ccc;
                span{
                  font-size: 30px;
                  font-weight: 700;
                  color:#000;
                }
              }
            }
            
          }
          .middle{
            div{
              margin-top:40px;
            }
          }
          .bottom{
            margin-top:40px;
          }
          .data{
            width:100%;
            text-align: right;
            margin-left:-100px;
            .data_type{
              margin:20px 0 0 20px;
              padding:0 15px;
              border:1px solid #000;
            }

          }
          
        }
      }
    }
    
  }
  
</style>