<template>
  <div style="display: flex;justify-content: space-around;">
    <div class="monthlybox" style="padding-left: 20px;">
      <div class="mon1 lv">
        <p>当日台次</p>
        <h4><span>{{ monthlydatas.today_count }}</span>台</h4>
      </div>
      <div class="mon2 lan">
        <p>本月累计</p>
        <h4><span>{{ monthlydatas.month_count
        }}</span>台</h4>
      </div>
      <div class="mon3 huang">
        <p>单车毛利</p>
        <h4><span>{{ monthlydatas.profit_amount
        }}</span>元</h4>
      </div>
    </div>
    <div class="monthlybox">
      <p style="margin-top: 20px;">台次环比</p>
      <div id="tchb"></div>
      <p style="margin-bottom: 20px;">完成率{{ monthlydatas.wcl1
      }}</p>
      <div style="width: 80%;margin: 0 auto;"><el-progress :text-inside="true" define-back-color="gray" :stroke-width="12"
          :percentage="monthlydatas.wcl1"></el-progress></div>
    </div>
    <div class="monthlybox">
      <p style="margin-top: 20px;">利润环比</p>
      <div id="lrhb"></div>
      <p style="margin-bottom: 20px;">完成率{{ monthlydatas.wcl2 }}</p>
      <div style="width: 80%;margin: 0 auto;"><el-progress :text-inside="true" define-back-color="gray"
          color=" rgb(230, 162, 60)" :stroke-width="12" :percentage="monthlydatas.wcl2"></el-progress></div>
    </div>
  </div>
</template>
<script>
import * as echarts from 'echarts';
import { monthlydata } from "../../../servuces/prove";
export default {
  data() {
    return {
      monthlydatas: []
    }
  },
  mounted() {

    this.monthlydataapi()
  },
  methods: {
    chart6() {
      const tchb = document.getElementById('tchb');
      const myChart6 = echarts.init(tchb);
      const option6 = {

        tooltip: {
          formatter: '{a} <br/>{b} : {c}%'
        },
        series: [
          {
            name: 'Pressure',
            type: 'gauge',
            progress: {
              show: true
            },
            axisLabel: {
              show: false  // 将show设置为false来隐藏刻度值
            },
            axisLine: {
              lineStyle: {
                width: 3,  //仪表盘宽度
                color: [
                  [0.2, '#228b22'],
                  [0.8, '#0099ff'],
                  [1, '#F1060B']
                ],
              }
            },
            radius: '80%',//仪表盘大小
            detail: {
              valueAnimation: true,
              formatter: '{value}%',
              color: 'blueviolet',
              fontSize: 16,
              top: '30%',
              offsetCenter: [0, '70%']
            },
            data: [
              {
                value: this.monthlydatas.count_QOQ * 100,
              }
            ]
          }
        ]
      };



      option6 && myChart6.setOption(option6);
    },
    chart7() {
      const lrhb = document.getElementById('lrhb');
      const myChart7 = echarts.init(lrhb);
      const option7 = {

        tooltip: {
          formatter: '{a} <br/>{b} : {c}%'
        },
        series: [
          {
            name: 'Pressure',
            type: 'gauge',
            progress: {
              show: true
            },
            axisLabel: {
              show: false  // 将show设置为false来隐藏刻度值
            },
            axisLine: {
              lineStyle: {
                width: 2,  //仪表盘宽度
                color: [
                  [0.2, '#228b22'],
                  [0.8, '#0099ff'],
                  [1, '#F1060B']
                ],
              }
            },
            radius: '80%',//仪表盘大小
            detail: {
              valueAnimation: true,
              formatter: '{value}%',
              color: 'blueviolet',
              fontSize: 16,
              top: '30%',
              offsetCenter: [0, '70%']
            },
            data: [
              {
                value: this.monthlydatas.profit_amount_QOQ * 100,
              }
            ]
          }
        ]
      };
      option7 && myChart7.setOption(option7);
    },
    monthlydataapi() {
      monthlydata().then(res => {
        this.monthlydatas = res.data
        this.chart6()
        this.chart7()
      })
    }
  }
}

</script>
<style scoped>
::v-deep .el-progress-bar__innerText {
  display: block;
}

#lrhb {
  width: 180px;
  height: 135px;
}

#tchb {
  width: 180px;
  height: 135px;
}
</style>