Statistic统计数值

基础用法

<template>
  <div class="t-basic-statistic-area">
        <div>
          <as-statistic
              group-separator=","
              :precision="2"
              :value="value2"
              :title="title"
          ></as-statistic>
        </div>
        <div>
          <as-statistic title="男女比">
            <template slot="formatter">
              456/2
            </template>
          </as-statistic>
        </div>
        <div>
          <as-statistic
              group-separator=","
              :precision="2"
              decimal-separator="."
              :value="value1"
              :title="title"
          >
            <template slot="prefix">
              <i class="as-icon-s-flag" style="color: red"></i>
            </template>
            <template slot="suffix">
              <i class="as-icon-s-flag" style="color: blue"></i>
            </template>
          </as-statistic>
        </div>
        <div>
          <as-statistic :value="like ? 521 : 520" title="Feedback">
            <template slot="suffix">
              <span @click="like = !like" class="like">
                <i
                    class="as-icon-star-on"
                    style="color:red"
                    v-show="!!like"
                ></i>
                <i class="as-icon-star-off" v-show="!like"></i>
              </span>
            </template>
          </as-statistic>
        </div>
  </div>
</template>
<script>
export default {
  name: "t-basic-statistic",
  data() {
    return {
      like: true,
      value1: 4154.564,
      value2: 1314,
      title: "增长人数",
    };
  },
}
</script>
<style>
.t-basic-statistic-area{
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.t-basic-statistic-area>div{
  width: 25%;
  margin-top: 10px;
  margin-bottom: 10px;
}
.t-basic-statistic-area .like {
  cursor: pointer;
  font-size: 25px;
  display: inline-block;
}
@media screen and (max-width: 480px) {
  .t-basic-statistic-area>div{
    width: 40%;
  }
}
</style>

Expand Copy Copy

Statistic Attributes

参数	默认值	说明
value	--	数值内容,类型为String|Number
decimal-separator	.	设置小数点,类型为String
formatter	--	自定义数值展示
group-separator	,	设置千分位标识符,类型为String
precision	--	数值精度,类型为Number
prefix	--	设置数值的前缀,类型为String|v-slot
suffix	--	设置数值的后缀,类型为String|v-slot
title	--	数值的标题,类型为String|v-slot
value-style	--	设置数值的样式 ,类型为Object
rate	1000	设置倍率,类型为Number

Statistic Slots

名称	说明
prefix	数值的前缀
suffix	数值的后缀
formatter	数值内容
title	数值的标题