<template >
  <div style="display: flex; justify-content: center">
    <div ref="fireReason" style="width: 100%; height: 287px"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { fireReason } from "@/api/hzfx";
import toolUtils from "@/utils/echartsTooltip";
export default {
  name: "FireReason",
  props: {
    qx: String,
  },
  data() {
    return {
      chart: null,
      data: [],
    };
  },
  mounted() {
    // 初始化起火原因
    this.init();
  },
  computed: {
    legend() {
      return this.data.map((item) => item.name);
    },
  },
  created() {
    this.loadData();
  },
  watch: {
    data: {
      handler() {
        this.reload();
      },
      deep: true,
    },
    qx() {
      this.loadData();
    },
  },
  methods: {
    init() {
      this.chart = echarts.init(this.$refs.fireReason);
      this.chart.setOption({
        tooltip: {
          trigger: "item",
          axisPointer: {
            type: "shadow",
          },
          textStyle: {
            fontSize: 12,
          },
          formatter: "{c} <br/>{b}",
        },
        legend: {
          show: true,
          // right: 0,
          bottom: 10,
          itemWidth: 14,
          itemHeight: 14,
          itemGap: 8,
          textStyle: {
            color: "#fff",
            fontSize: 14,
          },
          data: this.legend,
        },
        color: [
          "#00a2ff",
          "#00eaff",
          "#16c843",
          "#f4d156",
          "#6421ba",
          "#61d266",
        ],
        series: [
          // 数据展示层
          {
            name: "存在隐患数",
            type: "pie",
            center: ["50%", "50%"],
            radius: ["25%", "60%"],
            avoidLabelOverlap: true,
            label: {
              normal: {
                color: "#fff",
                show: true,
                formatter: (params) => {
                  return `{value|${params.percent}%}`;
                },
                alignTo: "edge",
                minMargin: 5,
                edgeDistance: 10,
                lineHeight: 20,
                rich: {
                  value: {
                    fontSize: 20,
                    color: "#44F1FF",
                    padding: [0, 0, 12, 0],
                  },
                },
              },
            },
            labelLine: {
              length: 20,
              length2: 0,
              maxSurfaceAngle: 80,
              lineStyle: {
                color: "#fff",
                type: "dashed",
              },
            },
            labelLayout: (params) => {
              const isLeft = params.labelRect.x < this.chart.getWidth() / 3;
              const points = params.labelLinePoints;
              // Update the end point.
              points[2][0] = isLeft
                ? params.labelRect.x
                : params.labelRect.x + params.labelRect.width;
              return {
                labelLinePoints: points,
              };
            },
            data: this.data,
          },
          {
            type: "pie",
            center: ["50%", "50%"],
            radius: ["30%", "55%"],
            hoverAnimation: false,
            z: 10,
            label: {
              show: false,
            },
            tooltip: {
              show: false,
            },
            data: this.data.map((item) => ({
              ...item,
              itemStyle: {
                normal: {
                  color: "rgba(0,0,0, .15)",
                },
              },
            })),
            labelLine: {
              show: false,
            },
          },
          {
            type: "pie",
            center: ["50%", "50%"],
            radius: ["45%", "46%"],
            hoverAnimation: false,
            z: 10,
            label: {
              show: false,
            },
            tooltip: {
              show: false,
            },
            data: this.data.map((item) => ({
              ...item,
              itemStyle: {
                normal: {
                  color: "rgba(0,255,255)",
                  opacity: 0.15,
                },
              },
            })),
            labelLine: {
              show: false,
            },
          },
          {
            type: "pie",
            center: ["50%", "50%"],
            radius: ["45%", "46%"],
            hoverAnimation: false,
            z: 10,
            label: {
              show: false,
            },
            tooltip: {
              show: false,
            },
            data: this.data.map((item) => ({
              ...item,
              itemStyle: {
                normal: {
                  color: "rgba(0,133,255)",
                  opacity: 0.15,
                },
              },
            })),
            labelLine: {
              show: false,
            },
          },
        ],
      });
    },
    reload() {
      const option = {
        legend: {
          data: this.legend,
        },
        series: [
          {
            data: this.data,
          },
          {
            data: this.data.map((item) => ({
              ...item,
              itemStyle: {
                normal: {
                  color: "rgba(0,0,0, .15)",
                },
              },
            })),
          },
          {
            data: this.data.map((item) => ({
              ...item,
              itemStyle: {
                normal: {
                  color: "rgba(0,133,255)",
                  opacity: 0.15,
                },
              },
            })),
          },
        ],
      };
      this.chart.setOption(option);
      // 自动轮播
      toolUtils.autoHover(this.chart, option, this.legend.length, 2000);
      // console.log(this.legend);
    },
    loadData() {
      fireReason({
        pageSize: 100,
        qx: this.qx === "重庆市" ? "" : this.qx,
        qhsj: "2023",
      }).then((res) => {
        this.data = res.data.rows.map((item) => ({
          name: item.qhyy1,
          value: item.sl,
        }));
      });
    },
  },
};
</script>

<style scoped lang='less'>
</style>
