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

<template>
  <div ref="echarts2" class="echarts2"></div>
</template>
<style scoped lang="scss">
.echarts2 {
  height: 18vh;
  width: 100%;
}
</style>
<script setup>
import * as echarts from 'echarts'
const echarts2 = ref()
onMounted(() => {
  echarts2View()
})
function echarts2View() {
  const myChart2 = echarts.init(echarts2.value)
  const option2 = {
    series: [
      {
        type: 'pie',
        radius: ['55%', '70%'],
        color: ['#1E90FF', '#00FFFF', '#B0E0E6', '#00BFFF'],
        avoidLabelOverlap: false,
        label: {
          alignTo: 'labelLine',
          lineHeight: 15,
          edgeDistance: 10,
          color: '#FFFFFF',
          fontSize: '14'
        },
        emphasis: {
          label: {
            show: false
          }
        },
        labelLine: {
          show: true
        },
        data: [
          { value: 1048, name: '软件' },
          { value: 735, name: '互联网' },
          { value: 1048, name: '大数据' },
          { value: 735, name: '通信' }
        ]
      }
    ]
  }
  myChart2.setOption(option2)
  window.addEventListener('resize', function () {
    myChart2.resize()
  })
}
</script>