<template>
  <div>
    <Echart :options="options" id="centreLeft1Chart" height="4rem" width="9.75rem"></Echart>
  </div>
</template>

<script>
  import Echart from '@/common/echart'
  export default {
    data() {
      return {
        options: {},
      };
    },
    components: {
      Echart,
    },
    props: {
      cdata: {
        type: Object,
        default: () => ({})
      },
    },
    watch: {
      cdata: {
        handler(newData) {
          this.options = {
            color: [
              "#37a2da",
              "#32c5e9",
              "#9fe6b8",
              "#ffdb5c",
              "#ff9f7f",
              "#fb7293",
              "#e7bcf3",
              "#8378ea"
            ],
            tooltip: {
              trigger: "item",
              formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            toolbox: {
              show: true
            },
            calculable: true,
            legend: {
              orient: "horizontal",
              icon: "circle",
              bottom: 0,
              x: "center",
              data: newData.xData,
              textStyle: {
                color: "#fff"
              }
            },
            series: [
              {
                name: "电量统计",
                type: 'pie',
                radius: '50%',
                data: newData.seriesData,
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          }
        },
        immediate: true,
        deep: true
      }
    }
  };
</script>

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