HTML 動態生成可交互扇形統計圖：ECharts / Chart.js / HighCharts 選型指南

需求拆解

• 非圖片，需 DOM/CANVAS 渲染。
• 每個扇區支援點擊、懸停、彈窗、鏈接等 JS 交互。
• 數據動態獲取（AJAX/WebSocket），圖表需響應式更新。

主流圖表庫對比（2024 視角）

ECharts 5 扇形圖交互最小實現

<div id="pie-chart" style="width: 600px; height: 400px;"></div>
<script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
<script>
const chart = echarts.init(document.getElementById('pie-chart'));

// 1. 基礎配置
const option = {
  tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' },
  legend: { orient: 'vertical', left: 'left' },
  series: [{
    name: '訪問來源',
    type: 'pie',
    radius: ['40%', '70%'],  // 環形圖
    avoidLabelOverlap: false,
    itemStyle: { borderRadius: 8, borderColor: '#fff', borderWidth: 2 },
    label: { show: false, position: 'center' },
    emphasis: { label: { show: true, fontSize: 18, fontWeight: 'bold' } },
    labelLine: { show: false },
    data: []  // 動態填充
  }]
};

chart.setOption(option);

// 2. 動態載入數據並更新
fetch('/api/stats/source')
  .then(r => r.json())
  .then(data => {
    chart.setOption({
      series: [{ data: data.map(d => ({ value: d.count, name: d.source })) }]
    });
  });

// 3. 核心交互：點擊扇區跳轉/彈窗
chart.on('click', params => {
  if (params.componentType === 'series') {
    console.log('點擊扇區:', params.name, params.value, params.percent);
    // window.open(`/detail?source=${encodeURIComponent(params.name)}`);
    // 或彈窗: showModal(params.name, params.value);
  }
});

// 4. 懸停高亮聯動外部列表
chart.on('mouseover', params => {
  if (params.componentType === 'series') {
    highlightExternalItem(params.name);
  }
});
chart.on('mouseout', () => clearExternalHighlight());

// 5. 響應式 resize
window.addEventListener('resize', () => chart.resize());
</script>

進階交互模式

• 下鉆：點擊「搜索引擎」扇區 → 更新系列數據為「百度/Google/必應」細分 → 顯示「返回」按鈕。
• 多圖表聯動：點擊餅圖扇區 → 觸發柱狀圖/折線圖篩選同維度數據。
• 自定義 Tooltip HTML：tooltip: { formatter: (p) => `
  ${p.name}
  ${p.value} 次
  ` }。
• 動畫控制：animationDurationUpdate: 500, animationEasing: 'cubicOut'。

選型建議

1. 中後台/國內項目/需快速交付/中文文檔 → **ECharts 5** 無腦首選。
2. 輕量移動端/簡單展示/團隊偏好簡潔 API → **Chart.js 4**。
3. React/Vue/TypeScript 重度項目/設計規範嚴格 → **AntV G2Plot** 或 **Recharts/ECharts for React**。
4. 商業 SaaS/需極致交互細節/有預算 → **HighCharts**。

總結

動態生成可交互扇形圖，**ECharts 5 以聲明式 Option、豐富事件系統、按需打包、中文生態優勢成為首選**。核心步驟：init → setOption(data) → on('click', handler) → resize()。避免手寫 SVG/D3，除非有極度非標準定制需求。