echart 餅圖是一種常用的數據展示方式，它可以清晰地展示每個數據的占比和比例。在實際開發中，很多人使用 JSON 數據來生成餅圖，因為 JSON 數據能夠方便地與后端數據進行交互和處理。

// 示例數據
var data = [
{value: 335, name: '直接訪問'},
{value: 310, name: '郵件營銷'},
{value: 234, name: '聯盟廣告'},
{value: 135, name: '視頻廣告'},
{value: 548, name: '搜索引擎'}
];
// 生成餅圖
var myChart = echarts.init(document.getElementById('pie-chart'));
var option = {
title: {
text: '餅圖示例',
subtext: '純屬虛構',
x: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a}
{b} : {c} (hhn7zrt%)'
},
legend: {
orient: 'vertical',
left: 'left',
data: ['直接訪問', '郵件營銷', '聯盟廣告', '視頻廣告', '搜索引擎']
},
series: [
{
name: '訪問來源',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: data,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
myChart.setOption(option);

在上述代碼中，我們首先定義了一個示例數據 `data`，它包含了每個數據的名稱和數值。我們接著使用 `echarts.init()` 函數初始化了一個餅圖實例，然后定義了餅圖的樣式和細節。其中，我們使用了 `data` 變量來渲染了餅圖的數據。最后，通過 `myChart.setOption()` 函數將餅圖呈現在頁面中。

通過以上代碼，我們可以看到使用 JSON 數據生成餅圖非常簡單，并且使用 echarts.js 庫可以輕松實現數據的可視化。