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="width: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數值，寬度可以自適應，也可以固定。