<template>
  <e-charts ref="chart1" :options="orgOptions" :auto-resize='true' ></e-charts>
</template>

<script>
import ECharts  from "vue-echarts"
import "echarts/lib/chart/pie";
import "echarts/lib/component/legend";
import "echarts/lib/component/tooltip";
export default {
  name: "VePie",
  props:["data"],
  components:{ECharts},
  computed:{
    orgOptions(){
      let option = {
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        color:["#FEC52C","#829AFF","#59DAFF","#59ABFF","#3AE299"],
        legend: {
          orient: 'vertical',
          //x: 'right',
          y:'center',
          right:"20%",
          data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
        },
        grid:{
          left:0
        },
        series: [
          {
            name:'访问来源',
            type:'pie',
            radius: ['30%', '40%'],
            center : ['25%', '50%'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: 'center'
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data:this.data
          }
        ]
      };
      return option;
    }
  }
}
</script>

<style scoped>
  .echarts{
    width: 100%;
    height: 100%;
  }
</style>
