<template>
  <div class="leftBottom">
    <dv-border-box-13 class="leftBottom">
      <div class="echartsContainer" ref="echartsContainer"></div>
      <section class="dataSection">
        <span>平均接台时间</span>
      </section>
    </dv-border-box-13>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  data() {
    return {
      chartOptions: {
        series: [
          {
            type: 'gauge',
            radius: '100%',
            max: 120,
            axisLabel: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                width: 20,
                color: [[1, 'rgba(126, 130, 137, 0.3)']],
              },
            },
            progress: {
              show: true,
              width: 20,
              itemStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    { offset: 0, color: '#03c2fd' },
                    { offset: 0.5, color: '#1ed3e5' },
                    { offset: 1, color: '#2fded6' },
                  ],
                },
              },
            },
            pointer: {
              icon: 'rect',
              width: 3,
              offsetCenter: ['0%', '-40%'],
              itemStyle: {
                color: 'rgba(139, 230, 253, 1)',
              },
            },
            data: [
              {
                name: 'itemA',
                value: 45,
                title: { show: false },
                detail: {
                  offsetCenter: [0, '20%'],
                  formatter: function (value) {
                    return '{a|' + value + '}{b|min}';
                  },
                  rich: {
                    a: {
                      fontSize: 40,
                      color: '#4AC9FF',
                      fontFamily: 'DIN-Bold,Microsoft YaHei',
                    },
                    b: {
                      fontSize: 20,
                      color: '#4AC9FF',
                      fontFamily: 'DIN-Bold,Microsoft YaHei',
                      verticalAlign: 'bottom',
                    },
                  },
                },
              },
            ],
          },
        ],
      },
    };
  },
  mounted() {
    const chartContainer = this.$refs.echartsContainer;
    const chart = echarts.init(chartContainer);
    chart.setOption(this.chartOptions);
  },
};
</script>

<style lang="scss" scoped>
@import '@/assets/scss/pxtovw.scss';
.leftBottom {
  height: vw(380);
  background: #011343;
  :deep(.dv-border-box-13) {
    padding: vw(50) 0;
    box-sizing: border-box;
    .border-box-content {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .echartsContainer {
        height: vw(252);
      }
      .dataSection {
        width: vw(280);
        height: vw(48);
        line-height: vw(48);
        text-align: center;
        font-size: 0;
        margin: 0 auto;
        span {
          display: inline-block;
          height: 100%;
          width: vw(280);
          background-color: rgba(3, 47, 104, 0.6);
          font-size: vw(18);
          color: #fff;
          border-radius: vw(8);
        }
      }
    }
  }
}
</style>
