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="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} : {c} ({d}%)", position:"inner" } } } } ], }; myChart.setOption(option);// 为echarts对象加载数据 </script> </body> </html>
结果显示：
为了更好得运用echarts插件，可以继续了解接下来饼状图的详细配置。