<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();
    });
  },

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

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

      var option;

      // var data1 = 0.0;
      // var data2 = 0.02;
      // var data3 = 3;

      var data1 = this.frtAnalogData.dayCount<0.001?1:this.frtAnalogData.dayCount;
      var data2 = this.frtAnalogData.monthCount<0.001?1:this.frtAnalogData.monthCount;
      var data3 = this.frtAnalogData.yearCount<0.010?1:this.frtAnalogData.yearCount;

      option = {
        grid: {
          top: "5%",
          bottom: "12%",
        },
        tooltip: { show:false},

        xAxis: {
          data: ["目标数"],
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
        },
        yAxis: {
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
        },
        series: [
          // 日用上圆
          {
            name: "",
            type: "pictorialBar",
            symbolSize: [20, 10], //aa顶部盖子大小
            symbolOffset: [-24, this.frtAnalogData.dayCount<0.001?-10:-4], //aa盖子位置
            z: 12,
            data: [
              {
                name: "日用",
                value: data1,
                symbolPosition: "end", //aa盖子在上边
                itemStyle: {
                  normal: {
                    // color:red,
                    color: {
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      type: "linear",
                      global: false,
                      colorStops: [
                        {
                          offset: 0,
                          color: "#006CF1",
                        },
                        {
                          offset: 1,
                          color: "#0C4AC5",
                        },
                      ],
                    },
                  },
                },
              },
            ],
          },
          // 月用上圆
          {
            name: "",
            type: "pictorialBar",
            symbolSize: [20, 10], //aa顶部盖子大小
            symbolOffset: [0, this.frtAnalogData.monthCount<0.001?-10:-4], //aa盖子位置
            z: 12,
            data: [
              {
                name: "日用",
                value: data2,
                symbolPosition: "end", //aa盖子在上边
                itemStyle: {
                  normal: {
                    // color:red,
                    color: {
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      type: "linear",
                      global: false,
                      colorStops: [
                        {
                          offset: 0,
                          color: "#f0757a",
                        },
                        {
                          offset: 1,
                          color: "#f24e55",
                        },
                      ],
                    },
                  },
                },
              },
            ],
          },
          // 年用上圆
          {
            name: "",
            type: "pictorialBar",
            symbolSize: [20, 10],
            symbolOffset: [24, this.frtAnalogData.yearCount<0.001?-10:-4],
            z: 12,
            data: [
              {
                name: "年用",
                value: data3,
                symbolPosition: "end",
                itemStyle: {
                  normal: {
                    color: {
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      type: "linear",
                      global: false,
                      colorStops: [
                        {
                          offset: 0,
                          color: "#2ae4ec",
                        },
                        {
                          offset: 1,
                          color: "#05bcc4",
                        },
                      ],
                    },
                  },
                },
              },
            ],
          },

          // 内圆
          {
            name: "",
            type: "pictorialBar",
            z: 1,
            data: [
              {
                name: "",
                value: data1,
                symbolSize: [120, 24],
                symbolOffset: [0, 12],
                trueVal: "98",
                itemStyle: {
                  normal: {
                    color: "transparent",
                    borderColor: "#0E40B7",
                    borderWidth: 1,
                  },
                },
              },
            ],
          },
          // 外圆
          {
            name: "",
            type: "pictorialBar",
            z: 1,
            data: [
              {
                name: "",
                value: data1,
                symbolSize: [100, 14],
                symbolOffset: [0, 7],
                trueVal: "98",
                itemStyle: {
                  normal: {
                    color: "rgba(6,18,115,.5)",
                    borderColor: "#1649C5",
                    borderWidth: 1,
                  },
                },
              },
            ],
          },
          // 日用主体
          {
            type: "bar",
            z: 9,
            barWidth: 20,
            data: [
              {
                name: "日用",
                value: data1,
                trueVal: "98",
                itemStyle: {
                  normal: {
                    color: {
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      type: "linear",
                      global: false,
                      colorStops: [
                        {
                          offset: 0,
                          color: "rgba(18,108,236,1)",
                        },
                        {
                          offset: 0.8,
                          color: "rgba(6,18,115,1)",
                        },
                        {
                          offset: 1,
                          color: "rgba(2,6,76,0.33)",
                        },
                      ],
                    },
                  },
                },
              },
            ],
          },

          // 月用主体
          {
            type: "bar",
            z: 9,
            barWidth: 20,
            data: [
              {
                name: "年用",
                value: data2,
                z: 9,
                itemStyle: {
                  normal: {
                    color: {
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      type: "linear",
                      global: false,
                      colorStops: [
                        {
                          offset: 0,
                          color: "#f0757a",
                        },
                        {
                          offset: 0.8,
                          color: "#F66167",
                        },
                        {
                          offset: 1,
                          color: "rgba(222,32,39,.1)",
                        },
                      ],
                    },
                  },
                },
              },
            ],
          },

          // 年用主体
          {
            type: "bar",
            z: 9,
            barWidth: 20,
            data: [
              {
                name: "年用",
                value: data3,
                z: 9,
                itemStyle: {
                  normal: {
                    color: {
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      type: "linear",
                      global: false,
                      colorStops: [
                        {
                          offset: 0,
                          color: "#68dbe0",
                        },
                        {
                          offset: 0.8,
                          color: "#31E9FF",
                        },
                        {
                          offset: 1,
                          color: "rgba(10,150,156,.1)",
                        },
                      ],
                    },
                  },
                },
              },
            ],
          },
        ],
      };

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