前言：
使用echarts遇到过的坑：
一定要给图表容器添加宽度与高度。图表在容器中可以调整位置，让图表显示的更完整。
今日分享重点：画饼状图。
1.引入相关js
<script type="text/javascript" src="../js/jquery-2.1.1.js"></script><script type="text/javascript" src="../echarts-4.2.0/echarts.min.js"></script>
2.确定容器
<div id="pie" style="width: 600px; height: 325px; margin-top: 100px; margin-left: 200px;"></div>
3.定义画饼状图的方法，配置图表参数
/*** 画饼图，主要用来画入郑、出郑行程时间统计* @param container 容器* @param legendData 菜单* @param seriesData 图表数据*/function drawPie(container, legendData, seriesData) {var pieChart = echarts.init(document.getElementById(container));pieChartOption = {tooltip : {trigger : 'item',formatter : "{a} <br/>{b} : {c} ({d}%)"},legend : {show : true,type : 'scroll',orient : 'horizontal',left : 120,top : 20,bottom : 20,data : legendData,textStyle : {color : 'white'}},//设置饼状图每个颜色块的颜色color : [ 'red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'purple' ],series : [ {name : '颜色',type : 'pie',radius : '55%',center : [ '53%', '50%' ],label : {normal : {//饼形图显示格式formatter : '{b|{b}} {per|{d}%} ',rich : {b : {color : 'white',fontSize : 14,lineHeight : 33},//设置百分比数字颜色per : {color : '#00B4FB',fontSize : 14,padding : [ 2, 4 ],borderRadius : 2}}}},data : seriesData,itemStyle : {emphasis : {shadowBlur : 10,shadowOffsetX : 0,shadowColor : 'rgba(0, 0, 0, 0.5)'}}} ]};pieChart.setOption(pieChartOption);var app = {};app.currentIndex = -1;var myTimer = setInterval(function() {var dataLen = pieChartOption.series[0].data.length;if ((app.currentIndex < dataLen - 1)&& pieChartOption.series[0].data[app.currentIndex + 1].value == 0) {pieChart.dispatchAction({type : 'downplay',seriesIndex : 0,dataIndex : app.currentIndex});app.currentIndex = (app.currentIndex + 1) % dataLen;} else {// 取消之前高亮的图形pieChart.dispatchAction({type : 'downplay',seriesIndex : 0,dataIndex : app.currentIndex});app.currentIndex = (app.currentIndex + 1) % dataLen;// 高亮当前图形pieChart.dispatchAction({type : 'highlight',seriesIndex : 0,dataIndex : app.currentIndex});// 显示 tooltippieChart.dispatchAction({type : 'showTip',seriesIndex : 0,dataIndex : app.currentIndex});}}, 3000);}
4.调用方法，传递参数
var legendData = ["红色", "橙色", "黄色", "绿色", "蓝色", '靛色', '紫色'];var seriesData = [{name: "红色", value: 14},{name: "橙色", value: 14},{name: "黄色", value: 14},{name: "绿色", value: 14},{name: "蓝色", value: 14},{name: "靛色", value: 14},{name: "紫色", value: 16},];drawPie("pie", legendData, seriesData);
5.划重点
设置饼状图每个颜色块的颜色可以使用color属性，这样就可以避免在具体的数据中每条数据再加样式。方法中有一个定时器，用来定时跳动每个颜色块。
*其它一些小细节，有注释可以参考。
6.上图
