<template>
  <div>
    <div ref="chart" class="item" style="width: 440px; height: 259px" />
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  props: {
    riskList: Array,
    qy: String,
  },
  data() {
    return {
      chart: null,
      timer: "",
      label: [],
      labelColor: {
        重大风险: "#FF0B0B",
        较大风险: "#ff833d",
        一般风险: "#fbff3d",
        低风险: "#35c2ff",
      },
    };
  },
  watch: {
    riskList: {
      handler(val) {
        if (val.length > 0) {
          this.$nextTick(() => {
            const chartDom = this.$refs.chart;
            // 初始化图表实例
            this.chart = echarts.init(chartDom);

            this.initChart(this.riskList);
          });
        }
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    initChart(srcData) {
      let data = [];
      srcData.forEach((p) => {
        data.push({
          value: p.sl,
          name: p.fxdj,
        });
      });
      // console.log(data);

      // 排序
      data = data.sort(function (a, b) {
        if (a.name === "重大风险") {
          return -3;
        } else if (a.name === "较大风险") {
          return -2;
        } else if (a.name === "一般风险") {
          return -1;
        } else if (a.name === "低风险") {
          return 0;
        }
      });
      // console.log(data);
      // const d1 = data.find((p) => p.name === "一般风险");
      // d1.value = 300;
      // const d = data.find((p) => p.name === "低风险");
      // d.value = 1000;
      let sum = 0;
      data.forEach((item) => {
        sum += item.value;
      });

      let addUp = 0;
      let minHeight = 2;
      let top = 5;
      let color = ["#FF0B0B", "#ff833d", "#fbff3d", "#35c2ff"];

      data = data.map((item, index) => {
        let itemValue = 0;
        if ((item.value / sum) * 100 < minHeight) itemValue = minHeight;
        else itemValue = (item.value / sum) * 100;
        top += itemValue;
        return {
          value: (addUp += itemValue),
          name: item.name,
          realValue: item.value,
          label: {
            show: true,
            color: color[index],
            fontSize: 14,
            position: index % 2 === 0 ? "left" : "right",
            formatter: () => {
              return  `${item.name} ${item.value} 个`;
            },
          },
          labelLine: {
            show: true,
            length: index === 0 ? 100 : 20,
            length2: 30,
          },
          itemStyle: {
            height: `${itemValue + 5}%`,
            borderColor: color[index],
            borderWidth: 5,
            shadowColor: color[index],
            shadowBlur: 100,
          },
        };
      });

      const option = {
        backgroundColor: "#0d3059",
        color,
        series: [
          {
            type: "funnel",
            sort: "ascending",
            data: data,
            maxSize: "60%"
          },
        ],
        legend: {
          show: true,
          // right: 20,
          bottom: 10,
          itemWidth: 10,
          itemHeight: 10,
          itemGap: 4,
          textStyle: {
            color: "#fff",
            fontSize: 14,
          },
          data: data.map((p) => p.name),
        },
      };
      this.chart.setOption(option);
      //自适应图表
      window.onresize = this.chart.resize;
    },
    createData() {
      let dataArr = [];
      for (var i = 0; i < 200; i++) {
        if (i % 2 === 0) {
          dataArr.push({
            value: 25,
            itemStyle: {
              normal: {
                color: "#0475bd",
                borderWidth: 0,
                borderColor: "rgba(0,0,0,0)",
              },
            },
          });
        } else {
          dataArr.push({
            value: 20,
            itemStyle: {
              normal: {
                color: "rgba(0,0,0,0)",
                borderWidth: 0,
                borderColor: "rgba(0,0,0,0)",
              },
            },
          });
        }
      }
      return dataArr;
    },
  },
};
</script>

<style scoped></style>
