<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 arr = [
        { name: "重载运行", reaVal: (this.frtAnalogData.heavyLoad*100).toFixed(2)+'%' },
        { name: "轻载运行", reaVal: (this.frtAnalogData.easyLoad*100).toFixed(2)+'%' },
        { name: "正常运行", reaVal: (this.frtAnalogData.norMalLoad*100).toFixed(2)+'%' },
      ];

      arr.sort((a, b) => a.reaVal - b.reaVal);

      arr[0].value = 10;
      arr[1].value = 20;
      arr[2].value = 30;

      option = {
        calculable: true,
        color: ["#FF5656", "#FFAF38", "#00F4FD"],
        series: [
          {
            name: "漏斗图",
            type: "funnel",
            left: "10%",
            right: "30%",
            width: "50%",
            top: "0%",
            bottom: "0%",
            minSize: "0%",
            maxSize: "70%",
            sort: "ascending",
            gap: 10,
            label: {
              show: true,
              // formatter: " {b|{b}}    {a|{c}} ",
              formatter: function (params) {
                let a = params.data.name + "   ";
                let b = params.data.reaVal;
                return "{a|" + a + "}" + "{b|" + b + "}";
              },
              rich: {
                a: {
                  color: "#fff",
                  fontSize: 12,
                },
                b: {
                  color: "rgba(101,166,196,1)",
                  fontSize: 20,
                  marginLeft: "10",
                  fontFamily: "impact",
                },
              },
            },
            labelLine: {
              length: 60,
              lineStyle: {
                width: 1,
                type: "solid",
              },
            },
            itemStyle: {
              //去掉默认白色边框线
              borderWidth: 0,
              borderColor: "#fff",
            },
            data: arr,
          },
        ],
      };

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