<template>
  <div ref="eleShareChart" :style="{ height: height, width: width }"></div>
</template>
<script>
import * as echarts from "echarts";
import api from "../../../../api/Overview/index";
import { ElMessage } from "element-plus";
export default {
  props: {
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "calc(100% - 0.7rem)",
    },
    select_value: Object,
  },
  data() {
    return {};
  },
  mounted() {},

  beforeUnmount() {
    window.removeEventListener("resize", this.chart);
  },
  watch: {
    /**
     * @监听vuex存储值变化 用于调用api
     */
    "$store.state.siteId": {
      immediate: true, // 首次加载的时候执行函数
      deep: true, // 深入观察,监听数组值，对象属性值的变化
      handler: function () {
        this.timeShare();
      },
    },
    select_value() {
      this.timeShare();
    },
  },
  methods: {
    timeShare() {
      var date_;
      this.select_value == 1 ? (date_ = 0) : (date_ = 1);
      api
        .timeShare({
          siteId: this.$store.state.siteId,
          type: date_,
        })
        .then((requset) => {
          if (requset.status === "SUCCESS") {
            this.initChart(requset.data);
          } else {
            ElMessage.success({
              message: requset.msg,
              type: "success",
            });
          }
        });
    },
    //次数分布折线图
    initChart(data) {
      console.log(data)
      var chart = echarts.init(this.$refs.eleShareChart);
      var option;
      var data_all = [
        {
          value: data.flat,
          // value: 4,
          name: "平",
        },
        {
          value: data.peak,
          //  value: 6,
          name: "峰",
        },
        {
          value: data.need,
          //  value: 8,
          name: "尖",
        },

        {
          value: data.grain,
          //  value: 10,
          name: "谷",
        },
      ];

      option = {
        color: ["#4BF7F9", "#35B9FD", "#FE7038", "#F7F94B"],
        grid: {
          left: -100,
          top: 50,
          bottom: 10,
          right: 10,
          containLabel: true,
        },
        tooltip: {
          trigger: "item",
          formatter: "{b} : {c} ({d}%)",
        },

        polar: {},
        angleAxis: {
          interval: 0,
          type: "category",
          data: [],
          z: 10,
          axisLine: {
            show: false,
          },
        },
        radiusAxis: {
          min: 40,
          max: 120,
          interval: 20,
          axisLine: {
            show: false,
            lineStyle: {
              color: "#0B3E5E",
              // width: 1,
              type: "solid",
            },
          },
          axisLabel: {
            formatter: "{value} %",
            show: false,
            padding: [0, 0, 20, 0],
            color: "red",
            fontSize: 16,
          },
          splitLine: {
            lineStyle: {
              color: "red",
              width: 0,
              type: "solid",
            },
          },
        },
        series: [
          {
            type: "pie",
            radius: ["70%", "71%"],
            hoverAnimation: false,
            labelLine: {
              normal: {
                show: false,
                length: 30,
                length2: 55,
              },
              emphasis: {
                show: false,
              },
            },
            name: "",
            data: [
              {
                name: "",
                value: 0,
                itemStyle: {
                  normal: {
                    color: "#0B4A6B",
                  },
                },
              },
            ],
          },
          {
            type: "pie",
            radius: ["0%", "60%"],
            roseType: "area",
            zlevel: 10,
            label: {
              normal: {
                show: true,
                formatter: `{b} : {c} kWh`,
                textStyle: {
                  fontSize: 12,
                  color: "#fff",
                },
                position: "outside",
              },
              emphasis: {
                show: true,
              },
            },

            data: data_all,
          },
        ],
      };
      chart.setOption(option, true);
      window.addEventListener("resize", () => {
        chart.resize();
      });
      this.chart = chart;
    },
  },
};
</script>
<style lang="scss">
</style>
