ECharts之类型pie

原博客主链接：http://www.cnblogs.com/carsonwuu/p/8267002.html
效果：
先上可运行源码及相应的注释：

  1 <html>
  2 <head>
  3     <script src="https://cdn.bootcss.com/echarts/3.8.5/echarts.min.js"></script>
  4 </head>
  5 <body>
  6     <div id="main" style="600px;height:160px;border:2px solid green;"></div>
  7     <script>
  8     function Pie(name,CinArray,divId,colorL) {
  9     // 基于准备好的dom，初始化echarts实例
 10         var NameArray = CinArray.map(function(cinarray){
 11             return cinarray.name;
 12         }), 
 13         DataArray = CinArray.map(function(cinarray){
 14             return cinarray.value;
 15         });
 16         var myChart = echarts.init(document.getElementById(divId));
 17         
 18         // 指定图表的配置项和数据
 19         option = {
 20             title : {//标题设置‘参保情况’
 21                 x : 'center',//标题位置
 22                 text : name,//传入标题名称‘参保情况’
 23                 textStyle:{//标题字体颜色等设置
 24                     fontSize:16,
 25                     fontWeight:'bold'
 26                 }
 27             },
 28             tooltip : {//鼠标hover覆盖提示框
 29                 show : 'true',//可视
 30                 trigger : 'item',//根据item提示信息
 31                 formatter : "{a} <br/>{b}: {c} ({d}%)"//提示内容
 32             },
 33             legend : {//位于右侧的属性按钮
 34                 orient : 'vertical',//竖直放置
 35                 icon: 'circle',//图标为圆形，默认是方形
 36                 align:'auto',
 37                 itemGap: 6 ,//两个属性的距离
 38                 itemWidth : 8,//图标的宽度，对应有itemHeight为高度,圆形只有半径
 39                 x : '60%',//距离左侧位置
 40                 y : '45%',//距离上面位置
 41                 data : NameArray,//属性名称‘已参保’，‘未参保’
 42                 align: 'left',//图标与属性名的相对位置，默认为right，即属性名在左，图标在右
 43                 selectedMode: true,//可选择
 44                 formatter: function(v) {
 45                     return v ;
 46                 },
 47                 textStyle:{//属性名的字体样式设置
 48                     fontSize:10,
 49                     color: '#666'
 50                 }
 51             },
 52             series : [ {//饼状图设置
 53                 name : name,//设置名称，跟数据无相关性
 54                 type : 'pie',//类型为饼状
 55                 radius : [ '50%', '70%' ],//内圈半径，外圈半径
 56                 center : ['50%','55%'],//饼状图位置，第一个参数是左右，第二个是上下。
 57                 avoidLabelOverlap : false,
 58                 hoverAnimation: false,//鼠标悬停效果，默认是true
 59                 label : {//设置饼状图圆心属性
 60                     //normal,emphasis分别对应正常情况下与悬停效果
 61                     normal : {
 62                         show : false,
 63                         position : 'center'
 64                     },
 65                     emphasis : {
 66                         show : false,
 67                         textStyle : {
 68                             fontSize : '20',
 69                             fontWeight : 'bold'
 70                         }
 71                     }
 72                 },
 73                 labelLine : {
 74                     normal : {
 75                         show : true
 76                     }
 77                 },
 78                 data : CinArray,//对应数据
 79                 itemStyle : {//元素样式
 80                     normal : {
 81                         //柱状图颜色  
 82                         color : function(params) {//对每个颜色赋值
 83                             // 颜色列表  
 84                             var colorList = colorL;
 85                             //返回颜色  
 86                             return colorList[params.dataIndex];
 87                         },
 88 
 89                     },
 90                     emphasis : {
 91                                  
 92                     }
 93                 }
 94             } ]
 95         };
 96 
 97         // 使用刚指定的配置项和数据显示图表。
 98         myChart.setOption(option);
 99     }
100 var cin=[{name:'已参保',value:80},{name:'未参保',value:80}];
101 var color=[ 'rgb(30, 144, 255)','rgb(233, 105, 8)' ,'rgb(0, 105, 8)' ];
102 Pie('参保情况',cin,'main',color);
103     //myChart.setOption(option);
104 
105 </script>
106 </body>
107 </html>
注意：

1.echarts图的title不能与属性名重复。
2.echarts图是自适应的，它必须指定作图的高度即 id=main的Height数值，宽度可以自适应，也可以固定。