echarts標准餅圖解讀共分為四部分，
一、基本配置demo
二、標題（title）配置
四、圖例（legend）配置
五、系列列表（series ）配置
下面是一個基本配置demo，復制下方代碼，下載並引入正確路徑的echarts.js即可得到echarts標准餅圖
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <!-- jquery cdn引入 --> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <!-- echarts 引入 --> <script src="echarts.js"></script> <style type="text/css"> </style> </head> <body> <div id="main" style="width:500px;height:500px;"></div> <script> var myChart=echarts.init(document.getElementById('main')); //init初始化接口，返回ECharts實例，其中dom為圖表所在節點 var option = {
//標題
title : {
text: '主標題', subtext: '副標題', x:'center' },
//提示框，鼠標懸浮交互時的信息提示 tooltip : { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" },
//圖例，每個圖表最多僅有一個圖例 legend: { orient: 'vertical', left: 'left', data: ['第一部分','第二部分','第三部分','第四部分'] },
// 系列列表,每個系列通過 type 決定自己的圖表類型 series : [ { name: '訪問', type: 'pie', radius : '62%', center: ['50%', '65%'], minAngle:'15', data:[ {name:"第一部分",value:4}, {name:"第二部分",value:7}, {name:"第三部分",value:3}, {name:"第四部分",value:1}, ], itemStyle: { normal:{ label:{ show:true, formatter: "{b} :\n {c} \n ({d}%)", position:"inner" } } } } ], }; myChart.setOption(option);// 為echarts對象加載數據 </script> </body> </html>
結果顯示：
為了更好得運用echarts插件，可以繼續了解接下來餅狀圖的詳細配置。