cxyy-web/src/views/brain/two/echarts5.vue

<template>
  <div ref="echarts5" class="echarts5"></div>
</template>
<style scoped lang="scss">
.echarts5 {
  height: 13vh;
  width: 100%;
}
</style>
<script setup>
import * as echarts from 'echarts'
const echarts5 = ref()
onMounted(() => {
  echarts5View()
})
function echarts5View() {
  const myChart5 = echarts.init(echarts5.value)
  const option5 = {
    series: [
      {
        type: 'pie',
        radius: ['75%', '90%'],
        avoidLabelOverlap: false,
        color: ['#1E90FF', '#00FFFF'],
        label: {
          position: 'center',
          color: '#FFFFFF',
          fontSize: '14'
        },
        emphasis: {
          label: {
            show: false
          }
        },
        labelLine: {
          show: true
        },
        data: [
          { value: 1048, name: '占比80%' },
          { value: 735, name: '占比20%' }
        ]
      }
    ]
  }
  myChart5.setOption(option5)
  window.addEventListener('resize', function () {
    myChart5.resize()
  })
}
</script>