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

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

export default {
  name: 'OnlinePay',
  components: {
    Card
  },
  data () {
    return {
      title: '线上缴费统计',
      subTitle: '近12个月',
      icon: icon
    }
  },
  mounted () {
    this.initChart()
  },
  methods: {
    /**
     * 获取一个和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 () {
      const myChart = echarts.init(this.$refs.onlinePayBar)
      const xAxisData = ['十二月', '一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月']
      const seriesData = [5, 20, 36, 10, 10, 20, 40, 25, 30, 45, 50, 60]
      // let max = 0
      // max = seriesData.reduce((max, num) => {
      //   return Math.max(Number(max), Number(num))
      // })
      // max = this.getMax(max)
      const option = {
        tooltip: {},
        legend: {
          right: '0',
          top: '20px',
          textStyle: {
            color: '#fff'
          }
        },
        grid: {
          top: '80px',
          bottom: '0px',
          left: '0px',
          right: '0px',
          containLabel: true
        },
        xAxis: {
          axisLabel: {
            color: '#fff',
            margin: 15,
            fontSize: 14,
            formatter: function (val, idx) {
              let value = xAxisData[idx]
              return value
            }
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#666',
              opacity: 1,
              cap: 'round'
            }
          },
          boundaryGap: false,
          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: '#fff',
              margin: 25,
              fontSize: 14
            },
            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
        }]
      }
      myChart.setOption(option)
    }
  }
}
</script>
<style lang="scss">
@import '@/assets/css/function.scss';
.online-pay-bar {
  width: 100%;
  height: halfH(363);
}
.online-pay {
  .total{
    height: halfH(24);
    line-height: halfH(24);
    padding: halfH(18) halfW(18);
    color: #fff;
    float: left;
    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>