<template>
  <div>
    <div class="lvlanbox">
      <div class="lv">
        <p>再次进店</p>
        <h4>
          <span>
            <!-- <dv-digital-flop :config="confignumber1" style="width:100%;height:30px;" /> -->{{ klfxchartdata.ec_count
            }}
          </span>人
        </h4>
      </div>
      <div class="lan">
        <p>首次进店</p>
        <h4>{{ klfxchartdata.sc_count }}<span>人</span></h4>
      </div>
    </div>
    <div id="klfx"></div>
  </div>
</template>
<script>
//客流分析
import * as echarts from 'echarts';
import { klfxchartInfo } from "../../../servuces/prove";

export default {
  data () {
    return {
      //客流分析数据
      klfxchartdata: []
    }
  },
  mounted () {
    this.klfxchartapi()
  },
  methods: {
    chart1 () {
      const klfx = document.getElementById('klfx');
      const myChart1 = echarts.init(klfx);
      const option1 = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center',
          textStyle: {
            fontSize: 12,//字体大小
            color: 'white'//字体颜色
          },
        },
        series: [
          {
            name: '亿通集团',
            type: 'pie',
            radius: '50%',
            center: ['50%', '50%'],
            label: {
              fontSize: 12,
              color: 'white'
            },
            data: this.klfxchartdata.tb,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };

      option1 && myChart1.setOption(option1);

    },
    klfxchartapi () {
      klfxchartInfo().then(res => {
        this.klfxchartdata = res.data
        // console.log(this.klfxchartdata.tb);
        this.chart1()
      })
    }
  }
}




</script>
<style scoped>
#klfx {
  width: 100%;
  height: 180px;
}
</style>