前端图表库选型：ECharts与Chart.js画饼图对比

一、核心差异概览：从设计哲学到引入成本

饼图（Pie Chart）与环形图（Doughnut Chart）常用于反映组成各部分占总体的比例关系。虽然从最终渲染效果来看，两者都能绘制出扇区、图例和悬浮提示框，但其底层的设计思路与适用边界存在本质区别：

• 引入体积与依赖边界：Chart.js 是一款专注于常用标准图表的轻量库，压缩后主文件仅约 60KB，支持原生 ES 模块树摇（Tree-shaking）；而 Apache ECharts 是一个功能庞大的企业级可视化解决方案，完整包体积超过 300KB（Gzip 后），即便通过 echarts/core 进行按需加载，基础运行时和必要组件的下限仍高于 Chart.js。
• 底层渲染引擎支持：Chart.js 完全基于 HTML5 Canvas 进行像素栅格绘制；ECharts 默认基于 Canvas（底层自研 ZRender），同时原生支持 SVG 渲染器。在移动端低配置设备或超高分辨率大屏中，ECharts 支持直接切换为 SVG 渲染以获得无损缩放与更优内存表现。
• 配置心智模型：ECharts 采用全局“复合 Option”模型，所有的标题、图例、扇区数据、动画和引线均挂载在同一棵配置树上；Chart.js 则将配置拆分为 type、data（标签与数据集）和 options（行为与插件）三大顶级属性。

二、实现步骤对比：从容器准备到渲染完成

为了保证对比的严谨性与直观性，我们设定一致的业务需求：绘制某技术资讯网站在过去 30 天内访问终端的构成比例。

1. ECharts 的实现逻辑与代码

ECharts 需要挂载在一个预先具备明确宽度与高度的 <div> 容器上。由于它内部维护自己的画布与坐标系统，如果父容器尺寸为 0，图表将无法正常计算半径。

<!-- HTML 容器 -->
<div id="echarts-pie-container" style="width: 100%; height: 360px;"></div>

<!-- JavaScript 脚本 -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
<script>
  const chartDom = document.getElementById('echarts-pie-container');
  // 1. 初始化实例（可传参数 { renderer: 'svg' }）
  const myChart = echarts.init(chartDom);

  // 2. 声明 Option 配置
  const option = {
    title: {
      text: '终端访问占比',
      left: 'center',
      top: 10,
      textStyle: { fontSize: 16, color: '#2D3748' }
    },
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {c}% ({d}%)' // b为名称，c为数值，d为百分比
    },
    legend: {
      orient: 'horizontal',
      bottom: 10
    },
    series: [
      {
        name: '终端来源',
        type: 'pie',
        radius: '60%', // 饼图半径
        data: [
          { value: 55, name: '移动端' },
          { value: 30, name: '桌面端' },
          { value: 10, name: '平板' },
          { value: 5,  name: '其他' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.2)'
          }
        }
      }
    ]
  };

  // 3. 应用配置渲染
  myChart.setOption(option);

  // 4. 监听窗口变化自适应
  window.addEventListener('resize', () => {
    myChart.resize();
  });
</script>

2. Chart.js 的实现逻辑与代码

Chart.js 必须绑定在原生 <canvas> 元素上。在响应式排版中，推荐的做法是在 <canvas> 外包裹一层相对定位的 <div> 容器，并设置 maintainAspectRatio: false，这样画布即可完美随父级容器缩放。

<!-- HTML 容器：外层相对定位容器控制尺寸 -->
<div style="position: relative; width: 100%; height: 360px;">
  <canvas id="chartjs-pie-canvas"></canvas>
</div>

<!-- JavaScript 脚本 -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
  const ctx = document.getElementById('chartjs-pie-canvas').getContext('2d');

  // 实例化图表，传入画布上下文与配置
  const myPieChart = new Chart(ctx, {
    type: 'pie',
    data: {
      labels: ['移动端', '桌面端', '平板', '其他'], // 维度名称
      datasets: [{
        data: [55, 30, 10, 5], // 独立数值数组
        backgroundColor: ['#879B88', '#687D8D', '#D1DACF', '#D8D5CC'], // 对应扇区颜色
        borderWidth: 1,
        borderColor: '#FFFFFF'
      }]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      plugins: {
        title: {
          display: true,
          text: '终端访问占比',
          font: { size: 16 }
        },
        legend: {
          position: 'bottom'
        },
        tooltip: {
          callbacks: {
            label: function(context) {
              return ` ${context.label}: ${context.parsed}%`;
            }
          }
        }
      }
    }
  });
</script>

三、核心差异剖析：数据模型与映射机制

编写上述两个示例时，开发者能明显感受到数据源组织方式的根本差异：

• ECharts 的“自包含实体对象”机制： ECharts 的核心数据是由对象构成的数组 [{ value: 55, name: '移动端' }, ...]。每一个实体对象把类别名称和数值紧密锁在一起。这种设计带来的优势是，无论你对数组做排序、截断前 5 项、还是条件筛选，数据与名称永远不会发生位置错位；图例组件（Legend）无需额外配置即可自动扫描 name 属性生成图例项。
• Chart.js 的“平行数组矩阵”机制： Chart.js 延续了传统统计图表库的数据矩阵模型，将分类轴标签 labels 和具体序列数值 datasets[0].data 拆分为两个平行的简单数组。这种设计在柱状图、多线图等多数据集对比时十分紧凑，但在单一饼图场景下，开发者必须自行确保 labels、data 以及 backgroundColor 的索引下标绝对对应。

四、进阶特性对比：环形图、引线与动态更新

在实际项目需求中，静态的基础饼图往往只是起点，常见的产品需求还包括做成环形镂空、中心文案指示、扇区引线防重叠以及服务端数据推送更新。

1. 环形图（Donut Chart）与中心文字

ECharts：在原有的 type: 'pie' 基础之上，将 radius 参数由单值（如 '60%'）更改为双值区间（如 ['40%', '70%']），即可快速实现内圈镂空。若要在空心中心显示总计数字或指标，可以通过 title 的绝对定位，或者使用 graphic 组件在中心插入原生文本元素。

Chart.js：专门提供了独立的 type: 'doughnut' 图表类型，并支持 cutout: '60%' 属性精准控制空心尺寸比例。但在中心绘制自定义指标文字相对复杂，由于 Chart.js 纯 Canvas 渲染的特性，通常需要编写自定义插件（Plugin）在 afterDraw 生命周期通过 ctx.fillText 手动计算坐标写字。

2. 扇区外引线（Label Line）与标签防重叠

当饼图的切片较多或存在极小占比扇区（如 1%~3%）时，标签的排版是最大的视觉难点：

• ECharts 优势显著：ECharts 原生内置了极其成熟的外部指示线算法（labelLine）和文本防遮挡策略（avoidLabelOverlap: true）。当相邻扇区较小时，系统会自动向上向下错落折线排列，确保字字清晰。
• Chart.js 偏重紧凑：Chart.js 默认只支持在扇区内部或借助图例展示文字，如果一定要像 ECharts 一样拉出折线引线到图表外部，必须额外引入第三方社区插件（如 chartjs-plugin-piechart-outlabels），引入成本和排版调优难度显著上升。

3. 响应式与数据更新机制

在现代单页应用（SPA）中，图表常随窗口缩放或接口轮询而更新：

五、选型决策指南与落地建议

通过对两款工具在代码实现、数据结构和渲染细节上的全面比对，技术选型不应孤立地判定优劣，而应结合项目当前的技术约束与未来的扩展预期：

1. 推荐选择 Chart.js 的场景

1. 对首屏加载性能与依赖包体积极度敏感：如面向移动端消费者的营销 H5、跨端轻应用、博客静态站点或需要快速分发的嵌入式轻量微前端。
2. 图表形态以标准统计为主：页面仅需展示常规的饼图、环形图、柱状图或折线图，图例与悬浮 Tooltip 能够满足交互诉求，不需要外部复杂引导线和特殊几何图形拼接。
3. 团队追求开箱即用与极简 API：学习成本低，无需理解 ECharts 庞大复杂的 Option 体系，几个基础参数便能直接出图。

2. 推荐选择 Apache ECharts 的场景

1. 复杂的企业级中后台或专业数据看板：涉及多图表联动刷选（DataZoom / Brush）、图表与地图联动、导出高质量矢量图等深度分析场景。
2. 对扇区引线、标签排版及富文本有精细化视觉要求：必须在扇区外清晰拉线标注名称与百分比，且要求在极端小数值下文字绝不重叠遮挡。
3. 大屏高清展示或无损打印：需要直接无缝启用 SVG 渲染器，保证在超高分辨率甚至矢量打印时字迹与图形边缘锐利清晰。