vue实现男女比例图表

在Vue.js中实现男女比例的图表，你可以选择多种前端数据可视化库，如ECharts、AntV或是Chart.js等。以下是使用Element Plus（基于Vue的一个组件库）结合Chart.js的基本步骤：

1. 安装依赖：

   npm install element-plus chart.js @vue/compiler-sfc

2. 引入所需模块：

   <script setup>
       import { ref } from 'vue';
       import { Pie } from 'element-plus/charts';
   </script>

3. 创建数据模型：

   const sexData = {
       male: ref(50),
       female: ref(50) // 这里假设男女人数比例为1:1，实际替换为你的数据
   };

4. 渲染图表：

   <template>
       <div>
           <Pie :data="sexData" :options="chartOptions"></Pie>
       </div>
   </template>

   <script setup>
       const chartOptions = {
           labels: ['男性', '女性'],
           data: [sexData.male.value, sexData.female.value],
           options: {
               responsive: true,
               tooltips: {
                   enabled: false, // 关闭默认提示
               },
               legend: {
                   display: false // 隐藏图例
               }
           }
       };
   </script>

5. 更新数据：
当你的男女比例数据发生变化时，只需要更新`sexData`引用即可：

   sexData.male.value = 70; // 更改男性人数
   sexData.female.value = 30; // 更改女性人数