<template>
  <Echart
    :options="options"
    id="centreLeft1Chart"
    :key="key"
    height="225px"
    width="80%"
  ></Echart>
</template>
<script>
import Echart from "@/common/echart";
export default {
  components: {
    Echart,
  },
  data() {
    return {
      key: 0,
    };
  },
  props: {
    cdata: {
      type: Object,
      default: () => ({}),
    },
  },
  mounted() {
    window.addEventListener("resize", () => {
      this.key++;
    });
  },
  watch: {
    cdata: {
      handler(newData) {
        this.options = {
          series: [
            {
              name: "Access From",
              type: "pie",
               center: "65%",
              radius: "50%",
              data: newData.seriesData,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)",
                },
              },
            },
          ],
        };
        this.key++;
      },
      immediate: true,
      deep: true,
    },
  },
};
</script>

<style lang="scss" scoped></style>