<template>
  <div ref="triangleChart" style="width: 100%; height: 100%"></div>
</template>
<script>
import * as echarts from "echarts";

export default {
  props: ["frtAnalogData"],
  data() {
    return {};
  },

  mounted() {
    this.$nextTick(() => {
      // console.log(1111111111);
      // console.log(this.frtAnalogData);
      // console.log(1111111111);
      this.initChart();
      // console.log("this.arr");
      // console.log(this.arr);
      // console.log("this.arr");
    });
  },

  beforeUnmount() {
    window.removeEventListener("resize", this.chart);
  },

  methods: {
    //次数分布折线图
    initChart() {
      var chart = echarts.init(this.$refs.triangleChart);
      var option;

      var data = [
        { name: "重载运行", value: (this.frtAnalogData.heavyLoad*100).toFixed(2) },
        { name: "轻载运行", value: (this.frtAnalogData.easyLoad*100).toFixed(2) },
        { name: "正常运行", value: (this.frtAnalogData.norMalLoad*100).toFixed(2) },
      ];
console.log('data')
      console.log(data)

      // var data = [
      //   {
      //     name: "正常运行",
      //     value: 54, //aa百分比
      //   },
      //   {
      //     name: "轻载运行",
      //     value: 44,
      //   },
      //   {
      //     name: "重载运行",
      //     value: 35,
      //   },
      // ];

      var titleArr = [];
      var seriesArr = [];
      var colors = [
        ["#31E9FF", "rgba(49,233,255,.1)"],
        ["#2FA4EE", "rgba(47,164,238,.1)"],
        ["#F66167", "rgba(246,97,103,.1)"],
      ];
      data.forEach(function (item, index) {
        titleArr.push({
          text: item.name,
          left: index * 33 + 16 + "%",
          top: "80%", //aa 下边标题的上下位置
          textAlign: "center",
          textStyle: {
            fontWeight: "normal",
            fontSize: "0.2125rem",
            color: "#fff",
            textAlign: "center",
          },
        });
        seriesArr.push({
          name: item.name,
          type: "pie",
          // clockWise: false,  //顺时针方向
          radius: [40, 48], // aa 圈大小
          itemStyle: {
            normal: {
              color: {
                // 完成的圆环的颜色
                colorStops: [
                  {
                    offset: 0,
                    color: colors[index][0], // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: colors[index][1], // 100% 处的颜色
                  },
                ],
              },
              shadowColor: colors[index][0],
              shadowBlur: 0,
              label: {   //aa这个导致白色圈出不来？？？？
                show: false,
              },
              labelLine: {
                show: false,
              },
            },
          },
          hoverAnimation: false,
          center: [index * 33 + 17 + "%", "40%"], //aa饼图的中心位置

          data: [
            {
              //画中间的图标
              name: "",
              value: 0 ,
              label: {
                position: "inside",
                backgroundColor: colors[index][0],
                borderRadius:50,
                width: 15,
                height: 15,
                show:true,
              },
            },

            {
              value: item.value,
              label: {
                normal: {
                  formatter: function (params) {
                    return params.value + "%";
                  },
                  position: "center",
                  show: true,
                  textStyle: {
                    fontSize: "20",
                    fontWeight: "bold",
                    color: colors[index][0],
                  },
                },
              },
            },
            {
              value: 100 - item.value,
              name: "invisible",  
              itemStyle: {
                normal: {
                  color: colors[index][1],
                },
                emphasis: {
                  color: colors[index][1],
                },
              },
            },
          ],
        });
      });

      option = {
        // backgroundColor: "#fff",
        title: titleArr,
        series: seriesArr,
      };

      chart.setOption(option);
      window.addEventListener("resize", () => {
        chart.resize();
      });
      this.chart = chart;
    },
  },
};
</script>