tire-platform-ui/src/views/wel/components/charge-today.vue

<template>
  <div class="home-container">
    <el-card class="home-container__card">
      <div class="title">
        <span>
          今日收款
        </span>
        <span>
          <i
            class="el-icon-refresh-right"
            style="cursor: pointer;font-size:20px"
            @click="refresh"
          ></i>
        </span>
      </div>
      <div v-loading="loading">
        <div class="content">
          <div class="content_item divider">
            <div>
              <div class="content_item_num">10</div>
              <div class="content_item_text">已收金额</div>
            </div>
          </div>
          <div class="content_item divider">
            <div>
              <div class="content_item_num">100,000</div>
              <div class="content_item_text">待收金额</div>
            </div>
          </div>
          <div class="content_item">
            <div>
              <div class="content_item_num">1</div>
              <div class="content_item_text">未结单据</div>
            </div>
          </div>
        </div>
        <div id="chargeData" ref="chargeData" style="width:45vw;height:30vh" />
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "basicContainer",
  data() {
    return {
      loading: false
    };
  },
  mounted() {
    this.chargeData();
  },
  methods: {
    refresh() {
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
      }, 1000);
    },
    chargeData() {
      let chargeData = this.$echarts.init(
        document.getElementById("chargeData")
      );
      chargeData.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "line"
          }
        },
        xAxis: {
          type: "category",
          data: []
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            data: [0.1, 0.4, 0.6, 0.7, 0.8, 0.9, 1],
            type: "line",
            smooth: true
          }
        ]
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.home-container {
  padding: 0px 5px 5px 5px;
  box-sizing: border-box;
  height: 100%;
  ::v-deep .el-card__body {
    padding: 10px 15px;
    font-size: 14px;
  }
  &__card {
    width: 100%;
    height: 100%;
  }
  .title {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
  }
}
.content {
  display: flex;
  background-color: #fafafa;
  justify-content: space-around;
  .divider {
    border-right: 1px dashed #dcdfe6;
  }
  &_item {
    margin: 20px 0px 20px 20px;
    height: 5vh;
    width: 33.3%;
    display: flex;
    align-items: center;
    &_num {
      font-size: 18px;
      font-weight: 600;
    }
    &_text {
      color: #909399;
    }
  }
}
</style>