echarts饼图封装

最近频繁使用到饼图,烦.直接把代码c到博客来!!!哈哈哈

<template>
  <div :style="{ height: height, width: width }" id="pie2"></div>
</template>

<script>
export default {
  name: "pie2",
  data() {
    return {};
  },
  props: {
    data: {
      type: Array,
      default: () => {
        return [];
      },
    },
    total: {
      type: String,
      default: '总计0',
    },
    height: {
      type: String,
      default: "600px",
    },
    width: {
      type: String,
      default: "400px",
    },
  },
  watch: {
    data() {
      this.initPie2(this.data, this.total);
    },
    total() {
      this.initPie2(this.data, this.total);
    }
  },
  beforeDestroy() {
    window.removeEventListener('resize', () => {
      this.charts.resize()
    })
  },
  mounted() {
    this.charts = this.$echarts.init(document.getElementById("pie2"));
    this.initPie2(this.data, this.total);
    window.addEventListener('resize', () => {
      this.charts.resize()
    })
  },
  methods: {
    initPie2(val, total) {
      let option = {
        legend: {},
        tooltip: {
          trigger: "item",
        },
        title: {
          text: total,
          left: 'center',
          top: 'center',
          textStyle: {
            fontSize: 48,
            color: "rgba(141, 141, 141, 1)",
          },
        },
        series: [
          {
            type: "pie",
            radius: ["50%", "75%"],
            center:["50%", "50%"],
            label: {
              show: false,
            },
            data: val,
          },
        ],
      };
      this.charts.setOption(option);
    },
  },
};
</script>

<style scoped>
</style>