<!--
 * @Author: your name
 * @Date: 2021-10-12 08:39:43
 * @LastEditTime: 2021-12-21 10:32:42
 * @LastEditors: Please set LastEditors
 * @Description: 成本分析扇形图
 * @FilePath: \hyyfClient\src\views\PdcData\analysis\CostPie.vue
-->
<template>
  <div class="cost-pie">
    <div id="costPie"></div>
  </div>
</template>
<script>
export default {
  props: {
    data: {
      type: Object,
      default: () => {},
    },
    title: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      myChart: null,
    };
  },
  methods: {
    init() {
      let gtValue = parseFloat(this.data.gtValue);
      let syValue = parseFloat(this.data.syValue);
      let slValue = parseFloat(this.data.slValue);
      let total = gtValue + syValue + slValue;
      let options = {
        title: {
          text: this.title,
          x: "30%",
          y: "bottom",
          textAlign: " center",
          textStyle: {
            fontSize: 15,
            color: "#666",
          },
        },
        grid: {
          x: 100,
        },
        legend: {
          top: "30%",
          left: "80%",
          orient: "vertical",
          icon: "circle",
          selectedMode: false, // 取消右侧项选中
          itemGap: 20, // 各项间隔
          textStyle: {
            fontSize: 15,
            color: "#666",
          },
        },
        series: [
          {
            // name: 'Access From',
            type: "pie",
            radius: "70%", // 半径
            center: ["40%", "45%"],
            avoidLabelOverlap: false,
            hoverAnimation: false,
            labelLine: {
              show: true,
            },
            itemStyle: {
              normal: {
                color: function(colors) {
                  // 颜色设置
                  var colorList = [
                    "rgb(112,182,3)",
                    "#2194EA",
                    "rgb(123,0,255)",
                    // "rgb(0,215,233)",
                    // "rgb(255,255,160)",
                    // "rgb(0,0,255)",
                  ];
                  return colorList[colors.dataIndex];
                },
                label: {
                  formatter: (params) => {
                    // 这里简直完美好吗，解决了文字样式也解决了千分位
                    let value = params.value.toLocaleString();
                    let percent = ((params.value / total) * 100).toFixed(2);
                    if (value === "0") {
                      return `{b|${params.name}:}\n{c|${value}元}`;
                    }
                    return `{b|${params.name}:}\n{c|${value}元}\n{d|${percent}%}`;
                  },
                  rich: {
                    b: {
                      align: "center",
                      fontSize: 15,
                      // lineHeight: 23,
                    },
                    c: {
                      align: "center",
                      lineHeight: 25,
                      fontSize: 15,
                    },
                    d: {
                      align: "center",
                      fontSize: 15,
                    },
                  },
                },
                labelLine: {
                  length: 22,
                },
              },

              label: {
                show: false,
              },
              // emphasis: {
              //   label: {
              //     show: true,
              //     // formatter: "{b}: {c}%",
              //     textStyle: {
              //       fontSize: "15",
              //     },
              //   },
              //   itemStyle: {
              //     shadowBlur: 10,
              //     shadowOffsetX: 5,
              //     shadowColor: "rgba(0, 0, 0, 0.5)",
              //   },
              // },
            },
            data: [
              { value: gtValue, name: "公摊成本" },
              { value: syValue, name: "兽药成本" },
              { value: slValue, name: "饲料成本" },
            ],
          },
        ],
      };

      this.myChart.setOption(options, true);
    },
  },
  mounted() {
    this.myChart = this.$echarts.init(document.getElementById("costPie"));
    this.init();
  },
  watch: {
    data: {
      handler() {
        this.init();
      },
      deep: true,
    },
  },
};
</script>
<style scoped>
.cost-pie {
  display: inline-block;
  width: 100%;
  height: 300px;
}
#costPie {
  width: 100%;
  height: 100%;
}
</style>
