html、css画饼状图上显示数字

在HTML和CSS中直接创建复杂的饼状图并显示数字通常不直观，因为它们主要用于结构内容展示而非数据可视化。不过你可以结合前端库如SVG（Scalable Vector Graphics）、D3.js或者第三方图表库（例如ECharts、Chart.js等）来实现这个需求。

以下是一个基本步骤：

1. HTML部分：
使用`<svg>`元素作为基础容器，创建扇形区域：

   <div id="pie-chart">
     <svg width="400" height="400">
       <!-- SVG 元素将在这里生成 -->
     </svg>
   </div>

2. CSS部分：
首先设置一些样式，比如圆和文本的颜色、字体等：

   #pie-chart {
     display: inline-block;
     position: relative;
   }
   svg {
     stroke: none;
     fill: none;
   }
   text {
     font-size: 16px;
     color: #fff;
   }

3. JavaScript或JavaScript库（如D3.js）部分：
- 定义数据结构和角度计算：

   const data = [/* 数字数组，表示各个部分的比例 */];
   const totalDegrees = data.reduce((acc, curr) => acc + (curr * 360 / data.length), 0);

- 创建扇形路径并添加文字标签：

   data.forEach((value, index) => {
     const angleInDegrees = value * 360 / totalDegrees;
     const outerRadius = 180;
     const innerRadius = outerRadius - Math.PI * (outerRadius / 5); // 可调整间隙

     d3.select('svg')
       .append('path')
       .attr('d', `M ${outerRadius} 0 L ${outerRadius * Math.cos(angleInDegrees)} ${outerRadius * Math.sin(angleInDegrees)} ${innerRadius * Math.cos(angleInDegrees)} ${innerRadius * Math.sin(angleInDegrees)} Z`)
       .style('fill', `hsl(${index * 60}, 70%, 50%)`);

     // 添加文字标签
     d3.select(`#pie-chart`).append('text')
       .attr('transform', `translate(${outerRadius + 10}, ${150}) rotate(${angleInDegrees - 90})`)
       .text(`${data[index]}`);
   });

完成上述步骤后，你应该能看到HTML页面上有动态的饼状图，并显示对应的数字。如果需要更专业的图表效果，可以考虑使用专门的图表库。