<template>
  <div style="display: flex;justify-content: space-evenly;">
    <div id="fqyw"></div>
    <div style="width: 30%;">
      <div>
        <p style="margin: 20px 0;color: rgb(91, 211, 218);">高期限&nbsp;&nbsp;{{
          fqywdatagqx }}</p>
        <div style="width: 100%;margin: 0 auto;"><el-progress :text-inside="true" define-back-color="gray"
            :stroke-width="20" color="rgb(80, 180, 210)" :percentage="fqywdatagqx"></el-progress>
        </div>
      </div>
      <div>
        <p style="margin: 20px 0;color: rgb(110, 211, 218);">渗透率&nbsp;&nbsp;{{
          fqywdatastl }}</p>
        <div style="width: 100%;margin: 0 auto;"><el-progress :text-inside="true" define-back-color="gray"
            :stroke-width="20" color="rgb(100, 233, 180)" :percentage="fqywdatastl"></el-progress></div>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from 'echarts';
import { fqywchartInfo } from "../../../servuces/prove";

export default {
  data () {
    return {
      fqywdata: [],
      fqywdatastl: undefined,
      fqywdatagqx: undefined
    }
  },
  mounted () {

    this.fqywchartapi()
  },
  methods: {
    chart2 () {
      const fqyw = document.getElementById('fqyw');
      const myChart2 = echarts.init(fqyw);
      const option2 = {
        series: [
          {
            type: 'treemap',
            data: this.fqywdata.periods
          }
        ]
      };

      option2 && myChart2.setOption(option2);

    },
    fqywchartapi () {
      fqywchartInfo().then(res => {
        this.fqywdata = res
        this.fqywdatastl = Number.isInteger(res.stl) ? parseFloat(res.stl) : parseFloat(res.stl.toFixed(2))
        this.fqywdatagqx = Number.isInteger(res.gqx_count) ? parseFloat(res.gqx_count) : parseFloat(res.gqx_count.toFixed(2))
        this.chart2()
        // console.log(res);
      })
    }
  }
}
</script>
<style scoped>
#fqyw {
  width: 50%;
  margin-top: 10px;
  height: 240px;
}
</style>