JavaScript中如何创建饼图

在JavaScript中创建饼图有多种实现方式，既可以使用成熟的第三方图表库快速完成，也可以通过原生Canvas或者SVG技术从零开始绘制，不同的方案适用不同的项目场景。

使用ECharts创建饼图

ECharts是百度开源的一款成熟的数据可视化库，内置了丰富的图表类型，饼图是其中最常用的图表之一，使用起来非常简单，只需要几步配置就能生成美观的饼图。

首先需要引入ECharts的库文件，这里使用官方CDN地址：

<script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>

然后在页面中准备一个用来放置饼图的容器，设置好宽高：

<div id="pieChart" style="width: 600px; height: 400px;"></div>

接下来编写JavaScript代码初始化图表并配置饼图数据：

// 初始化ECharts实例
const chartDom = document.getElementById('pieChart');
const myChart = echarts.init(chartDom);
// 配置饼图选项
const option = {
    title: {
        text: '月度支出占比',
        left: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c}元 ({d}%)'
    },
    legend: {
        orient: 'vertical',
        left: 'left'
    },
    series: [
        {
            name: '支出类型',
            type: 'pie',
            radius: '50%',
            data: [
                { value: 1500, name: '餐饮' },
                { value: 1200, name: '交通' },
                { value: 800, name: '娱乐' },
                { value: 2000, name: '房租' },
                { value: 500, name: '其他' }
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};
// 设置配置项并渲染图表
myChart.setOption(option);
// 窗口大小变化时重新调整图表尺寸
window.addEventListener('resize', function() {
    myChart.resize();
});

使用原生Canvas绘制饼图

如果不想引入第三方库，也可以使用原生Canvas API手动绘制饼图，这种方式更灵活，适合需要高度定制化的场景。

首先准备Canvas容器：

<canvas id="canvasPie" width="600" height="400"></canvas>

然后编写绘制逻辑：

const canvas = document.getElementById('canvasPie');
const ctx = canvas.getContext('2d');
// 饼图数据
const pieData = [
    { value: 30, name: 'A类', color: '#5470c6' },
    { value: 20, name: 'B类', color: '#91cc75' },
    { value: 25, name: 'C类', color: '#fac858' },
    { value: 15, name: 'D类', color: '#ee6666' },
    { value: 10, name: 'E类', color: '#73c0de' }
];
// 计算数据总和
const total = pieData.reduce((sum, item) => sum + item.value, 0);
// 饼图中心坐标和半径
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const radius = 150;
// 当前起始角度
let startAngle = 0;
// 遍历数据绘制每个扇形
pieData.forEach(item => {
    // 计算当前扇形的角度
    const sliceAngle = (item.value / total) * 2 * Math.PI;
    // 绘制扇形
    ctx.beginPath();
    ctx.moveTo(centerX, centerY);
    ctx.arc(centerX, centerY, radius, startAngle, startAngle + sliceAngle);
    ctx.closePath();
    ctx.fillStyle = item.color;
    ctx.fill();
    // 绘制边框
    ctx.strokeStyle = '#fff';
    ctx.lineWidth = 2;
    ctx.stroke();
    // 计算标签位置
    const labelAngle = startAngle + sliceAngle / 2;
    const labelX = centerX + (radius / 1.5) * Math.cos(labelAngle);
    const labelY = centerY + (radius / 1.5) * Math.sin(labelAngle);
    // 绘制标签
    ctx.fillStyle = '#333';
    ctx.font = '14px Arial';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText(`${item.name}: ${item.value}`, labelX, labelY);
    // 更新起始角度
    startAngle += sliceAngle;
});

不同方案的选择建议

如果项目对开发效率要求高，不需要太多定制化效果，优先选择ECharts这类成熟的图表库，不仅代码量少，还内置了交互、动画等常用功能，适配性也更好。

如果项目对包体积有严格要求，或者需要完全自定义饼图的绘制逻辑、样式效果，那么原生Canvas或者SVG的实现方式会更合适，虽然需要写更多代码，但可控性更强。

另外如果需要兼容非常老旧的浏览器，需要注意ECharts和Canvas的兼容性，SVG方案在老旧浏览器中的兼容性相对更好一些。

JavaScript饼图EChartsCanvasSVG修改时间：2026-06-05 02:21:48