technique_web3/src/views/main/elevenHatch/path/echarts6.vue

<template>
  <div>
    <div ref="echarts6" class="echarts6" style="height: 200px; width: 100%"></div>
  </div>
</template>
<style scoped></style>
<script setup>
import * as echarts from 'echarts'
const echarts6 = ref()
onMounted(() => {
  drawEcharts6()
})
function drawEcharts6() {
  var myChart6 = echarts.init(echarts6.value)
  var b = 298
  var c = 523
  var d = b + c
  var option6 = {
    series: [
      {
        type: 'pie',
        radius: ['60%', '70%'],
        color: '#cdba00',
        label: {
          normal: {
            position: 'center'
          }
        },
        data: [
          {
            value: b,
            name: '男消费',
            label: {
              normal: {
                formatter: b + '',
                textStyle: {
                  fontSize: 20,
                  color: '#fff'
                }
              }
            }
          },
          {
            value: c,
            name: '女消费',
            label: {
              normal: {
                formatter: function () {
                  return '占比' + Math.round((b / d) * 100) + '%'
                },
                textStyle: {
                  color: '#aaa',
                  fontSize: 12
                }
              }
            },
            itemStyle: {
              normal: {
                color: 'rgba(255,255,255,.2)'
              },
              emphasis: {
                color: '#fff'
              }
            }
          }
        ]
      }
    ]
  }
  myChart6.setOption(option6)
}
</script>