SaaS-DataScreen/src/views/index/components/paid-in/index.vue

<!--
 * @Author: WangQiBiao
 * @Date: 2019-09-26 08:46:04
 * @LastEditors: MoZhuangRu
 * @LastEditTime: 2019-11-21 11:18:21
 * @Description: 近1年应实收统计
 -->
<template>
  <div class="paid-in">
    <TitleCom>近12个月实收统计</TitleCom>
    <div class="map">
      <div class="map-item" id="paid"></div>
      <div class="map-item">
        <IncomeCom/>
      </div>
    </div>
  </div>
</template>
<script>
import TitleCom from '@/components/title'
import IncomeCom from './../income'
import echarts from 'echarts'
import { api } from '@/api'

export default {
  data () {
    return {
      yearTotal: []
    }
  },
  components: {
    TitleCom,
    IncomeCom
  },
  mounted () {
    api.getBillSumMonth().then(res => {
      this.yearTotal = res.data.data
      this.createMapPaid()
    })
  },
  methods: {
    createMapPaid () {
      var myChart = echarts.init(document.getElementById('paid'))
      var dataAxis = []
      var data = []
      if (this.yearTotal && this.yearTotal.length !== 0) {
        this.yearTotal.forEach(item => {
          dataAxis.push(item.type)
          data.push(item.total)
        })
      }
      var option = {
        name: '近12个月实收统计',
        legendHoverLink: true,
        grid: {
          top: 26,
          right: 0,
          bottom: 36
        },
        xAxis: {
          data: dataAxis,
          position: 'bottom',
          inverse: false,
          minInterval: 7,
          axisLine: { // 坐标轴
            show: true,
            lineStyle: {
              color: '#1036A9',
              width: 1
            }
          },
          axisTick: { // 坐标轴刻度
            show: false
          },
          axisLabel: { // 坐标轴label
            show: true,
            inside: false,
            rotate: 30,
            color: '#39D6FE',
            fontWeight: 400
          },
          splitLine: { // x轴线
            show: true,
            interval: 1000,
            lineStyle: {
              type: 'solid',
              color: '#1036A9'
            }
          },
          splitArea: { // 分隔区域
            show: false,
            interval: 0,
            areaStyle: {
              opacity: 0.36
            }
          }
        },
        yAxis: {
          show: true,
          position: 'left',
          name: '单位(万元)',
          nameTextStyle: {
            color: '#fff',
            fontSize: 10,
            fontWeight: 400
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#1036A9',
              width: 1
            }
          },
          axisTick: { // 坐标轴刻度
            show: false
          },
          axisLabel: { // 坐标轴label
            show: true,
            inside: false,
            // rotate: 30,
            color: '#fff',
            fontWeight: 400
          },
          splitLine: { // x轴线
            show: true,
            interval: 0,
            lineStyle: {
              type: 'solid',
              color: '#1036A9'
            }
          },
          splitArea: { // 分隔区域
            show: false,
            interval: 0,
            areaStyle: {
              opacity: 0.36
            }
          }
        },
        series: [
          {
            type: 'bar',
            barWidth: 20,
            label: {
              show: true,
              position: 'top',
              color: '#FFF600'
            },
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [
                    { offset: 0, color: '#01B4FF' },
                    { offset: 1, color: '#0E2AF6' }
                  ]
                )
              }
            },
            data: data
          }
        ]
      }
      myChart.setOption(option)
    }
  }
}
</script>
<style lang="scss" scoped>
@import './index.scss';
</style>