筆記整理，直接上代碼。
html頁面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="../js/jquery-1.11.3.min.js"></script>
<script src="../js/echarts.js"></script>
<script src="../js/demo3.js"></script>
<title>餅狀圖Demo</title>
</head>
<body>
<div id="container" style="border: 1px solid #33acfb; width: 800px; height: 400px;"></div>
</body>
</html>
js代碼
$(function () {
var data = [
{ value: 335, name: '直接訪問' },
{ value: 310, name: '郵件營銷' },
{ value: 234, name: '聯盟廣告' },
{ value: 135, name: '視頻廣告' },
{ value: 1548, name: '搜索引擎' }
];
drawPiePic('container', data)
})
/**
* 畫餅狀圖
* @param {*} documentId 節點ID
* @param {*} data 填充數據
*/
function drawPiePic(documentId, data) {
var legendData = [];
for(var item in data){
legendData.push(data[item].name);
}
var myChart = echarts.init(document.getElementById(documentId));
// 指定圖表的配置項和數據
var option = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: legendData
},
series: [
{
// name: '訪問來源',
type: 'pie',
radius: '25%',
center: ['50%', '60%'],
data: data,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
}
效果圖：
