<!--
 * @Author: your name
 * @Date: 2021-09-30 15:46:57
 * @LastEditTime: 2021-12-02 09:37:17
 * @LastEditors: Please set LastEditors
 * @Description: 存栏结构图
 * @FilePath: \hyyfClient\src\views\PdcData\analysis\ChartInventoryPie.vue
-->
<template>
  <div class="chart-inventory-pie">
    <div id="chartPie"></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: 100,
        },
        tooltip: {
          trigger: "item",
          formatter: function({ name, value, percent }) {
            return (
              name + "：" + value + "头&nbsp;&nbsp;&nbsp;&nbsp;" + percent + "%"
            );
          },
        },
        legend: {
          top: "25%",
          left: "55%",
          orient: "vertical",
          icon: "circle",
          selectedMode: false, // 取消右侧项选中
          itemGap: 20, // 各项间隔
          textStyle: {
            fontSize: 15,
            color: "#666",
          },
          formatter: function(name) {
            var legendIndex = 0;
            const clientLabels = [];
            // 将右侧文字备注放上去
            _this.data.forEach((item) => {
              let percentStr = "";
              if (item.stockQuantity !== 0) {
                percentStr =
                  (parseFloat(item.stockQuantity / total) * 100).toFixed(2) +
                  "%, ";
              }
              clientLabels.push({
                name: item.stockName,
                percent: percentStr,
                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: "27%",
            top: "43%",
            style: {
              text: "总存栏",
              fontSize: 15,
              fill: "rgb(192, 188, 189)",
            },
          },
          {
            type: "text",
            left: "25%",
            top: "53%",
            style: {
              text: total + "头",
              fontSize: 22,
              fontWeight: 700,
            },
          },
        ],
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: ["60%", "80%"], // 半径
            center: ["30%", "55%"],
            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",
                    "#4dcb73",
                    "#fad337",
                    "#f2637b",
                    "#975fe4",
                  ];
                  return colorList[colors.dataIndex];
                },
                borderWidth: 5, // 设置各项空隙
                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("chartPie"));
    // this.init()
  },
  watch: {
    data(newValue) {
      console.log(newValue);
      this.init();
    },
  },
};
</script>
<style scoped>
.chart-inventory-pie {
  display: inline-block;
  width: 45%;
  height: 300px;
}
#chartPie {
  width: 100%;
  height: 100%;
}
</style>
