<template>
  <div>
    <div class="background" style="height: 100%">
      <div class="title">当日任务完成率</div>
      <div style="width: 18vw; height: 20vh; margin: auto auto" id="shuttlesTaskCompleteRadio"></div>
    </div>
  </div>
</template>

<script>
// import  《组件名称》  from '《组件路径》 ';

export default {
  // import 引入的组件需要注入到对象中才能使用
  components: {},
  props: [],
  emits: [],
  data() {
    // 这里存放数据
    return {

      // 图表实例
      chart: null,
      // 柱状图数据
      option: {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'horizontal',
          align: 'left',
          x: 'right',
          y: 'bottom',
          textStyle: {
            color: '#fff',
            fontSize: '12'
          }
        },
        color: ['rgb(179,230,97)', '#ffda01'],
        series: [
          {
            name: '任务完成率',
            type: 'pie',
            radius: ['30%', '55%'],
            padAngle: 5,
            itemStyle: {
              borderRadius: 3
            },
            label: {
              show: true,
              position: 'top',
              formatter: '{b}' + '\n\r' + '{d}%',
              color: '#fff'
            },
            labelLine: {
              show: true,
              smooth: true,
              lineStyle: {
                color: '#fff'
              }
            },
            data: [
              {value: 60, name: '已完成'},
              {value: 40, name: '未完成'}
            ]
          }
        ]
      }
    }
  },
  // 计算属性 类似于 data 概念
  computed: {},
  // 监控 data 中的数据变化
  watch: {},
  // 方法集合
  methods: {
    setOptions() {
      if(!this.chart) {
        const dom = document.getElementById('shuttlesTaskCompleteRadio');
        this.chart = this.$echarts.init(dom);
      }
      this.option.series[0].data = [
        {value: 60, name: '已完成'},
        {value: 40, name: '未完成'}
      ];
      let randomArr = [];
      for (let i = 0; i < 2; i++) {
        randomArr.push({
          value: Math.floor(Math.random() * 100 + 30),
          name: i === 0 ? '已完成' : i === 1 ? '未完成' : '其他'
        })
      }
      this.option.series[0].data = randomArr;
      this.chart.setOption(this.option, true);
    }
  },
  // 组合式 API
  setup() {
  },
  // 创建之前
  beforeCreate() {
  },
  // 创建完成(可以访问 this 实例)
  created() {
  },
  // 生命周期 - 挂载之前
  beforeMount() {
  },
  // 生命周期 - 挂载完成（可以访问 DOM 元素）
  mounted() {
    this.setOptions();
    setInterval(() =>
    {
      this.setOptions();
    }, 3000)
  },
  // 更新之前
  beforeUpdate() {
  },
  // 更新之后
  updated() {
  },
  // 销毁之前
  beforeUnmount() {
  },
  // 销毁完成
  unmounted() {
  }
}
</script>

<style scoped>
.title {
  font-size: 1.2rem;
  font-weight: bold;
  color: #e2e2e2;
  padding-left: 25px;
  padding-top: 18px;
}
.background {
  position: relative;
  height: 100%;
  width: 100%;
}
.title:before {
  position: absolute;
  height: 1.2rem;
  width: 4px;
  background: #49bcf7;
  border-radius: 5px;
  content: "";
  left: 15px;
  top: 22px;
}
</style>