1.上一篇中講了如何繪制一個簡單的柱狀圖，這次要畫的是餅圖，餅圖主要是通過扇形的弧度表現不同類目的數據在總和中的占比，它的數據格式比柱狀圖更簡單，只有一維的數值，不需要給類目。因為不在直角坐標系上，所以也不需要xAxis，yAxis。
2.itemStyle都會有normal和emphasis兩個選項，normal選項是正常展示下的樣式，emphasis是鼠標 hover 時候的高亮樣式。也可以把陰影的效果設置在hover的時候。
3.背景色是全局的，所以直接在 option 下設置backgroundcolor。
4.代碼展示
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ECharts練習</title> <script type="text/javascript" src="js/echarts.min.js"></script> </head> <body> <!-- 為ECharts准備一個具備大小（寬高）的Dom --> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基於准備好的dom，初始化echarts實例 var myChart = echarts.init(document.getElementById('main')); // 指定圖表的配置項和數據 var option = { title: { text: '餅狀圖--南丁格爾圖',//標題文本內容 textStyle: {//設置標題的文本樣式 color: '#ffffff' } }, backgroundColor: '#2c343c', visualMap: { // 不顯示 visualMap 組件，只用於明暗度的映射 show: false, // 映射的最小值為 80 min: 80, // 映射的最大值為 600 max: 600, inRange: {// 明暗度的范圍是 0 到 1 colorLightness: [0, 1] } }, series: [{ name: '訪問來源', type: 'pie', radius: '55%', roseType: 'angle', data: [ {value: 400,name: '搜索引擎'}, {value: 335,name: '直接訪問'}, {value: 310,name: '郵件營銷'}, {value: 274,name: '聯盟廣告'}, {value: 235,name: '視頻廣告'} ], label: { normal: { textStyle: { color: 'rgba(255, 255, 255, 0.3)' } } }, labelLine: { normal: { lineStyle: {//將標簽的視覺引導線的顏色設為淺色 color: 'rgba(255, 255, 255, 0.3)' } } }, itemStyle: {//陰影的配置,還可以設置扇形的顏色，在normal中編輯color來設置，設置后的扇形顏色是一樣的 normal: { // 陰影的大小 shadowBlur: 200, // 陰影顏色 shadowColor: 'rgba(0, 0, 0, 0.5)' } } }] }; // 使用剛指定的配置項和數據顯示圖表。 myChart.setOption(option); </script> </body> </html>
5.效果圖展示
