<template>
  <div class="klfx" @click="keliufenxi">
    <div class="godetail"><img src="../../assets/bargound/shuangjiantou.png" alt="" >&nbsp;客流分析</div>
    <div class="klfxtwosmallbox">
      <div class="klfxtwosmallbox1">
        <p>首次进店</p>
        <p><span style="color: rgb(44,214,204);font-size: 22px;">{{sc_count}}</span>人</p>
      </div>
      <div class="klfxtwosmallbox2">
        <p>再次进店</p>
        <p><span style="color: rgb(209,177,50);font-size: 22px;">{{ec_count}}</span>人</p>
      </div>
    </div>
    <div id="klfxchart"></div>

  </div>
</template>
<script>
import * as echarts from 'echarts';
import { klfxchartInfo } from "../../servuces/prove";

export default {
  data () {
    return {
       //客流分析数据
      sc_count: 0,
      ec_count: 0,
       data: []
    }
  },
  mounted () {
    this.getData()
  },
  methods: {
    klfxchart () {
      let dataPie = this.data;
      let total = 0;
      dataPie.forEach(function (val) {
        total += val.value;
      });
      const klfxchart = document.getElementById('klfxchart');
      const myChartklfx = echarts.init(klfxchart);
      const klfxoption = {
        tooltip: {
          show: true,
          backgroundColor: 'black',
          trigger: 'item',
          formatter: "{b} <br/>占比：{d}%",
          textStyle: {
            color: 'inherit',
          }
        },
        legend: {
          data: ['首次进店', '再次进店',],
          icon: 'vertical',
          right: '5%',
          top: 'center',
          orient: 'vertical',
          itemGap: 20,
          itemWidth: 15,
          itemHeight: 8,
          formatter: function (name) {


            let target, percent;
            for (let i = 0; i < dataPie.length; i++) {
              if (dataPie[i].name === name) {
                target = dataPie[i].value;
                percent = ((target / total) * 100).toFixed(2);
              }
            }
            let arr = [percent + '% ' + ' {yellow|' + target + '}', ' {blue|' + name + '}'];
            return arr.join("\n")

          },
          textStyle: {

            lineHeight: 15,
            color: '#f0f4f6',
            align: 'right',
            rich: {
              yellow: {
                color: '#f6ce54',
              },
              blue: {
                color: '#4be1ff',
                align: 'right',
              },
            }

          },
        },

        series: [{
          name: '',
          type: 'pie',
          clockWise: false, //顺时加载
          //hoverAnimation: false, //鼠标移入变大
          center: ['40%', '50%'],
          radius: ['40%', '70%'],
          label: {
            normal: {
              show: true,
              color: 'inherit'
            },

          },
          labelLine: {
            normal: {
              show: true,
              length2: 50,
            },
          },
          data: this.data
        }
        ]
      }
      klfxoption && myChartklfx.setOption(klfxoption)
      window.addEventListener('resize', function () {
        myChartklfx.resize()
      })
    },
    getData () {
      klfxchartInfo().then(res => {
        this.sc_count = res.data.sc_count;
        this.ec_count = res.data.ec_count;
        this.data = res.data.tb;
        this.klfxchart();
      })
    },
    keliufenxi(){
      this.$router.push('/keliufenxidetail')
    }
  }
}
</script>
<style scoped lang="scss">
.klfx {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .klfxtwosmallbox {
    display: flex;
    justify-content: space-around;

    .klfxtwosmallbox1,
    .klfxtwosmallbox2 {
      width: 48%;
      padding: 2%;
      background-image: url(../../assets/bargound/klfxbiankuang.png);
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
  }

  #klfxchart {
    width: 100%;
    height: 55%;
    padding-top: 5px;
  }
}
</style>