<template>
  <div id="myPie"></div>
</template>

<script>
  // import func from '../../vue-temp/vue-editor-bridge';
  export default {
    name: "BasePie",
    data() {
      return {
        pieData: []
      };
    },
    mounted() {
      this.pieData = this.$store.state.totalAnalysis.pieData;
      this.drawLine(this.pieData);
    },
    methods: {

      drawLine(data) {
        let that = this;

        // 基于准备好的dom，初始化echarts实例
        let myPie = this.$echarts.init(document.getElementById("myPie"), 'chalk');

        // 指定图表的配置项和数据
        var option = {
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          calculable: true,
          series: {
            name: that.$t('totalAnalysis.ka_title1'),
            type: "pie",
            radius: [70, 150],
            center: ["45%", 190],
            max: 100, // for funnel
            sort: "ascending", // for funnel
            data: data
          }
        };

        // 绘制图表
        myPie.setOption(option);
        // window.addEventListener('resize',function(){
        //     myRadar.resize();
        // })

        myPie.on('click', function (item) {
          that.$emit('handleItemClick', item);
        })

      }
    },
    computed: {
      //获取最新柱状图数据
      getPieData() {
        let list = this.$store.state.totalAnalysis.pieData;
        let a = list.map(item => item.value);
        return list;
      }
    },
    watch: {
      getPieData(val) {
        this.drawLine(val);
      }
    }
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

  #myPie {
    width: 100%;
    height: 380px;
    margin: 0 auto;
    display: block;
  }
</style>
