<template>
  <div class="round">
    <div ref="bt011" class="pie"></div>
    <div ref="bt022" class="pie"></div>
    <div ref="bt033" class="pie"></div>
    <div ref="bt044" class="pie"></div>
  </div>
</template>
<style scoped lang="scss">
.round {
  display: flex;
  justify-content: space-between;
  height: 120px;
  width: 100%;
  .pie {
    width: 25%;
  }
}
</style>
<script setup>
import * as echarts from 'echarts'
const bt011 = ref()
const bt022 = ref()
const bt033 = ref()
const bt044 = ref()
onMounted(() => {
  bt01()
  bt02()
  bt03()
  bt04()
})
function bt01() {
  const myChart1 = echarts.init(bt011.value)
  const data1 = 104 //己完成
  const data2 = 18 //未完成
  const data3 = (data1 / (data1 + data2)) * 100
  const option1 = {
    title: [
      {
        text: data3.toFixed(1) + '%',
        x: 'center',
        y: '54%',
        textStyle: {
          fontSize: 18,
          fontWeight: 'bold',
          fontStyle: 'normal',
          color: '#fff'
        }
      },
      {
        text: '己完成',
        x: 'center',
        y: '68%',
        textStyle: {
          fontSize: 10,
          fontWeight: 'normal',
          fontStyle: 'normal',
          color: 'rgba(255,255,255,.6)'
        }
      },
      {
        text: '字段名称4',
        x: 'center',
        y: '20',
        textStyle: {
          fontSize: 14,
          fontWeight: 'bold',
          color: '#fff'
        }
      }
    ],
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    color: ['#58c485', '#ea7231'],
    series: [
      {
        name: '检点',
        type: 'pie',
        center: ['50%', '65%'],
        radius: ['45%', '60%'],
        startAngle: 360,
        avoidLabelOverlap: false,
        label: {
          normal: {
            show: false,
            position: 'center'
          },
          emphasis: {
            show: false,
            textStyle: {
              fontSize: '30',
              fontWeight: 'bold'
            }
          }
        },
        labelLine: {
          normal: {
            show: false
          }
        },
        data: [
          {
            value: data1,
            name: '己完成'
          },
          {
            value: data2,
            name: '未完成'
          }
        ]
      }
    ]
  }
  myChart1.setOption(option1)
  window.addEventListener('resize', function () {
    myChart1.resize()
  })
}
function bt02() {
  const myChart2 = echarts.init(bt022.value)
  const data1 = 14 //己完成
  const data2 = 18 //未完成
  const data3 = (data1 / (data1 + data2)) * 100
  const option2 = {
    title: [
      {
        text: data3.toFixed(1) + '%',
        x: 'center',
        y: '54%',
        textStyle: {
          fontSize: 18,
          fontWeight: 'bold',
          fontStyle: 'normal',
          color: '#fff'
        }
      },
      {
        text: '己完成',
        x: 'center',
        y: '68%',
        textStyle: {
          fontSize: 10,
          fontWeight: 'normal',
          fontStyle: 'normal',
          color: 'rgba(255,255,255,.6)'
        }
      },
      {
        text: '字段名称1',
        x: 'center',
        y: '20',
        textStyle: {
          fontSize: 14,
          fontWeight: 'bold',
          color: '#fff'
        }
      }
    ],
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    color: ['#58c485', '#ea7231'],
    series: [
      {
        name: '检点',
        type: 'pie',
        center: ['50%', '65%'],
        radius: ['45%', '60%'],
        startAngle: 360,
        avoidLabelOverlap: false,
        label: {
          normal: {
            show: false,
            position: 'center'
          },
          emphasis: {
            show: false,
            textStyle: {
              fontSize: '30',
              fontWeight: 'bold'
            }
          }
        },
        labelLine: {
          normal: {
            show: false
          }
        },
        data: [
          {
            value: data1,
            name: '己完成'
          },
          {
            value: data2,
            name: '未完成'
          }
        ]
      }
    ]
  }
  myChart2.setOption(option2)
  window.addEventListener('resize', function () {
    myChart2.resize()
  })
}
function bt03() {
  const myChart3 = echarts.init(bt033.value)
  const data1 = 104 //己完成
  const data2 = 108 //未完成
  const data3 = (data1 / (data1 + data2)) * 100
  const option3 = {
    title: [
      {
        text: data3.toFixed(1) + '%',
        x: 'center',
        y: '54%',
        textStyle: {
          fontSize: 18,
          fontWeight: 'bold',
          fontStyle: 'normal',
          color: '#fff'
        }
      },
      {
        text: '己完成',
        x: 'center',
        y: '68%',
        textStyle: {
          fontSize: 10,
          fontWeight: 'normal',
          fontStyle: 'normal',
          color: 'rgba(255,255,255,.6)'
        }
      },
      {
        text: '字段名称2',
        x: 'center',
        y: '20',
        textStyle: {
          fontSize: 14,
          fontWeight: 'bold',
          color: '#fff'
        }
      }
    ],
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    color: ['#58c485', '#ea7231'],
    series: [
      {
        name: '检点',
        type: 'pie',
        center: ['50%', '65%'],
        radius: ['45%', '60%'],
        startAngle: 360,
        avoidLabelOverlap: false,
        label: { show: false },
        labelLine: {
          normal: {
            show: false
          }
        },
        data: [
          {
            value: data1,
            name: '己完成'
          },
          {
            value: data2,
            name: '未完成'
          }
        ]
      }
    ]
  }
  myChart3.setOption(option3)
  window.addEventListener('resize', function () {
    myChart3.resize()
  })
}
function bt04() {
  const myChart4 = echarts.init(bt044.value)
  const data1 = 1000 //己完成
  const data2 = 552 //未完成
  const data3 = (data1 / (data1 + data2)) * 100
  const option4 = {
    title: [
      {
        text: data3.toFixed(1) + '%',
        x: 'center',
        y: '54%',
        textStyle: {
          fontSize: 18,
          fontWeight: 'bold',
          fontStyle: 'normal',
          color: '#fff'
        }
      },
      {
        text: '己完成',
        x: 'center',
        y: '68%',
        textStyle: {
          fontSize: 10,
          fontWeight: 'normal',
          fontStyle: 'normal',
          color: 'rgba(255,255,255,.6)'
        }
      },
      {
        text: '字段名称3',
        x: 'center',
        y: '20',
        textStyle: {
          fontSize: 14,
          fontWeight: 'bold',
          color: '#fff'
        }
      }
    ],
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    color: ['#58c485', '#ea7231'],
    series: [
      {
        name: '检点',
        type: 'pie',
        center: ['50%', '65%'],
        radius: ['45%', '60%'],
        startAngle: 360,
        avoidLabelOverlap: false,
        label: {
          normal: {
            show: false,
            position: 'center'
          },
          emphasis: {
            show: false,
            textStyle: {
              fontSize: '30',
              fontWeight: 'bold'
            }
          }
        },
        labelLine: {
          normal: {
            show: false
          }
        },
        data: [
          {
            value: data1,
            name: '己完成'
          },
          {
            value: data2,
            name: '未完成'
          }
        ]
      }
    ]
  }
  myChart4.setOption(option4)
  window.addEventListener('resize', function () {
    myChart4.resize()
  })
}
</script>
