<template>
  <div :id="id" style="width: 100%; height: 100%"></div>
</template>

<script>
import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import { on, off } from "@/libs/tools";
import resize from "../Charts/mixins/resize";
export default {
  mixins: [resize],
  props: {
    id: String,
    EchartsData: {},
    title: String,
  },
  data() {
    return {
      Chart: null,
      option: {
        title: {
          text: "",
          left: "5%",
          textStyle: {
            color: "white",
            fontStyle: "normal",
            fontSize: 14,
            fontWeight: 540,
          },
        },
        color: ["#3DE2B0", "#699EFF", "#D14A61", "#FFC700", "#FB775D"],
        grid: {
          left: "5%",
          // top: "10%",
          // bottom: "5%",
          right: "5%",
          z: 22,
          containLabel: true,
        },
        tooltip: {
          trigger: "item",
          backgroundColor: "#fff",
          textStyle: {
            color: "#333333",
          },
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: false, // 默认为直线，可选为：'line' | 'shadow'
          },
          extraCssText: "box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);",
          confine: true,
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          type: "scroll",
          orient: "vertical",
          right: 2,
          top: 20,
          bottom: 20,
          textStyle: {
            color: "white",
          },
          data: [],
        },
        series: [],
      },
    };
  },
  methods: {
    initEchart(response) {
      let xTitle = response.xtitle;
      let data = response.data;
      let showData = [];
      data.forEach((items) => {
        showData.push({
          name: items.label,
          value: items.value,
          labelLine: { show: true },
          label: { show: true },
        });
      });
      this.option.legend.data = showData.map((_) => {
        if (_.value != 0) {
          return _.name;
        }
      });
      this.option.series = [];
      this.option.series = [
        {
          name: this.title,
          type: "pie",
          radius: "55%",
          center: ["40%", "50%"],
          label: {
            textStyle: {
              color: "white",
            },
            formatter: function (params) {
              if (params.value > 0) {
                params.data.labelLine.show = true;
                return params.name;
              } else {
                params.data.labelLine.show = false;
                return "";
              }
            },
          },
          data: showData,
          itemStyle: {
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
      ];
      this.option.title.text = this.title;
      var chartsDiv = document.getElementById(this.id);//id要填
      this.Chart = echarts.init(chartsDiv, "macarons");
      this.Chart.setOption(this.option);
      const vm = this;
      this.Chart.on("click", { seriesIndex: 0, name: "其他" }, function () {
        vm.$emit("showOther");
      });
      on(window, "resize", this.Chart.resize);
    },
  },
  mounted() {
  },
  watch: {
    EchartsData(newValue, oldValue) {
      this.initEchart(newValue);
    },
  },
  beforeDestroy() {
    if (!this.Chart) {
      return;
    }
    off(window, "resize", this.Chart.resize);
    this.Chart.dispose();
    this.Chart = null;
  },
};
</script>