<template>
  <div class="bkfx" @click="baokefenxi">
    <div class="godetail"><img src="../../assets/bargound/shuangjiantou.png" alt="">&nbsp;保客分析</div>

    <div id="bkfxchart"></div>

  </div>
</template>
<script>
import * as echarts from 'echarts';
import { bkfxchartInfo } from "../../servuces/prove";
export default {
  data () {
    return {
      bk_data: []
    }
  },
  mounted () {
    this.getData()
  },
  methods: {
    bkfxchart () {
      const bkfxchart = document.getElementById('bkfxchart')
      const myChartbkfx = echarts.init(bkfxchart)
      const bkfxoption = {
        tooltip: {
          trigger: 'item',
          formatter: '{b}:{c}({d}%)',
          backgroundColor: 'black',
          textStyle: {
            color: 'inherit',
          }
        },
        legend: {
          top: '2%',
          left: 'center',
          textStyle: {
            color: 'inherit',
            fontSize: '12'
          }
        },
        color: ['rgb(188,253,247)', 'rgb(0,204,204)', 'rgb(32,79,253)', 'rgb(103,255,154)', 'rgb(104,117,245)', 'rgb(86,204,255)'],
        series: [
          {
            type: 'pie',
            radius: ['40%', '60%'],
            center: ['50%', '55%'],
            label: {
              show: true,

              color: 'inherit',
              formatter: (params) => {
                return params.name + (params.percent + "%")
              }
            },

            labelLine: {
              normal: {
                show: true,
                length: 15,//引导线长度
              }
            },
            data: this.bk_data
          }
        ]
      }
      bkfxoption && myChartbkfx.setOption(bkfxoption)
      window.addEventListener('resize', function () {
        myChartbkfx.resize()
      })
    },
    getData () {
      bkfxchartInfo().then(res => {
        this.bk_data = res.data;
        this.bkfxchart();
      })
    },
    baokefenxi(){
      this.$router.push('/baokefenxidetail')
  }
  },
 
}
</script>
<style scoped lang="scss">
.bkfx {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;



  #bkfxchart {
    width: 100%;
    height: 100%;
  }
}
</style>