Echart 餅圖可以非常方便地展示和分析數(shù)據(jù)占比，而這些數(shù)據(jù)通常是用 JSON 格式表示的。下面是一個(gè)示例 JSON 數(shù)據(jù)，以及如何在 Echart 中使用它來(lái)繪制餅圖。

{
"legend": {
"data": ["類別1", "類別2", "類別3"]
},
"series": [
{
"name": "數(shù)據(jù)名稱",
"type": "pie",
"radius": "55%",
"center": ["50%", "50%"],
"data": [
{"value": 335, "name": "類別1"},
{"value": 310, "name": "類別2"},
{"value": 234, "name": "類別3"}
],
"itemStyle": {
"emphasis": {
"shadowBlur": 10,
"shadowOffsetX": 0,
"shadowColor": "rgba(0, 0, 0, 0.5)"
}
}
}
]
}

上面的 JSON 數(shù)據(jù)包含了一個(gè)餅圖所需的所有信息：

• legend - 圖例數(shù)據(jù)，用于顯示每個(gè)數(shù)據(jù)點(diǎn)的標(biāo)簽
• series - 數(shù)據(jù)系列，用于指定各個(gè)數(shù)據(jù)點(diǎn)的值和名稱，以及餅圖的樣式
• name - 數(shù)據(jù)系列的名稱
• type - 指定數(shù)據(jù)系列為餅圖
• radius - 指定餅圖的半徑大小
• center - 指定餅圖的中心位置，一般為屏幕的中心
• data - 指定各個(gè)數(shù)據(jù)點(diǎn)的值和名稱
• itemStyle - 指定數(shù)據(jù)點(diǎn)的樣式，例如陰影效果等

在 Echart 中使用上述 JSON 數(shù)據(jù)非常簡(jiǎn)單，只需要將數(shù)據(jù)傳遞給 Echart 對(duì)象的 setOption() 方法即可：

var chart = echarts.init(document.getElementById('chart'));
var option = {
// 上面的 JSON 數(shù)據(jù)
};
chart.setOption(option);

上面的代碼假定頁(yè)面中已經(jīng)有一個(gè) id 為 “chart” 的元素，用于顯示餅圖。