<template>
  <div class="inerank-container">
    <div :style="{height:'100%',width:'100%'}" ref="myLineRank"></div>
  </div>
</template>
<script>
export default {
  props: {
    data: {
      type: Array,
      default: []
    }
  },
  data() {
    return {};
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      let myChart = this.$echarts.init(this.$refs.myLineRank);
      let dataAlias=[]
      let data2=[]
      this.data.forEach(x=>{
        if(x.Num>0){
          dataAlias.push(x.Name)
          let t={}
          t.name=x.Name
          t.value=x.Num
          data2.push(t)
        }
      })
      let option = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          left: "50%", //图例距离左的距离
          top: "10%", //图例上下居中
          data: dataAlias,
          textStyle:{//图例文字的样式
            color:'#FFF',
            fontSize:12
          }
        },
        calculable: true,
        series: [
          {
            center: ["25%", "45%"],
            name: "订单来源",
            type: "pie",
            radius: ["50%", "70%"],
            itemStyle: {
              normal: {
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                },
                borderWidth: 10,
                borderColor: "#019CFF1a",
                color: function(params) {
                  //自定义颜色
                  var colorList = [
                    "#FFB822",
                    "#34BFA3",
                    "#FD3995",
                    "#5D78FF",
                    "#8e44ad",
                    "#2c3e50",
                    "#16a085"
                  ];
                  return colorList[params.dataIndex];
                }
              }
            },
            data: data2
          }
        ]
      };

      myChart.setOption(option);
    }
  }
};
</script>
<style>
.inerank-container {
  height: 100%;
  width: 100%;
}
</style>
