<template>
  <Echart
    :options="options"
    id="centreLeft1Chart"
    :key="key"
    height="1.0417rem"
    width="80%"></Echart>
</template>
<script>
  import Echart from "@/common/echart";
  export default {
    components: {
      Echart,
    },
    data () {
      return {
        key: 0,
      };
    },
    props: {
      cdata: {
        type: Array,
        default: () => ([]),
      },
    },
    watch: {
      cdata: {
        handler (newData) {
          console.log("newData", newData);
          this.options = {
            color: [
              "#37a2da",
              "#32c5e9",
              "#9fe6b8",
              "#ffdb5c",
              "#ff9f7f",
              "#fb7293",
              "#e7bcf3",
              "#8378ea"

            ],
            tooltip: {
              trigger: "item",
              formatter: "<br/>{b} : {c} ({d}%)",
            },
            series: [
              {
                name: "Access From",
                type: "pie",
                radius: '60%',
                avoidLabelOverlap: true,
                label: {
                  formatter: (params) => {
                    return `${params.name}`;
                  },
                  position: "outer",
                  alignTo: "edge",
                  margin: 10,
                  normal: {
                    show: true,
                    textStyle: {
                      fontSize: 12
                    }
                  },
                },


                data: newData,
              }
            ],
          };
          this.key++;
        },
        immediate: true,
        deep: true,
      },
    },
  };
</script>

<style lang="scss" scoped>
  #centreLeft1Chart {
    margin-bottom: 0.0521rem;
    margin-left: 0.3125rem;
  }
</style>