<template>
  <div>
    <div class="title">
      <span>整改进度</span>
      <span>单位：条</span>
    </div>
    <div ref="chart" class="item" style="width: 259px; height: 201px" />
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "RectificationChart",
  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}",
        },
        title: {
          formatter: "3276存在隐患数"
        },
        legend: {
          show: true,
          right: 0,
          bottom: 0,
          itemWidth: 10,
          itemHeight: 10,
          itemGap: 4,
          textStyle: {
            color: "#fff",
            fontSize: 14,
          },
          data: ["待计划整改", "已计划待整改", "已整改"],
        },
        color: ["#f27d10", "#00eaff", "#16c843"],
        series: [
          // 数据展示层
          {
            name: "存在隐患数",
            type: "pie",
            center: ["50%", "45%"],
            radius: ["35%", "50%"],
            avoidLabelOverlap: false,
            label: {
              normal: {
                color: "#fff",
                show: true,
                formatter: (params) => {
                  return `{value|${params.value}}`;
                },
                alignTo: 'edge',
                minMargin: 5,
                edgeDistance: 10,
                lineHeight: 15,
                rich: {
                  value: {
                    fontSize: 20,
                    color: '#44F1FF',
                    padding: [0,0,12, 0]
                  }
                },
              }
            },
            labelLine: {
              length: 15,
              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: [
              {
                value: 615,
                name: "待计划整改",
              },
              {
                value: 432,
                name: "已计划待整改",
              },
              {
                value: 2372,
                name: "已整改",
              }
            ],
          },
          {
            type: "pie",
            center: ["50%", "45%"],
            radius: ["35%", "45%"],
            hoverAnimation: false,
            z: 10,
            label: {
              show: false
            },
            tooltip: {
              show: false,
            },
            data: [
              {
                value: 615,
                name: "待计划整改",
                itemStyle: {
                  normal: {
                    color: 'rgba(0,0,0, .3)'
                  }
                }
              },
              {
                value: 432,
                name: "已计划待整改",
                itemStyle: {
                  normal: {
                    color: 'rgba(0,0,0, .3)'
                  }
                }
              },
              {
                value: 2372,
                name: "已整改",
                itemStyle: {
                  normal: {
                    color: 'rgba(0,0,0, .3)'
                  }
                }
              }
            ],
            labelLine: {
              show: false,
            },

          },
          // 外边框虚线
          {
            type: "pie",
            zlevel: 4,
            silent: true,
            center: ["50%", "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>
