<template>
  <div style="width: 100%; margin-top: 5px">
    <div class="tableTitle">
      <div>
        <span
          style="
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: #3297ff;
            display: inline-block;
            vertical-align: middle;
            margin-right: 8px;
          "
        ></span>
        <span
          style="font-size: 18px"
          >{{this.componentName + '-' + this.chartName + '-' + '饼状图'+'-'+status, }}</span
        >
      </div>
    </div>
    <div id="pieChart" ref="pieChart" style="width: 705px; height: 300px"></div>
  </div>
</template>

<script>
export default {
  name: "pieChart", //饼图图组件
  props: {
    list: {
      type: Array,
      default() {
        return [];
      },
    },
    componentName: {
      type: String,
    },
    chartName: {
      type: String,
    },
    typeValue: {
      type: Object,
    },
    status: {
      type: String,
    },
  },
  data() {
    return {};
  },
  created() {},
  methods: {
    drawPie(newVal) {
      if (newVal&&newVal.type_data&&newVal.type_data.length>0) {
        var legend = newVal.type_data.map((ele) => {
          return ele.name;
        });
        var seriesData = [];
        newVal.type_data.forEach((ele) => {
          seriesData.push({
            name: ele.name,
            value: ele.quantity,
          });
        });
        this.drawPie();
      }
      let myChart = this.$echarts.getInstanceByDom(this.$refs.pieChart);
      if (myChart == null) {
        myChart = this.$echarts.init(this.$refs.pieChart);
      }
      var color = [
        "#0CD2E6",
        "#3751E6",
        "#FFC722",
        "#00FFFF",
        "#00FF80",
        "#FFEA00",
        "#FF7300",
        "#9500B3",
        "#3377FF",
        "#5087EC",
        "#68BBC4",
        "#58A55C",
        "#F2BD42",
        "#EE752F",
        "#D95040",
        "#14CAFB"
      ];
      let option = {
        // title: {
        //     show: true,
        //     text: this.componentName + '-' + this.chartName + '-' + '饼状图',
        //     textStyle: {
        //         lineHeight: '30'
        //     }
        // },
        color: color,
        animation: false,
        legend: {
          top: 20,
          right: "center",
          textStyle: {},
          data: legend,
        },
        tooltip: {},
        series: [
          {
            type: "pie",
            center: ["50%", "55%"],
            radius: "70%",
            label: {
              normal: {
                show: false,
              },
            },
            labelLine: {
              show: false,
              length: 0,
              length2: 0,
            },
            label: {
              normal: {
                show: true,
                position: "inside",
                formatter: "{value|{c}}",
                rich: {
                  value: {
                    fontSize: 20,
                    color: "#ffffff",
                  },
                },
              },
            },
            data: seriesData,
          },
        ],
      };

      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
      //  this.$nextTick(() => {
      //     myChart.setOption(option)
      //     myChart.resize();
      // })
    },
  },
  mounted() {},
  watch: {
    // 监听单个的数据
  },
};
</script>
<style scoped>
.tableTitle {
  background: #f7f8fa;
  margin-bottom: 5px;
  padding: 8px;
}
</style>
