最近做項目，需要生成一個餅狀圖來展示結果資料，是以根據ECharts官方示例，自己寫了個簡單的Demo
（注：文末附有源碼提供下載下傳）
1、html檔案：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>My ECharts Demo</title>
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="js/echarts.common.min.js"></script>
</head>
<body>
<!-- 為ECharts準備一個具備大小（寬高）的Dom -->
<div id="myChartArea" style="width: 600px; height:400px;"></div>
</body>
<!-- 注意:操作echarts的js引用,必須放在div之後 -->
<script type="text/javascript" src="js/myEcharts.js"></script>
</html>
2、myEcharts.js檔案：
$(function () {
// 為echarts對象加載資料
myChart.setOption(option);
});
/**
* echarts.init(dom容器):基于dom容器,執行個體化echarts對象
* dom容器必須是html的節點，如果是使用jQuery擷取的則必須指定集合中的一個元素節點，比如(“#main”)則表示jQuery對象。$(“#main”)[0]則表示一個id為main的節點
*/
// var myChart = echarts.init(document.getElementById("myChartArea"));
var myChart = echarts.init($("#myChartArea")[0]);
var option = {
title: {
text: '某站點使用者通路來源',
subtext: '純屬虛構',
x: 'center'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: ['直接通路', '郵件營銷', '聯盟廣告', '視訊廣告', '搜尋引擎']
},
series: [
{
name: '通路來源',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: [
{value: 335, name: '直接通路'},
{value: 310, name: '郵件營銷'},
{value: 234, name: '聯盟廣告'},
{value: 135, name: '視訊廣告'},
{value: 1548, name: '搜尋引擎'}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
3、注意事項：
需要在頁面引入jquery和echarts兩個js
echarts.js下載下傳：http://echarts.baidu.com/download.html，下載下傳“常用”js即可
4、效果圖：
https://github.com/550690513/ECharts