<template>
  <el-row>
    <el-col :span="12">
      <el-card style="text-align: center;">
        <div style="width: 800px;height:34px;"></div>
        <div style="width: 100%;height:440px;">
          <div id="revRegion" v-loading="revRegionLoading" style="width: 100%;height:440px;text-align: center;"/>
        </div>
      </el-card>
    </el-col>
    <el-col :span="12">
      <el-card>
        <div style="width: 800px;height:34px;"></div>
        <div style="width: 100%;height:440px;">
          <div id="revYear" style="width: 100%;height:440px;"/>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import {getLatest} from '@/api/statistics'
export default {
  data() {
    return {
      revRegionLoading: true,
      revRegionOption: {
        title: {
          text: '区域批量吊销主体分布'
        },
        tooltip: {},
        legend: {
          data: ['已吊销数量'],
          x:'right',
        },
        xAxis: {
        axisLabel: {
          show: true,
          interval: 0
        },
        data: []
        },
        yAxis: {
          name: "主体数（万）",
        },
        series: [
          {
            color: '#97a8be',
            name: '已吊销数量',
            type: 'bar',
            data: [],
            itemStyle: {
                borderWidth: 1.5,
            }
          }
        ]
      },
      revYearOption: {
        title: {
          text: '批量吊销主体增长分析'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['批量吊销主体数量']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: [
          {
            min:0,  //取0为最小刻度
            max:100000, //取100为最大刻度
            type: 'value'
          }
        ],
        series: [
          {
            name: '批量吊销主体数量',
            type: 'line',
            data: []
          }
        ]
      },
    }
  },
  mounted() {
    getLatest('all_region_rev').then(res => {
      let xdata = []
      let ydata = []
      console.log(res,'all_region_rev')
      for(let i in res.data){
        xdata.push(res.data[i].region);
        ydata.push(res.data[i].num / 10000);
      }
      this.revRegionOption.xAxis.data = xdata;
      this.revRegionOption.series[0].data = ydata;
      console.log(this.revRegionOption,'all_region_rev')
      this.drawRevRegion()
    })
    getLatest('year_rev').then(res => {
      console.log(res,'year_rev')
      let a = []
      let b = []
      for(let i in res.data){
        a.push(res.data[i].num)
        b.push(res.data[i].years)
      }
      this.revYearOption.series[0].data = a
      this.revYearOption.xAxis.data = b
      this.drawRevYear()
    })
  },
  methods: {
    drawRevYear() {
      const revYearChar = this.$echarts.init(document.getElementById('revYear'))
      revYearChar.setOption(this.revYearOption)
      window.addEventListener("resize", () => {
        if(revYearChar){
          revYearChar.resize()
        }
      })
    },
    drawRevRegion() {
      this.revRegionLoading = true
      const revRegionChar = this.$echarts.init(document.getElementById('revRegion'))
      revRegionChar.setOption(this.revRegionOption)
      window.addEventListener("resize", () => {
        if(revRegionChar){
          revRegionChar.resize()
        }
      })
      this.revRegionLoading = false
    }
  }
}
</script>

<style>
.histogram {
    min-height: 230px;
    /* height: calc(50vh - 240px); */
    margin-bottom: 20px;
}
.title {
    font-weight: 600;
    color: #666666;
    margin-bottom: 10px;
}
</style>
