<template>
  <div class="round">
    <div ref="chartDom" class="pie"></div>
  </div>
</template>
<style scoped lang="scss">
.round {
  display: flex;
  justify-content: space-between;
  height: 270px;
  width: 100%;
  .pie {
    width: 100%;
  }
}
</style>
<script setup>
import * as echarts from 'echarts'
const chartDom = ref()
onMounted(() => {
  chartDomAvitve()
})
function chartDomAvitve() {
  const myChart1 = echarts.init(chartDom.value)
  const option1 = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      top: '5%',
      left: 'center'
    },
    series: [
      {
        name: '用户构成',
        type: 'pie',
        radius: ['30%', '60%'],
        data: [
          { value: 1048, name: '普通用户' },
          { value: 735, name: '专家' },
          { value: 735, name: '企业' },
          { value: 580, name: '第三方' },
          { value: 484, name: '院校' },
          { value: 300, name: '科技局' }
        ]
      }
    ]
  }
  myChart1.setOption(option1)
  window.addEventListener('resize', function () {
    myChart1.resize()
  })
}
</script>
