cxyy-web/src/views/elevenHatch copy/path/echarts5.vue

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