首先如何引入echarts框架在上一篇文章中已經說了，引入之后就可以繪制圖形了，新手練習的時候是個柱狀圖，現在來畫一下餅圖。
首先來講一下繪制出一個圖形（無論是什么圖形）都需要的幾個要素：
1.首先是在head標簽中引入echart庫，就像下面這一張圖的劃紅線出來的部分。
捕獲.PNG
2.接下來為你的圖形創建一塊區域，讓你的圖形在其中顯示出來。
捕獲.PNG
3現在區域也創建好了，接下來就是圖表的初始化
捕獲.PNG
這里做一個進階操作，也是易于理解的
var bingChart = echarts.init(document.getElementById('muu'));
這里面的bingChart，muu都是我自己定義的，初始化函數就這一句，其中bingChart放在后面說，muu是第二部創建那個div區域的ID(看我截圖中的main)，這樣在一頁中有多個圖表的話就能區分開了。
4.第四步，設置圖表屬性
捕獲.PNG
這里詳細講一下這些個參數都是代表啥：
name:'訪問來源',
//系列名稱，如果啟用legend，該值將被legend.data索引相關
type:'pie',
//圖表類型，必要參數！如為空或不支持類型，則該系列數據不被顯示。
radius:'55%',
//這個應該是負責這個餅圖占你所創建出來容納它的div大小比例的，可以改一下參數自己體會一下
data:[
{value:235,name:'視頻廣告'},
{value:274,name:'聯盟廣告'},
{value:310,name:'郵件營銷'},
{value:335,name:'直接訪問'},
{value:400,name:'搜索引擎'}
]
//餅圖的數據，這些都是自己填充的，日后肯定要用到從excel或者從數據庫中導入，先不管
5.第五步，參數都設置好了，就只剩下
bingChart.setOption(option);
放段完整代碼體會一下，這段代碼是餅圖和柱狀圖的結合，很有益于日后畫多個圖表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/echarts.min.js"></script>
<title>Title</title>
</head>
<body>
<div id="muu" style="height: 400px;width: 600px;"></div>
<script type="text/javascript">
var bingChart = echarts.init(document.getElementById('muu'));
option={ <!-- 定義圖表函數 -->
series:[
{
name:'訪問來源',
type:'pie',
radius:'55%',
data:[
{value:235,name:'視頻廣告'},
{value:274,name:'聯盟廣告'},
{value:310,name:'郵件營銷'},
{value:335,name:'直接訪問'},
{value:400,name:'搜索引擎'}
]
}]
}
bingChart.setOption(option);
</script>
//下面是柱狀圖
<div id="main" style="height: 400px;width: 600px;"></div>
<script type="text/javascript">
// 基于準備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById('main'));
// 指定圖表的配置項和數據
var option = {
title: {
text: 'ECharts 入門示例'
},
tooltip: {},
legend: {
data:['銷量']
},
xAxis: {
data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
</script>
</body>
</html>
