<template>
  <div class="zf-container">
    <div class="tabgrap">
      <div class="grap-item">
        <div class="item-title">执法监督工作总量</div>
        <div class="item-data">
          <span class="data-value">34223</span>
          <span class="data-lable">次</span>
        </div>
      </div>
      <div class="grap-item" style="margin-left: 20px">
        <div class="item-title">日常监督检查开展</div>
        <div class="item-data">
          <span class="data-value">35323</span>
          <span class="data-lable">次</span>
        </div>
      </div>
    </div>
    <div id="zhi-fa"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {};
  },
  mounted() {
    this.initEcharts();
  },
  methods: {
    initEcharts() {
      let _this = this;
      var myChart = echarts.init(document.getElementById("zhi-fa"));
      const chartData = { min: 0, max: 100, value: 50 };
      let option = {
        series: [
          {
            name: "风险指数",
            type: "gauge",
            center: ["50%", "95%"],
            radius: "80%",
            min: chartData.min,
            max: chartData.max,
            startAngle: 180,
            endAngle: 0,
            splitNumber: 8,
            axisLine: {
              lineStyle: {
                color: [
                  [0.25, "#FF6060"],
                  [0.5, "#F88129"],
                  [0.75, "#FCD678"],
                  [1, "#33BAAB"],
                ],
                width: 15,
              },
            },
            splitLine: {
              // 分隔线
              show: false,
            },
            axisTick: {
              // 刻度线样式（及短线样式）
              show: false,
            },
            axisLabel: false,
            detail: {
              fontSize: _this.getFontSize(100),
              formatter: "{value}%",
              color: "auto",
              offsetCenter: ["0", "-32%"],
            },
            pointer: {
              icon: "triangle",
              show: true,
              offsetCenter: [0, "-55%"],
              itemStyle: {
                color: "auto",
              },
              length: "10%",
              width: "7%",
            },
            title: {
              // fontSize: 12,
              // offsetCenter: [0, -20],
            },
            data: [
              {
                title: {
                  show: true,
                  color: "#333333",
                  offsetCenter: [0, "-6%"],
                  fontSize: _this.getFontSize(140),
                },
                value: chartData.value,
                name: "检查完成率",
              },
            ],
          },
        ],
      };

      myChart.setOption(option, true);
    },
  },
};
</script>

<style lang="scss" scoped>
.zf-container {
  height: 100%;
  width: 100%;
  position: relative;
  #zhi-fa {
    height: 100%;
    width: 100%;
  }
  .tabgrap {
    position: absolute;
    z-index: 100;
    left: 50%;
    top: 20px;
    transform: translateX(-50%);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    .grap-item {
      width: 195px;
      height: 89px;
      background: url("../../../../assets/images/grapItem.png");
      background-size: 100% 100%;
      padding: 8px 20px;
      .item-title {
        font-size: 16px;
        font-weight: 400;
        color: #3d3f40;
      }
      .item-data {
        margin-top: 6px;
        span {
          display: inline-block;
        }
        .data-value {
          font-size: 36px;
          font-family: "DIN-Medium";
          font-weight: 500;
          color: #0e7cf4;
        }
        .data-lable {
          font-size: 14px;
          font-weight: 400;
          color: #3d3f40;
          margin-left: 6px;
        }
      }
    }
  }
}
</style>
