<!--
 * @Author: your name
 * @Date: 2021-10-26 17:53:30
 * @LastEditTime: 2021-12-21 10:36:05
 * @LastEditors: Please set LastEditors
 * @Description: 成本分析扇形图
 * @FilePath: \hyyfScreen\src\views\Production\board\ChartCostPie.vue
-->
<template>
  <div class="cost-pie">
    <div id="chartCostPie"></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;
      console.log("total", total);
      let options = {
        title: {
          text: this.title,
          x: "center",
          textAlign: "center",
          textStyle: {
            fontSize: 14,
            color: "#fff",
          },
        },
        grid: {
          x: 100,
        },
        legend: {
          // top: "38%",
          // left: "75%",
          y: "bottom",
          orient: "horizontal",
          icon: "circle",
          selectedMode: false, // 取消右侧项选中
          itemGap: 20, // 各项间隔
          textStyle: {
            fontSize: 14,
            color: "#fff",
          },
        },
        series: [
          {
            // name: 'Access From',
            type: "pie",
            radius: "55%", // 半径
            center: ["45%", "40%"],
            avoidLabelOverlap: false,
            labelLine: {
              show: true,
            },
            hoverAnimation: false,
            itemStyle: {
              normal: {
                color: function(colors) {
                  // 颜色设置
                  var colorList = [
                    "rgb(112,182,3)",
                    // "rgb(232,56,92)",
                    // "rgb(123,0,255)",
                    "#3aa0ff",
                    "#975fe4",
                    // "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: 12,
                      // lineHeight: 23,
                    },
                    c: {
                      align: "center",
                      lineHeight: 25,
                      fontSize: 12,
                    },
                    d: {
                      align: "center",
                      fontSize: 12,
                    },
                  },
                },
              },
              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("chartCostPie"));
    this.init();
  },
  watch: {
    data: {
      handler(value) {
        console.log("成本分析环形图数据", value);
        this.init();
      },
    },
    title(value) {
      console.log("成本分析环形图标题改了", value);
      this.init;
    },
  },
};
</script>
<style scoped>
.cost-pie {
  width: 100%;
  height: 50%;
}
#chartCostPie {
  width: 100%;
  height: 100%;
}
</style>
