<template>
  <div class="echarts-box" ref="echartbox"></div>
</template>

<script>
  export default {
    name: "ws-pie",
    props: {
      pieData: {
        type: Object,
        required: true
      },
      titleText: String
    },
    data() {
      return {}
    },
    methods: {
      //加载饼图
      initEcharts() {
        let echarts = window.echarts.init(this.$refs.echartbox);
        echarts.setOption(this.getOptions());
      },
      //获取配置
      getOptions() {
        let option = {
          title: {
            text: this.titleText,
            left: "center",
            top: 20,
            textStyle: {
              color: '#333'
            }
          },
          backgroundColor: "transparent",
          tooltip: {
            trigger: "item",
            formatter: "{b} : {c} ({d}%)"
          },
          color: ['#409EFF', '#67C23A', '#D92424', '#FF8000'],
          series: [
            {
              type: "pie",
              radius: "70%",
              center: ["50%", "50%"],
              data: this.pieData,
            }
          ],
          legend: {
            center: "vertical"
          }
        };
        return option;
      }
    },
    watch: {
      pieData() {
        this.initEcharts();
      }
    },
    mounted() {
      this.initEcharts();
    },
  }
</script>

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