<!--
 * @Author: your name
 * @Date: 2021-10-26 09:15:22
 * @LastEditTime: 2021-12-13 14:14:21
 * @LastEditors: Please set LastEditors
 * @Description: 存栏结构图
 * @FilePath: \hyyfScreen\src\views\Production\board\ChartAmountPie.vue
-->
<template>
  <div class="chart-inventory-pie">
    <div id="chartAmountPie"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      myChart: null,
    };
  },
  props: {
    data: {
      type: Array,
      required: true,
    },
  },
  methods: {
    init() {
      const _this = this;
      let total = this.data.reduce(
        (prev, item) => prev + item.stockQuantity,
        0
      );
      let options = {
        // title: {
        //   text: '存栏结构',
        //   x: 20,
        //   y: 20
        // },
        grid: {
          // x: 10,
          // y: 10
        },
        tooltip: {
          trigger: "item",
          formatter: function({ name, value, percent }) {
            return (
              name + "：" + value + "头&nbsp;&nbsp;&nbsp;&nbsp;" + percent + "%"
            );
          },
        },
        legend: {
          top: "11%",
          left: "55%",
          orient: "vertical",
          icon: "circle",
          selectedMode: false, // 取消右侧项选中
          itemGap: 20, // 各项间隔
          textStyle: {
            fontSize: 12,
            color: "#eff",
          },
          formatter: function(name) {
            var legendIndex = 0;
            const clientLabels = [];
            // 将右侧文字备注放上去
            _this.data.forEach((item) => {
              clientLabels.push({
                name: item.stockName,
                percent:
                  (parseFloat(item.stockQuantity / total) * 100).toFixed(2) +
                  "%",
                number: item.stockQuantity,
              });
            });
            clientLabels.forEach(function(value, i) {
              if (value.name == name) {
                legendIndex = i;
              }
            });
            return (
              name +
              " (" +
              clientLabels[legendIndex].percent +
              ", " +
              clientLabels[legendIndex].number +
              "头" +
              ") "
            );
          },
        },
        graphic: [
          {
            type: "text",
            left: "23%",
            top: "30%",
            style: {
              text: "总存栏",
              fontSize: 15,
              fontWeight: 700,
              fill: "#fff",
            },
          },
          {
            type: "text",
            left: "23%",
            top: "40%",
            style: {
              text: total,
              fontSize: 24,
              fontWeight: 700,
              fill: "#fff",
            },
          },
        ],
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: ["58%", "73%"], // 半径
            center: ["28%", "46%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              // position: 'center'
            },
            emphasis: {
              label: {
                show: false,
                fontSize: "40",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            itemStyle: {
              normal: {
                color: function(colors) {
                  // 颜色设置
                  var colorList = [
                    "#3aa0ff",
                    "#403DEA",
                    "#226942",
                    "#1AD06C",
                    "#975fe4",
                  ];
                  return colorList[colors.dataIndex];
                },
                borderWidth: 3, // 设置各项空隙，白边
                borderColor: "#fff",
              },
            },
            data: [
              { value: this.data[0].stockQuantity, name: "母猪存栏" },
              { value: this.data[1].stockQuantity, name: "公猪存栏" },
              { value: this.data[2].stockQuantity, name: "哺乳仔猪存栏" },
              { value: this.data[3].stockQuantity, name: "保育猪存栏" },
              { value: this.data[4].stockQuantity, name: "育肥猪存栏" },
            ],
          },
        ],
      };

      this.myChart.setOption(options);
    },
  },
  mounted() {
    this.myChart = this.$echarts.init(
      document.getElementById("chartAmountPie")
    );
    this.init();
    // console.log(this.data);
  },
  watch: {
    data: {
      handler() {
        this.init();
      },
      deep: true,
    },
  },
};
</script>
<style scoped>
.chart-inventory-pie {
  width: 100%;
  height: 100%;
}
#chartAmountPie {
  width: 100%;
  height: 100%;
}
</style>
