<template>
  <div class="fqyw" @click="fenqiyewu">
    <div class="godetail"><img src="../../assets/bargound/shuangjiantou.png" alt="">&nbsp;分期业务</div>
    <div class="progress">
      <div class="progress1"><span>高期限</span><el-progress :percentage="gqx_count" define-back-color="rgb(5,26,53)"
          text-color="white" :stroke-width="8"></el-progress>
      </div>
      <div class="progress2"><span>渗透率</span><el-progress :percentage="stl" define-back-color="rgb(5,26,53)"
          text-color="white" :stroke-width="8"></el-progress></div>
    </div>
    <div id="fqywchart"></div>

  </div>
</template>
<script>
import * as echarts from 'echarts';
import { fqywchartInfo } from "../../servuces/prove";
export default {
  data () {
    return {
      gqx_count: 0,
      stl: 0,
      //折线图数据
      data: [1, 1, 1, 1, 1, 5],
      fq_data: {}
    }
  },
  mounted () {
    this.getData();
  },
  methods: {
    fqywchart () {
      const fqywchart = document.getElementById('fqywchart');
      const myChartfqyw = echarts.init(fqywchart);
      const fqywoption = {
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'black',
          formatter: (params) => {
            return params[0].axisValue + ':'  + '<br/>' + params[0].data
          },
          textStyle: {
            color: 'white'
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.fq_data.name_data,
          axisLine: {
            lineStyle: {
              color: 'rgb(70,166,196)'
            },

          },
          axisLabel: {
            color: 'white' // 设置x轴标签字体颜色为黑色
          },
        },
        yAxis: {
          show: true,
          type: 'value',
          min: 0,
          splitLine: {
            lineStyle: {
              type: 'dashed',
              color: 'rgb(116,116,116,0.2)'
            }
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgb(70,166,196)',
            }
          },
          axisLabel: {
            color: 'white',
            show: true,
            formatter: '{value}'
          },
          axisTick: {
            show: true
          }
        },
        grid: {
          left: '10%',
          top: '10%',
          bottom: '20%',
          right: '10%'
        },
        series: [
          {
            data: this.fq_data.value_data,
            type: 'line',
            itemStyle: {
              normal: {
                color: 'yellow'
              }
            },
            lineStyle: {
              normal: {
                color: 'rgb(250,211,46)'
              }
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgb(120,105,35)',
                    // color: 'rgb(120,105,50)',
                  },
                  {
                    offset: 1,
                    color: 'rgb(60,55,33,.5)',
                  }
                ],
                global: false
              }
            }
          }
        ]
      }
      fqywoption && myChartfqyw.setOption(fqywoption)
      window.addEventListener('resize', function () {
        myChartfqyw.resize()
      })
    },

    getData () {
      fqywchartInfo().then(res => {
        this.gqx_count = res.gqx_count;
        this.stl = res.stl;
        this.fq_data = res.fq_data;
        this.fqywchart();
      })
    },

    fenqiyewu(){
      this.$router.push('/fenqiyewudetail')

    }
  }
}
</script>
<style>
.progress1 .el-progress-bar__inner {
  background-color: unset;
  background-image: linear-gradient(to right, rgb(49, 155, 102), rgb(33, 140, 156));
}

.progress2 .el-progress-bar__inner {
  background-color: unset;
  background-image: linear-gradient(to right, rgb(60, 160, 100), rgb(250, 200, 50));
}
</style>
<style scoped lang="scss">
.fqyw {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;


  .progress {
    width: 70%;
    margin: 0 0 0 20%;

    div {
      position: relative;
      margin: 2% 0;

      span {
        position: absolute;
        left: -20%;
      }
    }
  }

  #fqywchart {
    width: 100%;
    height: 70%;
    flex: 1;
  }
}
</style>