SaaS-DataScreen/src/views/hui-jia/components/online-pay/index.vue

<template>
    <Card :title="title" :subTitle="subTitle" :icon="icon" class="online-pay">
      <div class="total display-flex" v-if="showTitle">
        <div class="img">
          <img src="./images/icon-total.png" alt="" class="icon">
        </div>
        <div>
          总缴费（近12个月）：￥{{ total }}
        </div>
      </div>
      <div class="bar-con">
        <div ref="onlinePayBar" class="online-pay-bar"></div>
      </div>
    </Card>
  </template>
<script>
import * as echarts from 'echarts'
// import { getBigNumberWithUint } from '@/libs/tools.js'
import { huiJiaApi } from '@/api'
import Card from '@/views/hui-jia/components/card'
import icon from './images/icon-title.png'

export default {
  name: 'OnlinePay',
  components: {
    Card
  },
  props: {
    showLegend: {
      type: Boolean,
      default: true
    },
    showTitle: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      onlinePayInstance: null,
      xAxisData: ['十二月', '一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月'],
      seriesData: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      total: 0,
      title: '线上缴费统计',
      subTitle: '近12个月',
      icon: icon
    }
  },
  
  mounted () {
    this.initChart()
    this.getOnlinePayMonth()
    window.addEventListener("resize", this.handleResize)
  },
  beforeDestroy() {
    if (this.onlinePayInstance) {
      this.onlinePayInstance.dispose()
    }
    window.removeEventListener("resize", this.handleResize)
  },
  methods: {
    getOnlinePayMonth () {
      huiJiaApi.getOnlinePayMonth().then(res => {
        if(res && res.data && res.data.data && res.data.data.list.length) {
          this.total = res.data.data.allSum
          this.xAxisData = res.data.data.list.map(item => item.statData)
          this.seriesData = res.data.data.list.map(item => item.payAmount)
          this.initChart()
        }
      })
    },
    /**
     * 获取一个和max最接近的能被5整除的无零头整数
     */
    getMax (max) {
      if (max <= 10) return 10

      let pow = max.toString().length - 2
      pow = Math.pow(10, pow)
      max = Math.ceil(max / pow / 10) * 10 * pow
      return max
    },
    initChart () {
      this.onlinePayInstance = echarts.init(this.$refs.onlinePayBar)
     
      const xAxisData = this.xAxisData
      const seriesData = this.seriesData
      // let max = 0
      // max = seriesData.reduce((max, num) => {
      //   return Math.max(Number(max), Number(num))
      // })
      // max = this.getMax(max)
      const option = {
        tooltip: {},
        legend: {
          show: this.showLegend,
          right: '0',
          top: '20px',
          textStyle: {
            color: '#fff'
          }
        },
        grid: {
          top: this.showLegend ? '80px' : '5%',
          bottom: '0px',
          left: '0px',
          right: '0px',
          containLabel: true
        },
        xAxis: {
          axisLabel: {
            color: '#fff',
            margin: 15,
            fontSize: 12,
            formatter: function (val, idx) {
              let value = xAxisData[idx]
              return value
            }
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#666',
              opacity: 1,
              cap: 'round'
            }
          },
          boundaryGap: true,
          axisTick: {
            alignWithLabel: true,
            length: 7,
            lineStyle: {
              width: 3,
              color: '#fff',
              opacity: 0.5
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#fff',
              opacity: 0.3,
              cap: 'round',
              type: [5, 10]
            }
          },
          max: function (value) { // x轴左侧留白
            return value.max + 0.3
          },
          min: function (value) { // x轴左侧留白
            return -0.3
          },
          data: xAxisData
        },
        yAxis: [
          {
            axisLabel: {
              color: 'rgba(160, 179, 214, 0.7)',
              fontSize: 11,
              margin: 12
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: '#fff'
              }
            },
            axisTick: {
              length: 14,
              lineStyle: {
                width: 2,
                fontSize: 16
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#fff',
                opacity: 0.3,
                cap: 'round',
                type: 'dashed',
                dashOffset: 5
              }
            }
          },
          {
            type: 'value',
            position: 'right',
            axisLabel: {
              show: false
            },
            axisTick: {
              show: true,
              length: 14,
              lineStyle: {
                width: 2,
                fontSize: 16
              }
            },
            axisLine: {
              show: false
            }
          }
        ],
        series: [{
          name: '线上流水',
          type: 'bar',
          barWidth: '20%',
          labelLine: {
            show: false
          },
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#0F67F8' },
              { offset: 0.5, color: '#98D7F1' },
              { offset: 1, color: '#77ECED' }
            ]),
            barBorderRadius: [10, 10, 0, 0]
          },
          data: seriesData
        }]
      }
      this.onlinePayInstance.setOption(option)
      this.onlinePayInstance.resize()
    },
    handleResize() {
      if (this.onlinePayInstance) {
        this.onlinePayInstance.resize()
      }
    },
  }
}
</script>
<style lang="scss">
@import '@/assets/css/function.scss';
@import '@/assets/css/screen.scss';
.bar-con{
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  .online-pay-bar {
    flex: 1;
    width: 100%;
    height: 100%;
  }
}
.online-pay {

  .total{
    position: absolute;
    height: halfH(24);
    line-height: halfH(24);
    padding: halfH(18) halfW(18);
    color: #fff;
    font-size: halfW(14);
    border-radius: 5px;
    background-color: rgba(17, 28, 48, 1);
    text-align: center;
    border: 1px solid rgba(0, 123, 211, 0.2);
  }
  .img{
    width: halfW(40);
    height: halfH(40);
    margin-right: halfW(27);
    margin-top: halfH(-7);
    padding: halfH(8) halfW(8);
    box-sizing: border-box;
    background: #12223C;
    border-radius: 50%;
    .icon{
      width: 100%;
      height: 100%;
    }
  }
}
</style>