<template>
  <div class="leftTop">
    <dv-border-box-13>
      <dv-charts :option="option"></dv-charts>
      <section class="dataSection">
        <p>总人数<span class="numFont">400</span></p>
        <p>进行中<span class="numFont">180</span></p>
        <p>待进行<span class="numFont">220</span></p>
      </section>
    </dv-border-box-13>
  </div>
</template>

<script>
export default {
  data() {
    return {
      option: {
        series: [
          {
            type: 'gauge',
            startAngle: -Math.PI / 2,
            endAngle: Math.PI * 1.5,
            arcLineWidth: 35,
            center: ['50%', '45%'],
            data: [{ name: 'itemA', value: 80, gradient: ['#03c2fd', '#1ed3e5', '#2fded6'] }],
            axisLabel: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            pointer: {
              show: false,
            },
            dataItemStyle: {
              lineCap: 'round',
            },
            details: {
              show: true,
              formatter: '首台准点率 {value}%',
              style: {
                fill: 'aqua',
                fontSize: 24,
              },
            },
            backgroundArc: {
              style: {
                stroke: '#4F518C',
              },
            },
          },
        ],
      },
    };
  },
};
</script>

<style lang="scss" scoped>
.leftTop {
  height: 59%;
  position: relative;
  :deep(.dv-border-box-13) {
    padding: 2vh;
    box-sizing: border-box;
    .dv-charts-container {
      height: 80%;
    }
  }
  .dataSection {
    width: 100%;
    position: absolute;
    bottom: 1.2vh;
    p {
      color: #fff;
      font-size: 2.4vh;
      text-align: center;
      letter-spacing: .2vh;
      line-height: 4vh;
      span {
        font-size: 2.6vh;
        color: aqua;
        letter-spacing: 0.1vh;
        margin-left: 1vh;
      }
    }
  }
}
</style>
