wycore/vue-antd-admin/src/components/chart/Trend.vue

<template>
  <div class="chart-trend">
    {{term}}
    <span>{{rate}}%</span>
    <span :class="['chart-trend-icon', trend]" style=""><a-icon :type="'caret-' + trend" /></span>
  </div>
</template>

<script>
export default {
  name: 'Trend',
  props: {
    term: {
      type: String,
      required: true
    },
    target: {
      type: Number,
      required: false,
      default: 0
    },
    value: {
      type: Number,
      required: false,
      default: 0
    },
    isIncrease: {
      type: Boolean,
      required: false,
      default: null
    },
    percent: {
      type: Number,
      required: false,
      default: null
    },
    scale: {
      type: Number,
      required: false,
      default: 2
    }
  },
  data () {
    return {
      trend: this.isIncrease ? 'up' : 'down',
      rate: this.percent
    }
  },
  created () {
    this.trend = this.caulateTrend()
    this.rate = this.caulateRate()
  },
  methods: {
    caulateRate () {
      return (this.percent === null ? Math.abs(this.value - this.target) * 100 / this.target : this.percent).toFixed(this.scale)
    },
    caulateTrend () {
      let isIncrease = this.isIncrease === null ? this.value >= this.target : this.isIncrease
      return isIncrease ? 'up' : 'down'
    }
  }
}
</script>

<style lang="less" scoped>
  .chart-trend{
    display: inline-block;
    font-size: 14px;
    .chart-trend-icon{
      font-size: 12px;
      &.up{
        color: @red-6;
      }
      &.down{
        color: @green-6;
      }
    }
  }
</style>