<template>
  <div>
    <div ref="chart" class="item" style="width: 440px; height: 259px" />
  </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();
  },
  methods: {
    initChart(data) {
      const option = {
        tooltip: {
          trigger: "item",
          textStyle: {
            fontSize: 12,
          },
          formatter: "{b} <br/>{c}",
        },
        legend: {
          show: true,
          right: 0,
          top: "20%",
          itemWidth: 10,
          itemHeight: 10,
          itemGap: 30,
          orient: "vertical",
          textStyle: {
            color: "#fff",
            fontSize: 14,
          },
          data: ["高风险", "一般风险", "较高风险", "低风险"],
        },
        color: ["#FF0B0B", "#ff833d", "#fbff3d", "#35c2ff"],
        series: [
          // 数据展示层
          {
            name: "建筑总数",
            type: "pie",
            center: ["40%", "50%"],
            radius: ["10%", "65%"],
            avoidLabelOverlap: false,
            label: {
              normal: {
                color: "#fff",
                show: true,
                position: "outside",
                formatter: (params) => {
                  return "{value|" + params.value + "}{unit|栋}";
                },
                padding: [0, -90],
                align: "center",
                rich: {
                  value: {
                    fontSize: 26,
                    padding: [0, 0, 10, 15],
                  },
                  unit: {
                    fontSize: 14,
                    padding: [0, 0, 10, 0],
                  }
                },
              }
            },
            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",
            zlevel: 4,
            silent: true,
            center: ["40%", "50%"],
            radius: ["75%", "76%"],
            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({
            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>
