admin/src/views/control/resource/echarts/echarts1.vue

<template>
  <div ref="echarts1" class="echarts1"></div>
</template>
<style scoped lang="scss">
.echarts1 {
  height: 100%;
  width: 100%;
}
</style>
<script setup>
import * as echarts from 'echarts'
const echarts1 = ref()
onMounted(() => {
  echarts1View()
})
function echarts1View() {
  const myChart1 = echarts.init(echarts1.value)
  const option1 = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: '分区状态',
        type: 'pie',
        radius: '80%',
        itemStyle: {
          normal: {
            label: {
              show: true,
              formatter: '{b} : ({c})'
            }
          },
          labelLine: { show: true }
        },
        data: [
          { value: 5, name: '满载' },
          { value: 24, name: '空闲' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }
  myChart1.setOption(option1)
  window.addEventListener('resize', function () {
    myChart1.resize()
  })
}
</script>