<template>
  <div>
    <div class="title">
      <span>隐患类型</span>
      <span>单位：条</span>
    </div>
    <div ref="chart" class="item" style="width: 175px; height: 201px" />
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      chart: null,
      timer: "",
    };
  },
  mounted() {
    const chartDom = this.$refs.chart;
    //   // 初始化图表实例
    this.chart = echarts.init(chartDom);
    this.initChart();
    // setTimeout(startTimer, 500);
  },
  methods: {
    initChart() {
      const option = {
        // backgroundColor: '#043e9e',
        tooltip: {
          trigger: "item",
          axisPointer: {
            type: "shadow",
          },
          textStyle: {
            fontSize: 12,
          },
          formatter: "{c} <br/>{b}",
        },
        legend: {
          show: true,
          right: 0,
          bottom: 0,
          itemWidth: 10,
          itemHeight: 10,
          itemGap: 8,
          textStyle: {
            color: "#fff",
            fontSize: 14,
          },
          data: ["消防设施", "生命通道", "用电勇气", "消防管理"],
        },
        color: ["#00a2ff", "#00eaff", "#16c843", "#99f7ff"],
        series: [
          // 数据展示层
          {
            name: "建筑总数",
            type: "pie",
            center: ["40%", "45%"],
            radius: ["35%", "50%"],
            avoidLabelOverlap: false,
            label: {
              normal: {
                color: "#fff",
                show: true,
                position: "outside",
                formatter: (params) => {
                  return `{value|${params.value}}`;
                },
                padding: [0, -90],
                align: "center",
                rich: {
                  value: {
                    fontSize: 16,
                    color: '#44F1FF',
                    padding: [0,0,10, 15],
                  }
                },
              }
            },
            labelLine: {
              normal: {
                show: true,
                length2: 75,
                lineStyle: {
                  color: "#fff",
                  type: 'dashed'
                }
              },
            },
            data: [
              {
                value: 14489,
                name: "消防设施",
              },
              {
                value: 14467,
                name: "生命通道",
              },
              {
                value: 37234,
                name: "用电勇气",
              },
              {
                value: 37255,
                name: "消防管理",
              },
            ],
          },
          {
            type: "pie",
            center: ["40%", "45%"],
            radius: ["35%", "45%"],
            hoverAnimation: false,
            z: 10,
            label: {
              show: false
            },
            tooltip: {
              show: false,
            },
            data: [
              {
                value: 14489,
                name: "消防设施",
                itemStyle: {
                  normal: {
                    color: 'rgba(0,0,0, .3)'
                  }
                }
              },
              {
                value: 14467,
                name: "生命通道",
                itemStyle: {
                  normal: {
                    color: 'rgba(0,0,0, .3)'
                  }
                }
              },
              {
                value: 37234,
                name: "用电勇气",
                itemStyle: {
                  normal: {
                    color: 'rgba(0,0,0, .3)'
                  }
                }
              },
              {
                value: 37255,
                name: "消防管理",
                itemStyle: {
                  normal: {
                    color: 'rgba(0,0,0, .3)'
                  }
                }
              },
            ],
            labelLine: {
              show: false,
            },

          },
          // 外边框虚线
          {
            type: "pie",
            zlevel: 4,
            silent: true,
            center: ["40%", "45%"],
            radius: ["55%", "56%"],
            label: {
              normal: {
                show: false,
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: this.createData(),
          },
        ],
      };

      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({
            //name: (i + 1).toString(),
            value: 25,
            itemStyle: {
              normal: {
                color: "#0475bd",
                borderWidth: 0,
                borderColor: "rgba(0,0,0,0)",
              },
            },
          });
        } else {
          dataArr.push({
            //name: (i + 1).toString(),
            value: 20,
            itemStyle: {
              normal: {
                color: "rgba(0,0,0,0)",
                borderWidth: 0,
                borderColor: "rgba(0,0,0,0)",
              },
            },
          });
        }
      }
      return dataArr;
    },
  },
};
</script>

<style scoped>
.title {
  display: flex;
  padding: 15px 10px 0px 10px;
  justify-content: space-between;
}
</style>
